react.leaflet.views.App.js

import { MapContainer, LayersControl, TileLayer, WMSTileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

function App() {
  return (
    <MapContainer center={[38.907192, -77.036873]} zoom={8}>
      <LayersControl collapsed={false}>
        <LayersControl.BaseLayer name="Street View" checked>
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://tile.openstreetmap.org/{z}/{x}/{y}{r}.png"
          />
        </LayersControl.BaseLayer>
        <LayersControl.BaseLayer name="Topography">
          <WMSTileLayer
            layers="TOPO-WMS"
            url="http://ows.mundialis.de/services/service?"
          />
        </LayersControl.BaseLayer>
        <LayersControl.BaseLayer name="Places">
          <WMSTileLayer
            layers="OSM-Overlay-WMS"
            url="http://ows.mundialis.de/services/service?"
          />
        </LayersControl.BaseLayer>
        <LayersControl.BaseLayer name="Topography + Places">
          <WMSTileLayer
            layers="TOPO-WMS,OSM-Overlay-WMS"
            url="http://ows.mundialis.de/services/service?"
          />
        </LayersControl.BaseLayer>
      </LayersControl>
    </MapContainer>
  );
}

export default App;