app/assets/javascripts/leaflet.key.js

   1 L.OSM.key = function (options) {
   2   const control = L.OSM.sidebarPane(options, "key", null, "javascripts.key.title");
   3
   4   control.onAddPane = function (map, button, $ui) {
   5     const $section = $("<div>")
   6       .attr("class", "p-3")
   7       .appendTo($ui);
   8
   9     $ui
  10       .on("show", shown)
  11       .on("hide", hidden);
  12
  13     map.on("baselayerchange", updateButton);
  14
  15     updateButton();
  16
  17     function shown() {
  18       map.on("zoomend baselayerchange", update);
  19       fetch("/key")
  20         .then(r => r.text())
  21         .then(html => { $section.html(html); })
  22         .then(update);
  23     }
  24
  25     function hidden() {
  26       map.off("zoomend baselayerchange", update);
  27     }
  28
  29     function updateButton() {
  30       const disabled = !map.getMapBaseLayer().options.hasLegend;
  31       button
  32         .toggleClass("disabled", disabled)
  33         .attr("data-bs-original-title",
  34               OSM.i18n.t(disabled ?
  35                 "javascripts.key.tooltip_disabled" :
  36                 "javascripts.key.tooltip"));
  37     }
  38
  39     function update() {
  40       const layerId = map.getMapBaseLayerId(),
  41             zoom = map.getZoom();
  42
  43       $("#mapkey [data-layer]").each(function () {
  44         const data = $(this).data();
  45         $(this).toggle(
  46           layerId === data.layer &&
  47           (!data.zoomMin || zoom >= data.zoomMin) &&
  48           (!data.zoomMax || zoom <= data.zoomMax)
  49         );
  50       });
  51     }
  52   };
  53
  54   return control;
  55 };