Leaflet: Leaflet throwing "Uncaught TypeError: Cannot read property 'lat' of undefined" on valid LatLngBounds - fitbounds method, browserify

I can’t work this out, I am providing map.fitBounds with what appears to be a perfectly valid LatLngBounds object.

console.log(bounds) gives me

L.LatLngBounds {_southWest: L.LatLng, _northEast: L.LatLng, extend: function, pad: function, getCenter: function…}

bounds.isValid() is true.

Yet when I try to use that same object with fitbounds I’m getting this elusive

Cannot read property ‘lat’ of undefined"

It might be worth mentioning i’m using browserify?

If I provide fitbounds with an array instead (as shown below), it works fine!

        console.log(center);
                console.log(bounds);
                console.log(data);

                _.forEach(data.hits, function(hit, i) {
                    var coords = hit._source.location.coords,
                        latLon = [coords.lat, coords.lon];

                    bounds.extend(latLon);
                });

                console.log('final bounds');
                console.log(bounds);

                mapObj.fitBounds([
                    [-38.1249603,145.17332020000003],
                    [-38.1770225,145.10952610000004]
                ]);

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 21 (6 by maintainers)

Most upvoted comments

Is this a concurrency issue where you are calling .getBounds() too early, and shows up on different machines based on the size of the dataset and the speed of the machine?

@damiendevienne does waiting for the “ready” event work for you?:

za.on('ready', function(e) {
        map.fitBounds(za.getBounds());
});

ukaccount123 on Feb 2, 2016

@galileopy if you look at the issue title, it says this is about LatLngBound, fitBounds and browserify. It’s not about Polylines or MultiPolylines.

The issue you’re having has to do with a marker that has not LatLng set.

Stepping through the code of Leaflet.pm, it looks pretty clear that it can’t handle MultiPolylines, since it assumes a polyline is a single array of LatLngs, not mutiple arrays.

perliedman on Nov 14, 2017

Hi @shirintag, It is not a Leaflet issue, your code fails because drag callback has its own context and there is no map property in it. I would suggest you to read this article for more info.

Please note that this issue tracker is used for bugs. For support or questions please use Stack Overflow or gis.stackexchange.com.

cherniavskii on Oct 16, 2017

I have the similar issue. I created a list of markers and created a FeatureGroup of them.

        var markersLayer = new leaflet.FeatureGroup(markers);

After it I created MarkerClusterGroup and added to it markers layer:

        var markerCluster = new leaflet.MarkerClusterGroup({
            maxClusterRadius: 60,
            showCoverageOnHover: false,
            spiderfyOnMaxZoom: true
        });
        markerCluster.addLayer(markersLayer);

After I’ve created map:

        var map = new leaflet.Map('map', {
            layers: [tileLayer, markerCluster],
            crs: leaflet.CRS.EPSG3395,
            scrollWheelZoom: false
        });

When I try to call map.fitBounds I have Uncaught TypeError: Cannot read property 'lat' of null and nothing will be rendered.

In my case the problem was in one of the markers has coordinates [null, null]. After I had removed ClusterGroup markers were rendered but I have the same error in console.

Maybe this case will be helpful.

vladimir-polyakov on Oct 29, 2015