app/assets/javascripts/leaflet.layers.js

   1 L.OSM.layers = function (options) {
   2   const control = L.OSM.sidebarPane(options, "layers", "javascripts.map.layers.title", "javascripts.map.layers.header");
   3
   4   control.onAddPane = function (map, button, $ui, toggle) {
   5     const layers = options.layers;
   6
   7     control.onContentLoaded = function () {
   8       $ui.find(".base-layers>div").each(initBaseLayer);
   9       initOverlays();
  10     };
  11     control.loadContent();
  12
  13     function initBaseLayer() {
  14       const [container, input, item] = this.children;
  15       const layer = layers.find(l => l.options.layerId === container.dataset.layer);
  16       input.checked = map.hasLayer(layer);
  17
  18       map.whenReady(function () {
  19         const miniMap = L.map(container, { attributionControl: false, zoomControl: false, keyboard: false })
  20           .addLayer(new layer.constructor(layer.options));
  21
  22         miniMap.dragging.disable();
  23         miniMap.touchZoom.disable();
  24         miniMap.doubleClickZoom.disable();
  25         miniMap.scrollWheelZoom.disable();
  26
  27         $ui
  28           .on("show", shown)
  29           .on("hide", hide);
  30
  31         function shown() {
  32           miniMap.invalidateSize();
  33           setView({ animate: false });
  34           map.on("moveend", moved);
  35         }
  36
  37         function hide() {
  38           map.off("moveend", moved);
  39         }
  40
  41         function moved() {
  42           setView();
  43         }
  44
  45         function setView(options) {
  46           miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0), options);
  47         }
  48       });
  49
  50       $(input).on("click", function () {
  51         for (const other of layers) {
  52           if (other !== layer) {
  53             map.removeLayer(other);
  54           }
  55         }
  56         map.addLayer(layer);
  57       });
  58
  59       $(item).on("dblclick", toggle);
  60
  61       map.on("baselayerchange", function () {
  62         input.checked = map.hasLayer(layer);
  63       });
  64     }
  65
  66     function initOverlays() {
  67       $ui.find(".overlay-layers div.form-check").each(function () {
  68         const item = this;
  69         const layer = map[this.dataset.layerId];
  70         const input = this.firstElementChild.firstElementChild;
  71         $(item).tooltip("disable");
  72
  73         let checked = map.hasLayer(layer);
  74
  75         input.checked = checked;
  76
  77         $(input).on("change", function () {
  78           checked = input.checked;
  79           layer.cancelLoading?.();
  80
  81           if (checked) {
  82             map.addLayer(layer);
  83           } else {
  84             map.removeLayer(layer);
  85             $(`#layers-${name}-loading`).remove();
  86           }
  87         });
  88
  89         map.on("overlayadd overlayremove", function () {
  90           input.checked = map.hasLayer(layer);
  91         });
  92
  93         map.on("zoomend", function () {
  94           const disabled = map.getBounds().getSize() >= item.dataset.maxArea;
  95           input.disabled = disabled;
  96
  97           if (disabled && input.checked) {
  98             input.click();
  99             checked = true;
 100           } else if (!disabled && !input.checked && checked) {
 101             input.click();
 102           }
 103
 104           item.classList.toggle("disabled", disabled);
 105           $(item).tooltip(disabled ? "enable" : "disable");
 106         });
 107       });
 108     }
 109   };
 110
 111   return control;
 112 };