Monday, February 28, 2022

Leaflet custom map panes

I recently needed to have certain Leaflet path elements be drawn last (on top) on the map but below markers and pop-ups.  Since SVG doesn't use z-index but rather rendered based order of elements, I needed a guaranteed solution to make this work.

Leaflet map panes were the solution!  It's a feature available as of Leaflet 1.0.0 which allows for customization of this order.  Creating a custom map pane generates a <div> that can be styled with CSS z-index.

const CUSTOM_CS_PANE = "cherry-shoe-custom";

// create a custom map pane for area boundaries so it can be above leaflet-overlay-pane but below leaflet-marker-pane
this.map.createPane(CUSTOM_CS_PANE); // generate areas const options = { pane: CUSTOM_CS_PANE, className: "cs" }; areasToDisplay.forEach(areaToDisplay => { const area = L.geoJSON(areaToDisplay.geoJSON, options); this.map.addLayer(area); });

SCSS classes:

.leaflet-cherry-shoe-custom-pane {
  z-index: 550;
}
.cs {
    stroke: black;
    stroke-width: 3;
    stroke-opacity: 1;
    fill: none;
}

HTML looks like:

<div class="leaflet-pane leaflet-cherry-shoe-custom-pane" style="z-index: 650;">
  <svg pointer-events="none" class="leaflet-zoom-animated" width="1306" height="923" viewBox="-109 -77 1306 923" style="transform: translate3d(-109px, -77px, 0px);">
    <g>
      <path class="cs leaflet-interactive" stroke="#3388ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#3388ff" fill-opacity="0.2" fill-rule="evenodd" d="M1200 -80L1199 -62L1191 -59L1186 -60L1176 -55L1153 -35L1142 -31L1137 -25L1136 -20L1131 -15L1121 -13L1110 -6L1109 8L1112 17L1111 22L1106 29L1088 31L1078 40L1060 46L1041 45L1034 47L1008 68L994 59L969 51L950 50L931 53L922 56L907 64L897 73L885 87L879 98L877 106L577 107L-112 106L-112 -80z"></path><path class="cs leaflet-interactive" stroke="#3388ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#3388ff" fill-opacity="0.2" fill-rule="evenodd" d="M531 339L537 342L539 346L541 345L541 343L547 343L551 338L557 338L564 341L569 334L535 316L536 271L600 271L601 344L607 351L613 354L658 371L667 373L673 350L689 327L669 313L673 306L680 303L683 300L679 291L679 287L674 279L678 273L676 270L667 265L659 255L659 249L656 246L656 236L653 233L654 230L652 230L648 223L646 224L645 221L641 221L639 217L636 216L638 208L634 210L631 207L627 207L623 203L620 204L620 202L618 202L614 198L610 200L604 194L604 192L600 190L601 183L598 180L598 176L596 176L595 169L593 169L592 166L590 166L591 165L589 161L590 160L588 154L587 106L523 106L509 107L507 109L482 196L478 212L479 217L475 219L470 229L472 231L469 232L471 234L475 234L471 237L470 236L470 242L468 242L468 244L472 246L471 247L474 249L476 248L475 250L473 250L472 255L474 257L472 259L476 263L474 263L470 267L470 271L476 279L474 278L473 283L476 286L476 288L474 288L480 291L485 298L488 297L491 300L493 296L495 296L496 299L498 297L505 298L506 299L504 303L511 306L511 308L508 309L508 315L505 320L506 322L517 330L519 330L524 335L524 337L531 339z">
</path> </g> </svg>< /div>

Other helpful articles:

https://github.com/Leaflet/Leaflet/blob/v1.0.0/dist/leaflet.css#L84

https://stackoverflow.com/questions/39767499/how-to-set-the-zindex-layer-order-for-geojson-layers

https://jsfiddle.net/3v7hd2vx/90/

No comments:

Post a Comment

I appreciate your time in leaving a comment!