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

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? – Edward Curran Jun 19 '17 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() – Stephen Lead Jun 19 '17 at 23:03
  • cool but your jsfiddle example ain't workin, unless there's something I'm supposed to do to make it work. – Edward Curran Jun 26 '17 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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