Quiero mover la posición en el folleto de la galería del mapa base a la parte superior cerca del zoom del folleto en el mapa, pero estoy confundido acerca de cómo mover la codificación, aquí está:

1. El folleto de la galería de mapas base quiere moverse hacia arriba y cerca de Zoom.

Imagen de muestra: Imágenes

Ejemplo de posición deseada de la Galería de mapas base: Ejemplo de posición de la Galería de mapas base

Aquí está mi código y lo que necesito cambiar en mi código:

 import { React, useState, useEffect } from 'react' import { LayersControl, MapContainer, TileLayer, Marker, Popup, useMapEvents, } from 'react-leaflet' import List from '../Component/List' import L from 'leaflet' import SearchControl from './SearchControl' const { BaseLayer } = LayersControl function LocationMarker() { const [position, setPosition] = useState(null) const map = useMapEvents({ locationfound(e) { setPosition(e.latlng) map.flyTo(e.latlng, map.getZoom()) }, }) return position === null ? null : ( <Marker position={position}> <Popup>Location Me</Popup> </Marker> ) } function MyLocationMe() { 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 ( <div className="flex ml-auto"> <List /> <div className="w-4/5"> <MapContainer center={{ lat: 51.505, lng: -0.09 }} zoom={20} style={{ height: '100vh' }} whenCreated={setMap} > <SearchControl className="MarkerIcon" position="topright" /> <LayersControl position="topleft"> <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> </LayersControl> <LocationMarker /> </MapContainer> </div> </div> ) } export default MyLocationMe