Leaflet z index (markers)
HTML
<script src="https://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<body>
<div id="map" ></div>
</body>
CSS
html, body, #map {
margin: 0;
width: 100%;
height: 100%;
}
JavaScript
var pos1 = new L.LatLng(45.5,-73.5);
var pos2 = new L.LatLng(45.5002,-73.5002);
var map = new L.Map('map', {
center: pos1,
zoom: 16,
// markerZoomAnimation:false
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
var icon1 = L.marker(pos1);
var icon2 = L.marker(pos2);
//v1 does not work:
//icon1.setZIndexOffset(1000);
//icon2.setZIndexOffset(1);
icon1.addTo(map);
icon2.addTo(map);
icon1.setZIndex(1000);
icon2.setZIndex(1);
//v2 does not work:
//var iconLayer1 = L.layerGroup([icon1]);
//var iconLayer2 = L.layerGroup([icon2]);
//iconLayer1.setZIndex(2000);
//iconLayer2.setZIndex(1000);
//iconLayer2.addTo(map);
//iconLayer1.addTo(map);
//v3
//var iconLayer1 = L.featureGroup([icon1]);
//var iconLayer2 = L.featureGroup([icon2]);
//iconLayer2.addTo(map);
//iconLayer1.addTo(map);
//debugger;
//iconLayer1.setStyle("zIndex", 100000)
//iconLayer1.setStyle("z-index", 100000)
//iconLayer1.bringToFront();