I have this react component:
import React, { Fragment } from 'react';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
const customMarker = new L.icon({
iconUrl: '/images/poemEditorTools/location-pointer-new.svg',
iconSize: [56, 72],
iconAnchor: [26, 72],
});
const MyPopupMarker = ({ content, position }) => (
<Marker position={position} icon={customMarker} >
<Popup>{content}</Popup>
</Marker>
)
const MyMarkersList = ({ markers }) => {
const items = markers.map(({ key, ...props }) => (
<MyPopupMarker key={key} {...props} />
))
return <Fragment>{items}</Fragment>
}
const markers = [
{ key: 'marker1', position: [51.5, -0.1], content: 'My first popup' },
{ key: 'marker2', position: [51.51, -0.1], content: 'My second popup' },
{ key: 'marker3', position: [51.49, -0.05], content: 'My third popup' },
]
class MapWithPoems extends BaseComponent {
render() {
return (
<Map center={[51.505, -0.09]} zoom={13} style={{ height: "500px", width: "100%" }} >
<TileLayer
url={
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
}
/>
<MyMarkersList markers={markers} />
</Map>
);
}
}
export default MapWithPoems;
You have to call map.invalidateSize();
after init the map.
Maybe this link can help you to use it in reactjs: https://stackoverflow.com/a/56184369/8283938
using react hooks. This worked:
const map = useMap()
useEffect(() => {
setTimeout(() => {
map.invalidateSize();
}, 250);
}, [map])
But the solution seems a bit hacky to me. 250ms seems arbitrary.
Using react hooks, without setTimeout(). This implementation worked for me.
const setMap = ( map: LeafletMap ) => {
const resizeObserver = new ResizeObserver( () => {
map.invalidateSize()
}
const container = document.getElementById('map-container')
resizeObserver.observe(container!)
}
<MapContainer
...other properties
id='map-container'
whenCreated={setMap}
>
</MapContainer>
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.