Leaflet#5190

preferCanvas problem with panes #5190

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css">
<div id="comment">Use the debugger HTML inspector : the blue rect is in canvas but the red one is in SVG path despite the map's preferCanvas option. The difference is that the red one use a pane.</div>
<div id="map"></div>

CSS

html,
body {
  height: 100%;
}

#comment {
  height: 10%;
}
#map {
  height: 90%;
}

JavaScript

function style( geoJsonObject ) {
  return {color: geoJsonObject.properties.color, opacity: 1, fillOpacity: 0.5, weight:5};
};

var rect1 = { "type": "Feature", "properties": {"color":"#66ccff"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -103.27148, 39.66491 ], [ -103.27148, 41.88592 ], [ -99.7229, 41.88592 ], [ -99.7229, 39.66491 ], [ -103.27148, 39.66491 ] ] ] } };
var rect2 = { "type": "Feature", "properties": {color:'#ff6666'}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -102.2168, 38.82259 ], [ -102.2168, 41.07935 ], [ -98.48145, 41.07935 ], [ -98.48145, 38.82259 ], [ -102.2168, 38.82259 ] ] ] } };

var map = L.map('map', {
  preferCanvas: true,
  zoom: 5,
  center: [41,-101]
});

L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 18
  }).addTo(map);

var layer1 = L.geoJSON(rect1, {style: style});
layer1.addTo(map);

// panes & layers creation
var pane;
pane = map.createPane('overlay-2');
pane.style.zIndex = 400;
var layer2 = L.geoJSON(rect2, {style: style, pane:pane});
layer2.addTo(map);