How to locate leaflet zoom control in a desired position

I want to place the zoom control in middle right of the the map i.e. in the middle of the right most side of the map. I have found solution to put the zoom control in different corners using the following code

var map = new L.map("map-container",{ zoomControl: false });

   new L.Control.Zoom({ position: 'topleft' }).addTo(map);

So the positions can be

topleft
topright
bottomleft
bottomright

But my goal is to put the control window in the middle right. Or even I put the control in the corner I want to add some margin to the top. How can I do that? Is there any idea?

Solution 1:

We can create additional Control placeholder(s), besides the 4 provided corners by default.

A nice advantage is that it allows putting several Controls in one of those placeholders. They will stack without overlapping, as in the standard corners.

JavaScript:

// Create additional Control placeholders
function addControlPlaceholders(map) {
    var corners = map._controlCorners,
        l = 'leaflet-',
        container = map._controlContainer;

    function createCorner(vSide, hSide) {
        var className = l + vSide + ' ' + l + hSide;

        corners[vSide + hSide] = L.DomUtil.create('div', className, container);
    }

    createCorner('verticalcenter', 'left');
    createCorner('verticalcenter', 'right');
}
addControlPlaceholders(map);

// Change the position of the Zoom Control to a newly created placeholder.
map.zoomControl.setPosition('verticalcenterright');

// You can also put other controls in the same placeholder.
L.control.scale({position: 'verticalcenterright'}).addTo(map);

Then it becomes easy styling those placeholders with CSS, because their DOM parent is the map container itself. Hence top, bottom, left and right can be specified with percentages (which use the parent's dimensions).

CSS:

.leaflet-verticalcenter {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    top: 50%; /* possible because the placeholder's parent is the map */
    transform: translateY(-50%); /* using the CSS3 Transform technique */
    padding-top: 10px;
}

.leaflet-verticalcenter .leaflet-control {
    margin-bottom: 10px;
}

As for vertical centering the placeholder itself, you can use your favourite technique. Here I used the CSS3 Transform to offset the placeholder by half of its own height.

If necessary (e.g. for old browsers compatibility), you can rather use a "calculate-on-load" method to perform this offset, similar to iH8's answer. But you no longer need to run it on map resize, only when adding new Control(s) to the placeholder.

Live demo: https://plnkr.co/edit/bHJwfm598d1Ps7MpLG0k?p=preview

Note: there is currently an open PR (Leaflet/Leaflet #5554) for this, but since it is not compatible with old versions of Internet Explorer, it will not likely be merged in Leaflet core.

Solution 2:

Simplest and Accurate

var map = L.map('map', {
    maxZoom: 20,
    minZoom: 6,
    zoomControl: false
});

L.control.zoom({
    position: 'bottomright'
}).addTo(map);

Solution 3:

This can be done a tad easier, with one line of CSS. Works with responsive design (Bootstrap) and moves additional buttons added with Leaflet.EasyButton too.

.leaflet-control-container { position: absolute; right: 56px } 

Solution 4:

Grab the map's container height, divide by two. Subtract the zoom's container height, divided by two. Use absolute positioning and assign the top position:

var mapHalfHeight = map.getSize().y / 2,
    container = map.zoomControl.getContainer(),
    containerHalfHeight = parseInt(container.offsetHeight / 2),
    containerTop = mapHalfHeight - containerHalfHeight + 'px';

container.style.position = 'absolute';
container.style.top = containerTop;

Example on Plunker: http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

Note that when you're not using a fixed size map container that you'll need to do this every time the map's container get resized. Throw it in a method and hook it up to the map's resize event as in the supplied example.