Leaflet MapContainer not displaying correctly

Question

My MapContainer in leaflet doesn't render correctly. I see a square in the top left corner and when I move around the map, more things render, but not correctly.

If I resize the page, it works perfectly. I've seen a few other posts that mention map.invalidateSize, but I am not using a map, I'm using a map container. Also, they were all using javascript, I am using typescript.

Picture of the map Here is my code:

import React, { useState } from 'react';
import { TileLayer, Tooltip, Marker, MapContainer, Polyline, useMap } from "react-leaflet";
import "leaflet/dist/leaflet.css";
//import MarkerClusterGroup from "react-leaflet-markercluster";
import L, { LatLng } from "leaflet";
import { FullscreenControl } from "react-leaflet-fullscreen";
import "react-leaflet-fullscreen/dist/styles.css";


//thanks to manoj garu's post at  https://stackoverflow.com/questions/64839175/why-i-am-getting-map-is-not-exported-from-react-leaflet


export const customMarker = new L.Icon({
    iconUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png",
    iconSize: [25, 41],
    iconAnchor: [10, 41]
});
// popupAnchor: [2, -40]

const Cluster = (props) => {
    
    const { coordinates, zoom, tripMode, permanentTooltip } = props;

    let data = {
        minLat: -6.1751,
        maxLat: 55.7558,
        minLong: 37.6173,
        maxLong: 139.6917
    };
    const findMidpoint = () => {
        let numWaypoints = coordinates?.length;
        if (numWaypoints > 0) {
            let midLat = 0;
            let midLong = 0;
            
            for (let i = 0; i < coordinates?.length; i++) {
                if (coordinates[i]?.position.length === 2) {
                    midLat += coordinates[i].position[0];
                    midLong += coordinates[i].position[1];
                }
            }
            midLat = Number(midLat / coordinates.length);
            midLong = Number(midLong / coordinates.length);
            return new LatLng(midLat, midLong);
        }
        else {
            return new LatLng(39.8097343, -98.5556199); // Midpoint of USA (Lebanon, KS)
        }
    }

    const calculateZoomLevel = () => {
        return 4;
    }

    const coordinatesOnly = () => {
        let tmp: any = [];
        for (let i = 0; i < coordinates?.length; i++) {
            if (coordinates[i].position && coordinates[i].position[0] != 0 && coordinates[i].position[1] != 0) {
                tmp.push(coordinates[i].position);
            }
        }
        return tmp;
    }

    const centerLat = (data.minLat + data.maxLat) / 2;
    var distanceLat = data.maxLat - data.minLat;
    var bufferLat = distanceLat * 0.05;
    const centerLong = (data.minLong + data.maxLong) / 2;
    var distanceLong = data.maxLong - data.minLong;
    var bufferLong = distanceLong * 0.05;

    const cities = [
        { position: [22.583261, 88.412796], text: "A" },
        { position: [22.58289, 88.41366], text: "B" }
    ];
    return (
        <>
       
            {false ? <div id='loading-spinner' className='d-flex h-100 align-items-center justify-content-center'/> :
            <MapContainer
                style={{ height: "100%", width: "100%" }}
                center={findMidpoint()}
                zoom={zoom ? zoom : calculateZoomLevel()}
                bounds={[
                    [data.minLat - bufferLat, data.minLong - bufferLong],
                    [data.maxLat + bufferLat, data.maxLong + bufferLong]
                ]}
                scrollWheelZoom={true}
            >
                {/*<MarkerClusterGroup>*/}
                <TileLayer url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
                <FullscreenControl />
                {coordinates?.map((mark, i) => (

                    <>
                        <Marker
                            key={i}
                            position={mark?.position}
                            icon={customMarker}
                            //nohide={true}
                        >
                            <Tooltip direction={"auto"} permanent={permanentTooltip} className={'leaflet-tooltip-own'} > {/*opacity={0.0}>*/}
                                {mark?.text}
                                {/*<span class={'leaflet-tooltip-own'} style={{ fontSize: 14, fontWeight: "bold" }}>*/}
                                {/*        {mark?.text}*/}
                                {/*    </span>*/}
                            </Tooltip>
                        </Marker>
                    </>
                ))}
                {tripMode && <Polyline key={'polyline'} positions={coordinatesOnly()} />}
                {/*</MarkerClusterGroup>*/}
            </MapContainer >
            }
        </>
    );
};

export default Cluster;

I then call this cluster where I want the map. Any tips would be appreciated!

I tried to find a place to call this method, but it doesn't work because I have a MapContainer, not a Map. I couldn't find any similar methods.

Leaflet MapContainer not displaying correctly

0 Answers0