Leaflet: bring the marker to front when click

Question

is there a method that bring the marker to front? the zoomMarker is the details of markers and when details is clicked, (the max zoom is 11 so the markers is nearer to each other and the label cant read) it will panTo, but since the max zoom is 11, it cant see where there is so much marker. (this is a leaflet windy map, thats why the max zoom is only 11)

$("#mapContainer").on("click",".zoomMarker",function(){
    var zoom;
    var zoomValueIn;
    var no = $(this).attr("mapNo");
    var deviceID = $(this).attr("deviceID");

    var events = findMapNo(no).eventData[deviceID].events;
    findMapNo(no).map.setZoom(19);

    if( events.length>0 ){
        var eventsIndex = findMapNo(no).eventData[deviceID].events.length-1;
        var temp_content = createPopupContent(deviceID, eventsIndex, no);
        var lat = events[events.length-1][4];
        var lng = events[events.length-1][3];
        var latLng = new L.latLng(lat, lng);

        findMapNo(no).map.setZoom(19);
        var Oldzoom = findMapNo(no).map.getZoom();

        popup = L.popup({
            permanent: true,
            autoPan: false,
            minWidth: 200,
            closeOnClick: true,
            minHeight: 200,
            offset: [0, -12]})
            .setLatLng(latLng)
            .setContent(temp_content);

        if(Oldzoom == Oldzoom){
            findMapNo(no).map.removeLayer(markersCluster);
            findMapNo(no).map.addLayer(markersLayer); 
            findMapNo(no).map.panTo(latLng); 
            //should bring to front the marker
            if(findMapNo(no).map.hasLayer(markersLayer)){
                findMapNo(no).map.openPopup(popup);
            }
        }

        findMapNo(no).map.on("zoomend", function (e) {
            zoom = this.getZoom();
            var diff = Oldzoom - zoom; 
            if(diff > 0 || diff < 0){ 
                if(diff > 0){
                    findMapNo(no).map.closePopup(popup);
                }else{  
                    if(zoom == zoom){
                        if(diff < 0){ 
                            diff = diff - 1;
                        }else if(diff > 0){
                            diff = diff + 1;
                        }else if(diff == 0){ 
                            //should bring to front the marker
                            findMapNo(no).map.panTo(latLng); 
                            findMapNo(no).map.openPopup(popup);
                        } 
                    }
                    Oldzoom = zoom;
                    //should bring to front the marker
                    findMapNo(no).map.removeLayer(markersCluster);
                }
                findMapNo(no).map.removeLayer(markersLayer);
                findMapNo(no).map.addLayer(markersCluster);
            } 

            Oldzoom = zoom;            
        });
    }else{
        toaster("Marker No Location","warning");
    }
});

Falke Design Falke Design · Accepted Answer · 2019-11-22T08:25:38

You can use the option riseOnHover by mouseover the marker comes to front.

var marker = L.marker([lat,lng], {riseOnHover: true});      
marker.addTo(map);

I had the same question. I read that the Markers has no bringToFront() option, because they are directed by north to south. A Marker more in the north are on the top

Leaflet: bring the marker to front when click

1 Answers