leaflet.views.App.js

import { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const baseMaps = {
  'Street View': L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }),
  Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    layers: 'TOPO-WMS',
  }),
  Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    layers: 'OSM-Overlay-WMS',
  }),
  'Topography + Places': L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    layers: 'TOPO-WMS,OSM-Overlay-WMS',
  }),
};

function App() {
  const savedMap = useRef();
  const mapId = 'map';

  useEffect(() => {
    if (savedMap.current) {
      savedMap.current.off();
      savedMap.current.remove();
    }

    const map = L.map(mapId, {
      center: [37.774929, -122.419418],
      zoom: 8,
    });
    savedMap.current = map;

    L.control.layers(baseMaps, null, { collapsed: false }).addTo(map);
    baseMaps['Street View'].addTo(map);
  }, []);

  return <div id={mapId}></div>;
}

export default App;