2

In Leaflet v1.03 I have n layers of SVG icons which should be rendered on custom panes. I try to use the panes to control the zindex of items.

Within the L.geoJson options I set the pane as well as the SVG renderer with a pane option itself. Neither works. The SVG render order seems to be random.

Is the renderer option actually supported in Leaflet v1.03? The option itself is not listed in the current documentation.

Would I need to create a layer group in order to control the panes of SVG icons created with the pointToLayer method?

map.createPane('400');
map.getPane('400').style.zIndex = 400;
map.getPane('400').style.pointerEvents = 'none';

new L.geoJson(dots400, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon: L.icon({
                iconUrl: 'blue_dot.svg',
                iconSize: [10, 10]
            }),
            interactive: false
        });
    },
    renderer: L.svg({pane: '400'}),
    pane: {pane: '400'},
    onEachFeature: null
}).addTo(map);

map.createPane('500');
map.getPane('500').style.zIndex = 500;
map.getPane('500').style.pointerEvents = 'none';

new L.geoJson(dots500, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon: L.icon({
                iconUrl: 'red_dot.svg',
                iconSize: [10, 10]
            }),
            interactive: false
        });
    },
    renderer: L.svg({pane: '500'}),
    pane: {pane: '500'},
    onEachFeature: null
}).addTo(map);

Here is a jsfiddle. https://jsfiddle.net/goldrydigital/abrurqwn/

I want the red dot to be drawn on top.

3

You just need to specify the pane as an option of your markers (i.e. any individual layer).

L.geoJSON(dots400, {
  pointToLayer: function(feature, latlng) {
    return L.marker(latlng, {
      pane: '400', // pane option is for individual layers.
      icon: L.icon({
        iconUrl: 'blue_dot.svg',
        iconSize: [10, 10]
      }),
      interactive: false
    });
  },
  //renderer: L.svg({pane: '400'}),
  //pane: {pane: '400'},
  onEachFeature: null
}).addTo(map);

Updated JSFiddle: https://jsfiddle.net/abrurqwn/5/

pane option on groups (like your GeoJSON layer group) do not have any effect as of today, see Leaflet issue #4279

Furthermore, you just need to pass the pane name, as you have done for your label layers in your JSFiddle.

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.