On this map, there are four layers, the baselayer, segments, intersections and fatalities. I'd like them to appear in that order, bottom to top. By default for some reason the intersections layer (red circles on the screenshot) always appear above the fatalities, (black skulls).

URL for the map: https://leafletmap.neocities.org/

Why is one icon layer placed above another, in any case? Is there some default mechanism at play? The intersections were added later than the fatalities -

My latest attempt has been to create panes as in https://jsfiddle.net/abrurqwn/5/ however when I do this, all layers but the skulls/ fatalities vanish. I've attempted every re ordering of the panes, z values, etc. I can think of-

js code enclosed:

enter image description here

var map = L.map('map',{
    center:[45.5230 , -122.6676],
    zoom: 13,
    minZoom: 13


L.tileLayer ('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=b60c02dc2f1c476983e78e9b863fc6d1',{
    attribution: 'Map data © <a href="https://thunderforest.com">Thunderforest</a>'}).addTo(map);


var skull = L.icon({
    iconUrl: 'images/blackSkull.svg',
    iconSize: [38, 95],
    popupAnchor: [-10, -30],


function fatalitiesLayer (feature, 
layer) {
    layer.bindPopup("<h1>Cyclist Fatality</h1><p> "+feature.properties.name+
    "</p>Date: "+feature.properties.date+ 
    "</p>Location: "+feature.properties.location+ 
    "</p>Cause: "+feature.properties.cause+ 

    onEachFeature: fatalitiesLayer


var intersectionsLOGO = L.icon({
    iconUrl: 'images/intersectionLOGO.svg',
    iconSize: [38, 95],
    popupAnchor: [-10, -30],
    opacity: .5,


function IntersectionsLayer(feature, 
layer) {
    layer.bindPopup("dangerous intersection: <p>"+feature.properties.name+"</p>");

    onEachFeature: IntersectionsLayer

function SegmentsLayer(feature, 
layer) {
    layer.bindPopup("dangerous road segment, proceed with caution");

function styleLines(feature) {
    return {
                color: "red",
                weight: 9,
                opacity: .5,
                dashArray: '10,7',
                lineJoin: 'round',  //miter | round | bevel 

    onEachFeature: SegmentsLayer,
    style: styleLines

1 Answer 1


You may need to refactor your code slightly, in order to create the layers as variables rather than functions.

Once you've done that, you'll be able to call fatalitiesLayer.bringToFront() in order to change the layer order.

See this JS Fiddle for a simple example, which brings the sample GeoJSON line layer to the top of the map so that it overlaps with the marker.

enter image description here enter image description here

  • hi, thanks but the layers aren't showing up on the js fiddle. could you send again please? Jun 19, 2017 at 19:05
  • The main change compared to your code is to reference the layer as a variable (var bus = L.geoJSON(...)) so you can later call bus.bringToFront() Jun 19, 2017 at 23:03
  • cool but your jsfiddle example ain't workin, unless there's something I'm supposed to do to make it work. Jun 26, 2017 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.