react-leaflet _ "Invalid LatLng object: (NaN, NaN)" with valid coordinates on Polyline

Viewed 77

Invalid LatLng object: (NaN, NaN) appears with react-leaflet, and comes from leaflet itself, as it seems to come from the core library, even if coordinates are actually valid.

Code:

const plottedPoints: LatLong[] = [
                    [29.69937, -95.32803],
                    [30, 30],
                    [29.69937, -95.32803]
                     ]

const polylineTraveledOptions: PathOptions = {lineCap: 'square', lineJoin: 'miter', color: blue50, weight: 4}

    return(
    <div id="map" style={{height: '400px', width: '555px'}}>
        <MapContainer
            // Won't let the user zoom out too much and see outside the world's layout
            zoomSnap={0.5}
            zoomDelta={0.5}
            // We have a custom positioned zoom control
            zoomControl={false}
            scrollWheelZoom={false}
            // Fixes the map's drag to its bounds
            maxBoundsViscosity={1}
            style={{height: '100%', width: '100%'}}>
            <TileLayer
                attribution='&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
                url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
            />
            <ZoomControl position="bottomright" />
            <Polyline pathOptions={polylineTraveledOptions} positions={plottedPoints} />
        </MapContainer>
    </div>
)

I'm also setting the mapBounds:

    const map = useMap()

    // Zooms in the correct size for the polyline we've set
    const mapBounds = [[29.69937, -95.32803], [29.69937, -95.32803]]
    map.fitBounds(mapBounds, {padding: [30, 30]})
    // Won't let the user zoom to a world's map that's duplicated
    map.setMinZoom(2)
    // Won't let the user drag outside of the world's map
    map.setMaxBounds([
        [-90, -300],
        [90, 300],
    ])

May it because it doesn't support overlapping of vectors on Polylines, as two of the coords are on the same location? Or is it because the mapBounds() function would be on the same point, instead of something that can be calculated as a square? Or else...?

There's also not much out there on how to fix it, a part of this link: https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/issues/29 which is about the snake animation - and I don't think it's related.

Please, enlighten me.

0 Answers
Related