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='© <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
Advertisement
Answer
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.