CODEWITHSUNDEEP
javascriptajaxleaflet
New at Leaflet
New at Leaflet

Reputation: 325

How to fit the map out of the layer bounds?

I have a leaflet map, i added a point layer to it that returns from ajax call, i want to fit the map a little bit away from its bounds so that i can see the country it lies in it,how can this be done?

$.ajax({
        type:"POST",
        url:"CustomerID_geojson.php",
        data:"OrdersID="+ Cust ,
        dataType: 'json',
        success: function (response) 
        {
            geojsonLayer = L.geoJson(
            response,
            {
                pointToLayer: function(feature, latlng) 
                    {
                        var redMarker = L.AwesomeMarkers.icon({
                            icon: 'user', 
                            markerColor: 'purple',
                            prefix: 'fa', 
                            iconColor: 'white'
                          });
                       return L.marker(latlng, {icon:redMarker});
                    },
                onEachFeature: function (feature, layer) 
                    {
                         layer.bindTooltip('<label class="CustToolTip">Customer: ' + feature.properties.nick_name_) + '</label>';
                    }
            }).addTo(mymap);
            mymap.fitBounds(geojsonLayer.getBounds());
        }
     })

enter image description here

Upvotes: 1

Views: 150

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19049

Cannot be done. A point is infinitesimally small and has zero area, so the bounding box of one point feature has zero area. Zooming to the maximum zoom level is the expected behaviour in this case.

You might want to use an alternative approach. e.g. create a L.Circle with the center in the marker, giving it a radius in meters, add it to the map so you can get its bounds, remove it from the map, then zoom to those bounds.

Upvotes: 1

Related Questions