app/assets/javascripts/leaflet.key.js

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