React Leaflet -- button on map assistance

Question

I have a simple React Leaflet set up:

return (
    <MapContainer center={position} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  )

I want to add a simple bootstrap class button to the top center -- on the map like this

<button className="btn btn-primary">Button stuff</button>

How can I add that to the map using the code above ... or variation thereof with react leaflet?

thx Karen

Answer 1

You can create you own custom component by extending leaflet and applying a css class to center the button:

function BootstrapButton() {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    var button = L.control({
      position: "topright"
    });

    button.onAdd = function (map) {
      this._div = L.DomUtil.create("div", "myControl");
      const buttonElement = `<div class="btnWrapper">
      <button class="btn btn-primary">Button stuff</button>
      </div>`;

      this._div.innerHTML = buttonElement;
      return this._div;
    };

    button.addTo(map);

    return () => map.remove(button);
  }, [map]);

  return null;
}

styles.css:

.btnWrapper {
  width: 100vw;
  display: flex;
  justify-content: center;
}

and use it like this <MapContainer>...<BootstrapButton/></MapContainer>

Demo