javascript - How to fit map to tile layer bounds in leaflet - Stack Overflow

admin管理员组

文章数量:1287668

I have a leaflet map. The map container is very big pared to the tile in first zoom level (256px X 256px). I want to get the bounds of tile and fit the map bounds to it. I am able to fitbound() with multiple markers. I adopted the code from here . I tried to achieve fit to tile also with same idea. unfortunately it doesn't seem working. Here is my code

     var fitToBounds = function () {
         //getting bound of tile 256X256 pixel
        var maxLat = map.unproject(new L.Point(0,0)).lat; 
        var maxLat = map.unproject(new L.Point(0,256)).lat;
        var maxLng = map.unproject(new L.Point(256,0)).lng;
        var minLng = map.unproject(new L.Point(256,256)).lng;
        var southWest = new L.LatLng(minLat, minLng);
        var northEast = new L.LatLng(maxLat, maxLng);
        map.fitBounds(new L.LatLngBounds(southWest, northEast));
    };

I have a leaflet map. The map container is very big pared to the tile in first zoom level (256px X 256px). I want to get the bounds of tile and fit the map bounds to it. I am able to fitbound() with multiple markers. I adopted the code from here . I tried to achieve fit to tile also with same idea. unfortunately it doesn't seem working. Here is my code

     var fitToBounds = function () {
         //getting bound of tile 256X256 pixel
        var maxLat = map.unproject(new L.Point(0,0)).lat; 
        var maxLat = map.unproject(new L.Point(0,256)).lat;
        var maxLng = map.unproject(new L.Point(256,0)).lng;
        var minLng = map.unproject(new L.Point(256,256)).lng;
        var southWest = new L.LatLng(minLat, minLng);
        var northEast = new L.LatLng(maxLat, maxLng);
        map.fitBounds(new L.LatLngBounds(southWest, northEast));
    };

• javascript
• leaflet

Share Improve this question Follow asked Oct 21, 2013 at 10:40 Akbar AliAkbar Ali 30511 gold badge66 silver badges1313 bronze badges 1

• 4 You have two var called maxLat... one should be minLat – Edu Commented Oct 21, 2013 at 14:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Group your markers in a L.mapbox.featureGroup() and then on your map use

map.fitBounds(featureGroup.getBounds());

Feature groups are like a layerGroup but also has a .getBounds() method that can be used to set your fit. See the docs.

maybe not the best solution, but at least working: Add an other layer and make it invisible. Zoom to this one. Advantage is, you might also add onEachFeature.

     var pointsWithBounds=[]
     _.each(layerWithoutBounds, function (element) {
                pointsWithBounds.push(
                    {
                        "type": "Feature",
                        "geometry": {
                            "type": "CircleMarker",
                            "coordinates": [element.lon, element.lat]
                     });
      });
      var layerWithBounds = L.geoJSON(pointsWithBounds, {
                style: {
                          fillColor: 'transparent',
                          color: 'transparent'
                       }
            });
      layerWithBounds.addTo(map)
      map.setView(layerWithBounds.getBounds().getCenter());
      map.fitBounds(layerWithBounds.getBounds());

本文标签： javascriptHow to fit map to tile layer bounds in leafletStack Overflow