I'm trying to find a way to move my control.zoom and my control.layer. I get there with the css with the :: ngdeep tag but I don't find it clean.
Here is my code:
my TS:
import { Component, OnInit } from '#angular/core';
import * as L from 'leaflet';
import {circle, icon, latLng, map, marker, polygon, tileLayer} from 'leaflet';
import {ObservatoryService} from '../../../#core/services/observatory.service';
import {Observatory} from '../../../#core/models/observatory.model';
#Component({
selector: 'ngx-observatory-labs',
templateUrl: './observatory-labs.component.html',
styleUrls: ['./observatory-labs.component.scss'],
})
export class ObservatoryLabsComponent implements OnInit {
Observ: Array<Observatory>;
ObservLayers = [];
constructor(private obsService: ObservatoryService) {
}
leafletOptions: any = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
zoomControl: false,
maxZoom: 18,
attribution: '...',
id: 'mapbox.streets',
accessToken: 'your.mapbox.access.token',
}),
L.control.zoom({
position: 'bottomleft',
}),
L.control.layer-toggle({
position: 'topleft',
}),
],
zoom: 17,
center: L.latLng({lat: 43.599508, lng: 1.439671}),
};
layersControl = {
baseLayers: {
'Open Map basic': tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{maxZoom: 18, attribution: '...'}),
'Open Cycle Map': tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
{maxZoom: 18, attribution: '...'}),
'Open satelit Map': tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{maxZoom: 18, attribution: '...'}),
},
overlays: {
'Critical Zone': L.layerGroup([
circle([43.529070, 1.429942], {radius: 60, color: 'green'}).bindTooltip('<b>Hôtel :</b><br>la flannerie')]),
},
};
My Html:
<div style="height: 700px;"
leaflet
[leafletOptions]='leafletOptions'
[leafletLayersControl]='layersControl'
[leafletLayers]="ObservLayers">
</div>
I tried to move the elements in the initialization of the map but it does not work and I did not find any satisfying examples either. Would someone have the solution please.
You can do it by importing the leaflet CSS in your styles.scss:
#import '../node_modules/leaflet/dist/leaflet.css';
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
Related
I started getting this error after migrating to react version 18
makeStyles.js:3 Uncaught Error: MUI: makeStyles is no longer exported from #mui/material/styles. You have to import it from #mui/styles.
I have looked through the docs and tried different things but it didn't work.
How do I make this work?
here is my code:
import { ThemeProvider, createTheme } from "#mui/material/styles";
import { makeStyles } from "#mui/styles";
export default function Program() {
const theme = useTheme();
const [programData, setProgramData] = useState([]);
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
overflow: "hidden",
backgroundColor: theme.palette.background.paper,
},
image: {
height: "72%",
width: "530px",
objectFit: "cover",
paddingBottom: 3,
},
}));
useEffect(() => {
axios
.get("https://cryptic-shelf-72177.herokuapp.com/programs/api")
.then((response) => {
setProgramData([...response.data]);
})
.catch(function (error) {
console.log(error);
});
}, []);
const matches = useMediaQuery(theme.breakpoints.down("xs"));
const classes = useStyles();
return (
<div className={classes.root} style={{ padding: "3vw" }}>
<ImageListItem key="Subheader" style={{ height: "auto" }}></ImageListItem>
<ImageList
rowHeight={550}
cols={matches ? 1 : 3}
className={classes.gridList}
gap={12}
style={{ background: "#A52A2A " }}
>
{programData.length > 0 &&
programData.map((tile, index) => {
return (
<ImageListItem
key={Math.floor(Math.random() * new Date().getTime())}
component={Link}
to={"/programs/" + tile._id + "/programcomments"}
style={{ textDecoration: "none", color: "black" }}
>
<img
src={tile.programImage}
alt={tile.title}
class={classes.image}
/>
<ImageListItemBar
titlePosition="top"
title={tile.title}
// style={{ height: 400 }}
/>
<Typography
paragraph
style={{
borderBottom: "2px solid",
background: "white",
padding: 7,
}}
>
{tile.description.substring(0, 222)}..
</Typography>
</ImageListItem>
);
})}
</ImageList>
</div>
);
}
Everything was working fine until i migrated to React version 18, and made some material us changes that comes with React version 18 and materialui 5
Try this:
Remove all dependencies by deleting node-modules folder in your project.
Open a new terminal and run 'npm install'.
(Those two instructions above are optional)
Since there has been a major change moving from Mui v4 to v5, makeStyles() is deprecated, so that you have to use styled() function instead, and import it from '#emotion/styled';
Example:
import styled from '#emotion/styled';
const useStyles = styled(theme => ({
root: {
//Your styling rules
}
}))
Take a look at the following link as well, thanks for #TeslaDelMar 's answer:
https://www.reddit.com/r/reactjs/comments/uabs6g/material_ui_react_18/
Good luck!
I have thoroughly followed the instructions in the following guides:
Get Started with ag-Grid in Your Angular Project
Angular Webpack 3
My app.module.ts includes:
import { AgGridModule } from 'ag-grid-angular';
...
#NgModule({
imports: [
...,
AgGridModule.withComponents([])
]
})
In vendor.css
#import "~ag-grid-community/dist/styles/ag-grid.css";
#import "~ag-grid-community/dist/styles/ag-theme-balham.css";
In the home.component.ts:
import { Component, OnInit } from '#angular/core';
import {GridOptions} from 'ag-grid-community';
#Component({
selector: 'jhi-home',
templateUrl: './home.component.html',
styleUrls: ['home.css']
})
export class HomeComponent implements OnInit {
private gridOptions: GridOptions;
public rowData: any[];
private columnDefs: any[];
constructor(
private accountService: AccountService,
private loginModalService: LoginModalService,
private eventManager: JhiEventManager
) {
this.gridOptions = <GridOptions>{
onGridReady: () => {
this.gridOptions.api.sizeColumnsToFit();
}
};
this.columnDefs = [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price'}
];
this.rowData = [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000}
];
}
ngOnInit() {
}
}
Eventually in the template I added the component:
<ag-grid-angular #agGrid style="width: 500px; height: 300px;"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData">
</ag-grid-angular>
Although there are no errors at build, the grid will not render. That is the way my HTML looks after compilation:
I presume there may be an incompatibility between Angular 7/Webpack 4/the way Jhipster loads the app and ag-grid-angular.
Would you suggest any solution? Thank you!
You should import the AgGridModule on each one of your 'entities' apps modules, not on your main apps.module.ts.
I am trying to show loading indicator in webweb as follow. Loading indicator is showing but there is white background show after page is loaded. If I change to startInLoadingState to false, web content is showing but loading indicator does not show. It is happing in "react-native": "0.46.3" on ios
renderLoadingView() {
return (
<ActivityIndicator
animating = {this.state.visible}
color = '#bc2b78'
size = "large"
style = {styles.activityIndicator}
hidesWhenStopped={true}
/>
);
}
<WebView
source={source}
renderLoading={this.renderLoadingView} startInLoadingState={true} />
I like this approach which shows the activity indicator overlayed on the loading Webview so you don't have to wait until the entire page is loaded to start seeing content.
constructor(props) {
super(props);
this.state = { visible: true };
}
hideSpinner() {
this.setState({ visible: false });
}
render() {
return (
<View style={{ flex: 1 }}>
<WebView
onLoad={() => this.hideSpinner()}
style={{ flex: 1 }}
source={{ uri: this.props.navigation.state.params.url }}
/>
{this.state.visible && (
<ActivityIndicator
style={{ position: "absolute", top: height / 2, left: width / 2 }}
size="large"
/>
)}
</View>
);
}
A nice approach is setting the property startInLoadingState to true and set the renderLoading to return the desired View.
See the example below.
displaySpinner() {
return (
<View>
{/* Your spinner code goes here.
This one commes from react-native-material-kit library */}
<SingleColorSpinner />
</View>
);
}
render() {
return (
<WebView
startInLoadingState={true}
source={{ uri: this.state.myUri }}
renderLoading={() => {
return this.displaySpinner();
}}
/>
);
}
I have steped on that problem and after some research i found a pretty good solution.
It requires the "react-native-loading-spinner-overlay"
npm install --save react-native-loading-spinner-overlay
index.android.js
import Spinner from 'react-native-loading-spinner-overlay';
const main = 'http://www.myURI.pt';
class MyApp extends Component {
constructor(props) {
super(props);
this.state = { uri: main, visible: true };
}
showSpinner() {
console.log('Show Spinner');
this.setState({ visible: true });
}
hideSpinner() {
console.log('Hide Spinner');
this.setState({ visible: false });
}
render() {
return (
<View>
<Spinner
visible={this.state.visible}
textContent={'Loading...'}
textStyle={{ color: '#FFF' }}
/>
<WebView
scalesPageToFit
source={{ uri: this.state.uri }}
onLoadStart={() => (this.showSpinner())}
onLoad={() => (this.hideSpinner())}
/>
</View>
);
}
}
I think i didn't miss any line.
Alter your renderLoadingView function to the following, and the loading indicator should work as desired:
renderLoadingView() {
return (
<ActivityIndicator
color='#bc2b78'
size='large'
styles={styles.activityIndicator}
/>
);
}
So essentially, just remove the animating (as it is not required for the given usage) and hidesWhenStopped props from your ActivityIndicator. Hope this helps.
Copy & Pasteable: Minimal Webview Component with Loading Indicator
import React, { Component } from "react";
import { ActivityIndicator} from "react-native";
import { WebView } from "react-native-webview";
// Pass a "uri" prop as the webpage to be rendered
class WebViewScreen extends Component {
constructor(props) {
super(props);
this.state = { visible: true };
}
hideSpinner() {
this.setState({ visible: false });
}
render() {
return (
<React.Fragment>
<WebView
onLoadStart={() => this.setState({ visible: true })}
onLoadEnd={() => this.setState({ visible: false })}
// Pass uri in while navigating with react-navigation. To reach this screen use:
// this.props.navigation.navigate("WebViewScreen", {uri: "google.ca"});
source={{ uri: this.props.navigation.state.params.uri }}
/>
{this.state.visible ? (
<ActivityIndicator
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
jusityContent: "space-around",
flexWrap: "wrap",
alignContent: "center",
}}
size="large"
/>
) : null}
</React.Fragment>
);
}
}
export default WebViewScreen;
react-native webview is now deprecated.
You can import react-native-webview and do the following:
<WebView
source={{ uri: 'https://reactnative.dev' }}
startInLoadingState={true}
renderLoading={() => <Loading />}
/>
If you want to show a Spinner and then replace that spinner with the WebView already loaded, this is your answer:
import React from 'react';
import { StyleSheet, ActivityIndicator, View } from 'react-native';
import { WebView } from "react-native-webview";
function MyApp() {
const Spinner = () => (
<View style={styles.activityContainer}>
<ActivityIndicator size="large" color={white} />
</View>
);
return (
<WebView
bounces={false}
startInLoadingState={true}
renderLoading={Spinner}
style={styles.container}
source={{ uri: yourURL }}
showsHorizontalScrollIndicator={false}
scalesPageToFit
/>
)
}
export default StyleSheet.create({
container: {
flex: 1
},
activityContainer: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
backgroundColor: black,
height: '100%',
width: '100%'
}
});
I've used #AdamG's solution but there have a problem with absolute path. The below solution is set ActivityIndicator to the center but with a different way.
<View style={{ flex: 1 }}>
<WebView
onLoad={() => this.hideSpinner()}
style={{ flex: 1 }}
source={{ uri: 'yourhtml.html' }}
/>
<View style={{backgroundColor:'white', height:1}}></View>
{this.state.visible && (
<View style={{flex:1, alignItems:'center'}}>
<ActivityIndicator
size="large"
/>
</View>
)}
</View>
There is 2 another {flex:1} View and ActivityIndicator is in top of the bottom View. I've centered that.
<View style={{backgroundColor:'white', height:1}}></View>
And this line is set the opacity when you have loading state, there have two different View. In top view there is WebView and there is a black bottom border View belong to the WebView.For closing I've patched it with a white helper view.
Hey bro this is my solution, you have to use the event onLoadEnd instead onLoad, the event onLoad is not working for me.
import React, { Component } from 'react';
import { StyleSheet, ActivityIndicator, View } from 'react-native';
import { WebView } from "react-native-webview";
export default class MainActivity extends Component {
constructor(props) {
super(props);
this.state = { visible: true };
}
showSpinner() {
console.log('Show Spinner');
this.setState({ visible: true });
}
hideSpinner() {
console.log('Hide Spinner');
this.setState({ visible: false });
}
render() {
return (
<View
style={this.state.visible === true ? styles.stylOld : styles.styleNew}>
{this.state.visible ? (
<ActivityIndicator
color="#009688"
size="large"
style={styles.ActivityIndicatorStyle}
/>
) : null}
<WebView
style={styles.WebViewStyle}
//Loading URL
source={{ uri: 'https://aboutreact.com' }}
//Enable Javascript support
javaScriptEnabled={true}
//For the Cache
domStorageEnabled={true}
//View to show while loading the webpage
//Want to show the view or not
//startInLoadingState={true}
onLoadStart={() => this.showSpinner()}
onLoad={() => this.hideSpinner()}
/>
</View>
);
}
}
const styles = StyleSheet.create({
stylOld: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
styleNew: {
flex: 1,
},
WebViewStyle: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
marginTop: 40,
},
ActivityIndicatorStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
},
});
My response will not directly answer your question but it will get you to think about using Skeleton loaders in place of traditional loading indicators (ie. spinner). I've replaced all my project's indicators with Skeletons and have received great user feedback since the change.
Here's a detailed explanation:
https://mechanicalrock.github.io/2022/07/11/replace-circular-loaders-with-skeletons-a.html
Hope this plants the seed as a pattern going forward.
<WebView
style={{
flex: 1
}}
startInLoadingState={true}
source={{ uri: "https://google.com" }}
renderLoading={() => (
)}
/>
I'm getting the following error:
Dec 16 20:03:26 NathanHyland Bunny[21876]: Unable to resolve module socket.io-client/socket.io from /Users/nhyland/Documents/react-native/Bunny/index.ios.js: Invalid directory /Users/node_modules/socket.io-client/socket.io
Dec 16 20:03:26 NathanHyland syslogd[21710]: ASL Sender Statistics
My index.io.js:
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
import './UserAgent';
window.navigator.userAgent = "react-native";
var _ = require('lodash');
var io = require('socket.io-client/socket.io');
class Bunny extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<TouchableHighlight onPress={() => {
}}><Text>Test</Text></TouchableHighlight>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Bunny', () => Bunny);
I've tried to link directly to the folder/file in node_modules and that doesn't work, I've tried different ways of importing and no bueno.
It installs just fine via npm install socket.io-client, I can see it in node-modules.
Any idea why it won't let me import?
For people who land on this issue in future try include the "dist" folder in your require path like this:
var io = require('socket.io-client/dist/socket.io');
See the github issue discussing this here.
import io from 'socket.io-client';
===============
package.json file
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"socket.io-client": "2.0.3"
}
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
=============================================
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';
I have an optional feature for a chart that adds a renderer.text text object. When the chart is exported I would like this to be added only in that case. Below I have source code on how I have been accessing the renderer and the exporter. In the commented section Insert Here is where I was thinking it might go but I am unsure of the syntax. Thank you
myChart.renderer.text('Filtered', 5, 10)
.attr({rotation: 0})
.css({color: '#4572A7', fontSize: '8px', fontStyle:'italic'})
.add();
myChart.exportChart(null,
{chart:
{backgroundColor: '#FFFFFF', width: 972, height:480 /*Insert Here*/
}
}
);
You are right - there you should use load event to add extra text for exported image: http://jsfiddle.net/3bQne/88/
chart.exportChart(null, {
chart: {
backgroundColor: '#FFFFFF',
width: 972,
height: 480,
events: {
load: function () {
this.renderer.text('Filtered', 5, 10)
.attr({
rotation: 0
})
.css({
color: '#4572A7',
fontSize: '8px',
fontStyle: 'italic'
})
.add();
}
}
}
});