Custom zIndex

by FranceImage

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="map"></div>

CSS

#map {
    height: 300px;
    width: 400px;
}

JavaScript

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// add a marker in the given location, attach some popup content to it and open the popup
var latLng1 = new L.latLng([51.5, -0.09]);
var marker1 = L.marker(latLng1).addTo(map)
.bindPopup('Marker 1');

var latLng2 = new L.latLng([51.501, -0.091]);
var marker2 = L.marker(latLng2).addTo(map)
.bindPopup('Marker 2');

var latLng3 = new L.latLng([51.502, -0.092]);
var marker3 = L.marker(latLng3).addTo(map)
.bindPopup('Marker 3');

map.on('zoomend', adjustZindex);

adjustZindex();

// adjust zIndex
function adjustZindex() {
    var pos1 = map.latLngToLayerPoint(latLng1).round();
    var pos2 = map.latLngToLayerPoint(latLng2).round();
    var pos3 = map.latLngToLayerPoint(latLng3).round();
    
    marker1.setZIndexOffset(100 - pos1.y);
    marker2.setZIndexOffset(101 - pos2.y);
    marker3.setZIndexOffset(102 - pos3.y);
}