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

[melbourne2991]

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]
                ]);

[melbourne2991]

Ok think i've found the issue.

In leaflet's src code line 94, Map.js:

bounds = bounds.getBounds ? bounds.getBounds() : L.latLngBounds(bounds);

If a L.latLngBounds object is passeed in (which doesn't have a getBounds method) then it assumes its an array and tried to instantiate a new L.latLngBounds object, which appears to return null.

[melbourne2991]

Adding getBounds method to L.latLngBounds and have it return itself should fix it

[mourner]

Hmm that's weird, L.latLngBounds factory should pass through instances of LatLngBounds. Should be a bug. Will look into it.

[nezoomie]

any workaround for this?

[melbourne2991]

@nezoomie note my previous comment above:
"If I provide fitbounds with an array instead (as shown below), it works fine!"

[nezoomie]

alright, so I have to build the bounds myself. Thanks!

[yohanboniface]

I'm not reproducing it. @melbourne2991 can you provide a JSFiddle that demonstrates the issue?

Or you can edit this one http://playground-leaflet.rhcloud.com/piv/edit?html,output

[IvanSanchez]

This bug has been too quiet and has no reproducible use case. Feel free to reopen if it still applies, but please have a test case ready if so.

[vladimir-polyakov]

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.

[damiendevienne]

Hello !
Same issue for me. It should be reproducible with what follows.
I read an external geoJSON file with code

var za = new L.GeoJSON.AJAX('geojson/ZA-Sisteron.geojson').addTo(map);

The geojson file is the following:

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 5.913268219634189, 44.225155127177779 ], [
 5.91316185590714, 44.225122523839595 ], [ 5.912991021466401, 44.225153627671936 ], [ 5.912802396205894, 44.225318052401896 ], [ 5.9109389097628
91, 44.228848134468947 ], [ 5.908540217627614, 44.232755488400514 ], [ 5.905245814654649, 44.232041340002823 ], [ 5.905013934002251, 44.23224860
81938 ], [ 5.905230763040486, 44.232595142202072 ], [ 5.905649681655095, 44.233516155961226 ], [ 5.905812600035207, 44.233974646334786 ], [ 5.90
6001022163778, 44.234504157561851 ], [ 5.906167191848225, 44.235245046996056 ], [ 5.906312827812342, 44.236405814865179 ], [ 5.905462423162986, 
44.237721418240056 ], [ 5.909264760229434, 44.238718945444042 ], [ 5.911625190639359, 44.239103630949764 ], [ 5.91159786200418, 44.239051215770857 ], [ 5.911553692264381, 44.238910680635598 ], [ 5.911485371168323, 44.238779642646435 ], [ 5.911445084151721, 44.238594721248127 ], [ 5.911507781295112, 44.238376070459452 ], [ 5.911606024133857, 44.238129906974663 ], [ 5.91181314921776, 44.237964993785482 ], [ 5.912118919958475, 44.237801891887379 ], [ 5.912441985040618, 44.237735753525797 ], [ 5.912778713887545, 44.237695821642838 ], [ 5.913189256961895, 44.237653930021089 ], [ 5.913456731939603, 44.237584835409763 ], [ 5.913576123111382, 44.237510813625377 ], [ 5.913736301530235, 44.23739142588061 ], [ 5.913979169858561, 44.237322983036485 ], [ 5.914140709587259, 44.237230128527329 ], [ 5.914284495443738, 44.237031465130123 ], [ 5.914609216041114, 44.236518014897037 ], [ 5.914793102879932, 44.236260717861562 ], [ 5.915023260277901, 44.235825058697564 ], [ 5.916320607081436, 44.232544637384471 ], [ 5.916922848507777, 44.23108057410743 ], [ 5.917755418670039, 44.22894613757169 ], [ 5.917834485275431, 44.22868719330738 ], [ 5.918002177194096, 44.2282354753223 ], [ 5.918037746654753, 44.227849266050185 ], [ 5.918004971385873, 44.227571153358539 ], [ 5.917929145816599, 44.227294185150612 ], [ 5.917771096649532, 44.22697511952726 ], [ 5.917593223342756, 44.226749575322714 ], [ 5.917358182805327, 44.226490123841238 ], [ 5.916987844934648, 44.226234267642432 ], [ 5.916633673787042, 44.226053262011085 ], [ 5.916269477368685, 44.225916804776169 ], [ 5.915882500613884, 44.225816378038537 ], [ 5.915198738731465, 44.225692834707424 ], [ 5.914775093032551, 44.225597806381707 ], [ 5.914366265101604, 44.225431530144569 ], [ 5.914088857677057, 44.225306046415042 ], [ 5.913976570368767, 44.225278029415819 ], [ 5.913848558061693, 44.225303569405412 ], [ 5.913739222339621, 44.22533304175159 ], [ 5.913628524340113, 44.225335980329987 ], [ 5.9134665840779, 44.225300424254748 ], [ 5.913376626546421, 44.225227530904391 ], [ 5.913268219634189, 44.225155127177779 ] ] ] } }

The polygon shows well, but when trying to set the map view to the bounds of the za polygon, with:

map.fitBounds(za.getBounds());

I get:

Uncaught TypeError: Cannot read property 'lat' of undefined 

Any thoughts?
Thanks

[yohanboniface]

@damiendevienne that geojson seems invalid, according to http://geojsonlint.com/
Not sure that's your issue, but that prevents us to test it ;)
Can you make sure the original version is valid? And if yes create a minimal test case with http://playground-leaflet.rhcloud.com/ that reproduce your issue?

[IvanSanchez]

@damiendevienne @yohanboniface After linting the geoJSON, it works just fine:

http://playground-leaflet.rhcloud.com/cex/1/edit?html,output

[ukaccount123]

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());
});

[johnathan-sewell]

I was getting this because I was accidentally calling setGeoJSON() with an empty array, then again with my actual data (due to a React component rendering twice).

[ventralnet]

ukaccount123 is right. this is a concurrency thing as my issue was fixed putting my fitBounds call in a long timeout. listening on the ready event did not work.

[mirko77]

Same here, I fixed it wrapping the call in a timeout

window.setTimeout(() => {
            this.map.fitBounds(this.bounds, { padding: [50, 50] });
}, 500);

[cherniavskii]

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.

[shirintag]

Thanks!

[galileopy]

The error appears when you add a polyline that has an array of arrays of [lat,lng], which leds me to believe it has something to do with the lack of support to MultiPolylines in leaflet.pm, which I use and is the only way I was able to reproduce this exception.

I did report the error to them, however it seems unlikely that's the case, because the error happens on leaflet side.
Fiddle

[galileopy]

this might be related, https://github.com/codeofsumit/leaflet.pm/issues/249

[perliedman]

@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.