I'm trying to create a map that is inside of a modal. But the map is only showed partially. I've tried invalidatingSize()
after node is created but it doesn't seem to work.
import React from 'react';
import ReactDOM from 'react-dom'
import L from 'leaflet';
class Mapa extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
createMap(element){
var map = L.map(element);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
return map;
}
setupMap(){
this.map.setView([this.props.lat, this.props.lon], this.props.zoom);
this.map.invalidateSize();
}
componentDidMount(){
let self = this;
if (this.props.createMap) {
this.map = this.props.createMap(ReactDOM.findDOMNode(self));
} else {
this.map = this.createMap(ReactDOM.findDOMNode(self));
}
this.setupMap();
}
render(){
/*Returns div with id map*/
}
}
I did this using the JSS
:
import jss from 'jss';
import jssDefault from 'jss-preset-default';
import 'leaflet/dist/leaflet.css';
jss.setup(jssDefault());
jss.createStyleSheet({
'@global': {
'.leaflet-container': {
height: '100%',
},
},
}).attach();
Leaflet uses global CSS classes. So you can just use your global styles using css-loader
:
styles.css
:
:global {
.leaflet-container {
height: 100%;
}
}
component.jsx
:
import './styles.css';
Finally I fixed. The code is correct but I didn't add leaflet dependencies correctly. Once I fixed that all worked perfectly. In fact this.map.invalidateSize(); was no necessary.
import React from 'react'; import ReactDOM from 'react-dom' import L from 'leaflet'; class Mapa extends React.Component { constructor(props){ super(props); this.state = { }; } createMap(element){ var map = L.map(element); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); return map; } setupMap(){ this.map.setView([this.props.lat, this.props.lon], this.props.zoom); } componentDidMount(){ let self = this; if (this.props.createMap) { this.map = this.props.createMap(ReactDOM.findDOMNode(self)); } else { this.map = this.createMap(ReactDOM.findDOMNode(self)); } this.setupMap(); } render(){ /*Returns div with id map*/ } }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.