leaflet.js: Uncaught Error: Invalid LatLng object: (NaN, NaN)

Question

I have a json file which takes two coordinates

"_id" : ObjectId("59407457838b932e0677999e"),
"type" : "MultiPoint",
"name" : "points",
"coordinates" : [
        [
                -73.958,
                40.8003
        ],
        [
                -73.9814,
                40.7681
        ]
]

I'm using Leaflet library to mark the coordinates in Google maps using node js and mongo db.

My map.pug file is

extends layout.pug

block content
    #map
    script(type='text/javascript').
        var map = L.map('map').setView([#{lat},#{lng}], 14);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        $.getJSON('/maplayers',function(result){
            $.each(result, function(i, mlayer){
                $.getJSON('/mapjson/' + mlayer.name, function(data) { addLayer(data, mlayer.name ) });
            });
        });

        function addLayer(layer, name) {
            var leaf_layer;
            if (layer.type == "MultiPoint") {
                leaf_layer = L.geoJson(layer, { pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, layer.style); }})
                leaf_layer.bindPopup(layer.type);
            } 
            leaf_layer.addTo(map);

            $('#' + name).click(function(e) {

                if (map.hasLayer(leaf_layer)) {
                    map.removeLayer(leaf_layer);
                } else {
                    map.addLayer(leaf_layer);
                }
            });
        }

The values are getting displayed on the maps along with markers in the browser( http://localhost:3000/map ).

But, if I change my Json file like below with just one coordinate, it is not getting displayed.

"_id" : ObjectId("594061ea838b932e0677999d"),
        "type" : "MultiPoint",
        "name" : "points",
        "coordinates" : [
                -73.958,
                40.8003
        ]

The error in the browser console is

leaflet.js:6 Uncaught Error: Invalid LatLng object: (NaN, NaN)

Can anyone please explain me how to solve this issue and display in map with one coordinate?

Answer 1

A GeoJSON MultiPoint geometry type expects coordinates as an array of nested positions . Each "position" being an array of 2 values, namely [longitude, latitude] . (Altitude may be third)

If you provide just a single position, not nested in a parent array, your geometry is no longer GeoJSON compliant.

Instead, you should also change the geometry type to Point , which does expect coordinates as a single lng-lat position.