Leaflet- Finding the Zoom Level Of Bounds Without Using a Map Instance

Question

What I'm trying To DO:

I'm in a bit of a pinch where I need to be able to find the leaflet zoom levels of multiple shapes without creating a map instance and moving all around it with map.fitBounds().

---

The 2 possible solutions that I'm stuck on:

1) I tried making mock/temp map to gain access to the map.fitBounds() functionality and simulate map.fitBounds()

-But is not working because the map needs a div container to be instantiated.

2) I've looked for ways to programmatically calculate the leaflet zoom.

-I haven't found any resources out there on how to do that.

If you have any strategies to help me convert this raw data to their leaflet counterparts that would be AWESOME!!

Answer 1

You can create a L.Map instance with an element that's not appended to the DOM:

new L.Map(document.createElement('div'), {
    'center': [0, 0],
    'zoom': 0
});

Problem is that in order to calculate the bounds the responsible method will need to know the size of the map. To get the size it will call the getSize method of L.Map but that will always return a size of {x:0, y:0} since the map's element is not appended to the DOM. You could override the getSize method to return a size:

L.Map.include({
    getSize: function () {
        return new L.Point(400, 300);
    }
});

var map = new L.Map(document.createElement('div'), {
    'center': [0, 0],
    'zoom': 0
});

console.log(map.getSize()); // o.Point {x: 400, y: 300} 

Now you can call the getBoundsZoom of L.Map using your L.LatLngBounds:

L.Map.include({
    getSize: function () {
        return new L.Point(400, 300);
    }
});

var map = new L.Map(document.createElement('div'), {
    'center': [0, 0],
    'zoom': 0
});

var featureGroup = new L.FeatureGroup([
    new L.Marker([0,-45]),
    new L.Marker([0,45])
]);

var zoom = map.getBoundsZoom(featureGroup.getBounds());

Needless to say, when later on using the derived zoomlevel on a real map, it will only be correct if the map is the size you predefined in the getSize method. Also don't forget to restore the getSize method if you plan on using L.Map without reloading.

Answer 2

I was trying to set the zoom to show a circle with variable radius well fit in the container DIV, here the code I used:

    // r is the radius in meters (for example 2km => 2000)
    circle.setRadius(r);

    // <div> size containing leaflet map
    var width = 300;
    var height = 220;

    // you have to use the MIN of them if you want the circle fit in    
    metresPerPixel = r * 2 / height;

    // here the zoom level you have to use
    z = (Math.log((40075016.686 * Math.cos(map.getCenter().lat * Math.PI/180))/metresPerPixel))/Math.log(2)-8;

    mymap.setZoom(z.toFixed(2),{animate:false});

Be sure you set zoomSnap when creates map to the needed value (I set it to the minimun 0.1 for better results)

The formula is the result of clear z from http://wiki.openstreetmap.org/wiki/Zoom_levels