8

Here, my javascript code to render markers in map and after that fitBounds of that map.

Map bounds are get fit according to geojson, but problem is that when there is any marker on map and I try to fit bound, map tiles images are not get render.

In map it display only markers, no tile images.

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

2 Answers 2

14

If anyone is still struggling with this, it appears to be a bug in Leaflet: https://github.com/Leaflet/Leaflet/issues/2021

It has been fixed in the latest version, but if you can't update you can work around the race condition by setting a timeout:

setTimeout(function () {
    map.fitBounds(latLongCollection);
}, 0);
2
  • later, I try same as u say.
    – 111
    Commented May 15, 2014 at 10:24
  • 1
    Upgrading leaflet to v=0.7.5 (Latest version) is not solving this issue. Commented Oct 23, 2015 at 7:29
0

How did you try debug the problem? What's your network and js console saying?

Try to zoom out, maybe fitBounds zooms your map too much. I had this problem. The solution was using maxSize option in fitBounds, see leaflet docs.

1
  • No,map zoom level is not maximum and no console error is coming. When I see network, mapbox js aborted all request to load tile images. so no tile images get display.
    – 111
    Commented Apr 25, 2014 at 5:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.