CODEWITHSUNDEEP
reactjsantdreact-leaflet
Kyle Calica-St
Kyle Calica-St

Reputation: 2933

React-Leaflet is creating two maps

I am trying to create a minimap but for some reason, react-leaflet renders the map twice. I think its the container is not big enough to contain the map so it translates it out but I don't get how big it's supposed to be. The documentation doesn't really mention this.

   import React from 'react';
   import { MapContainer, TileLayer } from 'react-leaflet';
        
    const MapStyle = {
      height: '100px',
      width: '100px',
    };
    
    const MiniMap = assetLocation => {
      return (
        <MapContainer center={[45.4, -75.7]} zoom={13} scrollWheelZoom={false} style={MapStyle}>
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        </MapContainer>
      );
    };

I implement it inside Antd's grid system

<Row>
  <Space>
    <Col>
      <MiniMap assetLocation={item} />
      <NavButtons id={id} />
    </Col>
   <Col>{ ...otherComponents }</Col>
  </Space>

enter image description here

Upvotes: 0

Views: 982

Answers (1)

Kyle Calica-St
Kyle Calica-St

Reputation: 2933

I was missing the Leaflet's CSS. Just need to import it into the react component:

import 'leaflet/dist/leaflet.css';

Upvotes: 1

Related Questions