Mapbox fitBounds, bounds map function but does not display fragments

Question

Here is my javascript code for rendering markers on the map and after that fitBounds of that map.

The graphs of the maps are suitable for matching the geoison, but the problem is that when there is any marker on the map, and I try to match the attached ones, the images on the tile map do not get rendered.

Only markers are displayed on the map, no image fragments.

var latLongCollection = []; var map; $(document).ready(function() { map(); }); function map() { map = L.mapbox.map('DivId', 'ProjectId'); GetData(); } function GetData() { $.ajax({ type: "GET", url: someUrl, dataType: "json", contentType: "application/json; charset=utf-8", success: AjaxSuccess, error: function () { } }); } function AjaxSuccess(data) { if (data == null || data.length == 0) { return; } var geoJson = { "type": "FeatureCollection", "features": [] }; $.each(data, function (index, value) { var latitude = parseFloat(value.Latitude), longitude = parseFloat(value.Longitude); if (latitude && longitude) { var dataJson = { type: "Feature", geometry: { type: "Point", coordinates: [longitude, latitude] }, properties: { someProp: value.SomeProperty, } }; geoJson.features.push(vehicleJson); } }); var markerLayer = L.mapbox.featureLayer(geoJson).addTo(map); markerLayer.eachLayer(function (marker) { var feature = marker.feature; var featureProperty = feature.properties; if (featureProperty.someProp) { marker.setIcon(L.divIcon({ html: 'htmlstring', iconSize: [35, 75] })); } else { marker.setIcon(L.divIcon({ html: 'anotherhtmlstring', iconSize: [35, 75] })); } latLongCollection.push(marker._latlng); }); markerLayer.on('click', function (e) { map.panTo(e.layer.getLatLng()); }); if (latLongCollection.length > 0) { map.fitBounds(latLongCollection); } } 

Answer 1

If someone is still struggling with this, it seems to be an error in the sheet: https://github.com/Leaflet/Leaflet/issues/2021

It is fixed in the latest version, but if you cannot update, you can work in race mode by setting a timeout:

 setTimeout(function () { map.fitBounds(latLongCollection); }, 0); 

Answer 2

How did you try to debug the problem? What does your network and js console say?

Try zooming out, maybe fitBounds scales your map too much. I had this problem. The solution used the maxSize parameter in fitBounds, see Documents in the sheet.