React/Leaflet-side-by-side Error: Map container is already initialized. #35

Question

I'm having issue while rerendering the map with useEffect

  const [baseViewCoords, setBaseViewCoords] = useState([37.715, 44.8611]);

  const searchApiHandler = () => {
  // some code that will fetch new values for baseViewCoords and set to the state
  };

  useEffect(() => {

    var map = L.map('map').setView(baseViewCoords, 13);
    [](url)
    var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap<\/a> contributors'
    }).addTo(map);

    var stamenLayer = L.tileLayer('https://stamen-tiles- 
    {s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
        attribution:
            'Map tiles by <a href="http://stamen.com">Stamen Design<\/a>, ' +
            '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0<\/a> &mdash; ' +
            'Map data {attribution.OpenStreetMap}',
        minZoom: 1,
        maxZoom: 16
    }).addTo(map)

    L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
  }, [baseViewCoords]);

return (
     <div id="map" />
)

I'm trying to change the position of map and rerender it after fetching api but shows the in attached files enter image description here

Seth Lutske Seth Lutske · Accepted Answer · 2021-02-22T15:49:10

This is happening because on mount, L.map is finding <div id="map" /> and initializing it to be a map. Then whenever your useEffect runs, it is trying to use that same div to run L.map again, but leaflet recognizes that that div is already a leaflet map, so it errors.

I recommend using actual react-lealfet components:

import { MapContainer, TileLayer } from 'react-leaflet';

const MyComponent = () => {

  const [baseViewCoords, setBaseViewCoords] = useState([37.715, 44.8611]);
  const [map, setMap] = useState();

  const searchApiHandler = () => {...};

  useEffect(() => {
    if (map){
      L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
    }
  }, [map])

  useEffect(() => {
    if (map){
      map.setView(baseViewCoords)
    }
  }, [map, baseViewCoords]);

  return (
     <MapContainer
       center={baseViewCoords}
       zoom={13}
       whenCreated={map => setMap(map)}
     >
       <TileLayer 
         url={osm_url}
       />
       <TileLayer 
         url={stamen_url}
       />
     </MapContainer>
  )

}

React/Leaflet-side-by-side Error: Map container is already initialized. #35

1 Answers