CODEWITHSUNDEEP
leaflet
Aladdin Teng
Aladdin Teng

Reputation: 330

Why does fitBounds not behave consistently on different resolutions/dimensions?

I have two GeoJSON files:

  1. One for the 51 US states. https://dl.dropboxusercontent.com/u/14145516/json/51.json
  2. One for the counties in the state of NJ. https://dl.dropboxusercontent.com/u/14145516/json/NJ.json

When I try to fitBounds on NJ, it works perfectly, the whole state is centered on the map pane, no matter what dimensions I put on the map div.

However, when I try the 51 states file, fitBounds only works when the div dimensions are around 800x600, somewhere beyond that (1366x768, 1680x1050) it just shows a grey map.

Is there a workaround for this? I need to get it to work on fullscreen (height 100% width 100%) in any resolution.

Thank you very much.

CODE:

The code was taken from the tutorial as follows, loading geojsonFeature variable from an ajax call to a jsp (need to do some more processing later) that outputs the json file in application/json type:

d3.json("${pageContext.request.contextPath}/json",function(data){
    var geojsonFeature = data;
    var map = L.map('map',{
                center: new L.LatLng(0,0),
                zoom: 5
            });

    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
            }).addTo(map);

    var myLayer = L.geoJson().addTo(map);
    myLayer.addData(geojsonFeature);
    var bounds = myLayer.getBounds();
    map.fitBounds(bounds);
}

Upvotes: 0

Views: 419

Answers (1)

Josh
Josh

Reputation: 3442

I was able to get it to work with Leaflet version 0.5.1 (the previous stable version). Try using that version instead of 0.6.4.

Upvotes: 1

Related Questions