[GIS] How to change the order of layers in a Leaflet map

Question

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:

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

//BASEMAP

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);



//FATALITIES


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>"+feature.properties.description+
    "</p>Date: "+feature.properties.date+ 
    "</p>Location: "+feature.properties.location+ 
    "</p>Cause: "+feature.properties.cause+ 
    "</p>");
    layer.setIcon(skull); 
    }


L.geoJson(fatalities,{
    onEachFeature: fatalitiesLayer
    }).addTo(map);

//INTERSECTIONS

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>");
    layer.setIcon(intersectionsLOGO);
    layer.bringToBack;
}

L.geoJson(Intersections,{
    onEachFeature: IntersectionsLayer
}).addTo(map);

//SEGMENTS
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 
            };           
}

L.geoJSON(segments,{
    onEachFeature: SegmentsLayer,
    style: styleLines
}).addTo(map);

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.