Location me in map from React Leaflet

Question

I want to ask if I use a map from React Leaflet (https://react-leaflet.js.org/) but how do I add a location button to the map? like this an example of the location me button in the image that I gave the red arrow

And pictures in the link:
Example of an arrow Location Me

An example on my map where I want to add location Me

And how to show the location button, where do you save it from my coding?

import { React, useState } from 'react'
import {
  LayersControl,
  MapContainer,
  Marker,
  Popup,
  TileLayer,
  useMapEvents,
} from 'react-leaflet'

const { BaseLayer } = LayersControl

function LocationMarker() {
  const [position, setPosition] = useState(null)
  const map = useMapEvents({
    click() {
      map.locate()
    },
    locationfound(e) {
      setPosition(e.latlng)
      map.flyTo(e.latlng, map.getZoom())
    },
  })

  return position === null ? null : (
    <Marker position={position}>
      <Popup>You are here</Popup>
    </Marker>
  )
}


function MapsMe() {
  return (
    <div className="flex ml-auto">
      <div className="w-4/5">
        <MapContainer center={51.505, -0.09} zoom=20>
          <LayersControl>
            <BaseLayer checked name="OpenStreetMap">
              <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png "
              />
            </BaseLayer>
            <LocationMarker />
          </LayersControl>
        </MapContainer>
      </div>
    </div>
  )
}

export default MapsMe

Answer 1

If you need to get the exact same result as in your picture you need to use leaflet-easybutton library with font-awesome. Otherwise you can easily build your own icon by extending leaflet control.

Install them:

npm i leaflet-easybutton

npm i font-awesome

Import them:

import "leaflet-easybutton/src/easy-button.js";
import "leaflet-easybutton/src/easy-button.css";
import "font-awesome/css/font-awesome.min.css";

Instantiate L.easy-button using fa-map-marker icon and inside the callback save the position and move the map to the user location.

export default function Map() {
  const [map, setMap] = useState(null);
  const [position, setPosition] = useState(null);

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

    L.easyButton("fa-map-marker", () => {
      map.locate().on("locationfound", function (e) {
        setPosition(e.latlng);
        map.flyTo(e.latlng, map.getZoom());
      });
    }).addTo(map);
  }, [map]);

  return (
    <MapContainer
      center={[51.505, -0.09]}
      zoom={20}
      style={{ height: "100vh" }}
      whenCreated={setMap}
    >
    ...
}

Here is a demo. When you open it the icon won't show up cause there is a known issue with svg icons and codesandbox but locally you should not have any issue.