LeafletJS - я хочу переместить контролер зума как я могу это сделать?

Question

LeafletJS - я хочу переместить контролер зума как я могу это сделать ? я знаю что есть элементы управления topleft, topright, bottomleft, bottomright но я не понимаю как их применить в nextjs.

return (<MapContainer
    center={[initialMaps.coord.latitude, initialMaps.coord.longitude]}
    zoom={initialMaps.zoom}
    scrollWheelZoom={true}
    className={`${st.containerMap}`}
>
    <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    {/* <MarkersList list={dataPlaces || []} />
    {coordsUser ? <Marker
        position={[coordsUser.latitude, coordsUser.longitude]}
        icon={new L.Icon({ iconUrl: iconMarker.itsMy })} />
        : null} */}
</MapContainer>)

}

Answer 1

Если по порядку, то правой кнопкой мыши по объекту и иследовать код (что вы и сделали). Потом там должен быть div с таким классом leaflet-control-zoom leaflet-bar leaflet-control. И дальше прописать в css файле ему стиль. margin-left: 200px;. Количество пикселей сами подберите нужное и тогда он переместиться куда вам нужно.

Answer 2

В Nextjs eсли мы подключаем стили через "import style from './style.scss'" это не работает следует использовать "import './style.scss'" обязательно ниже import "leaflet/dist/leaflet.css";

БЛОГ НА HUSL

LeafletJS - я хочу переместить контролер зума как я могу это сделать?

Ответы (2 шт):