Leaflet React карта отображается кусками

Рейтинг: 0Ответов: 1Опубликовано: 12.05.2023

Подскажите, что я делаю не так? Если раскоментировать стили то карта вообще перестает отображатся

import { MapContainer, TileLayer } from 'react-leaflet';
import { LatLngExpression } from 'leaflet';
/* import 'leaflet/dist/leaflet.css'; */

const x: LatLngExpression = {
  lat: 59.96873940184264,
  lng: 30.328779333002572,
};

export function Map (): JSX.Element {

  return (
    <div className="map">
      <div className="map__container" >
        <MapContainer center={x} zoomControl={false} zoom={20} >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
        </MapContainer>
      </div>
    </div>

  );
}

Ниже - блок со встроенной картой

 <div className="contacts__map">
                <Map />
              </div>

введите сюда описание изображения

reactjs typescript карты leafletjs
Источник: Stack Overflow на русском

Ответы

▲ 0

Нужно было карту растянуть на весь div -

<MapContainer center={x} zoom={20} style={{width: '100%', height: '100%'}}>
      <TileLayer
        attribution='&copy; <a href="http://www.esri.com/">Esri</a> contributors'
        url='http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
      />
    </MapContainer>