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

Question

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

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>

Answer 1

Нужно было карту растянуть на весь 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>

БЛОГ НА HUSL

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

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