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           if (layer.cancelLoading) {
  80             layer.cancelLoading();
  81           }
  82
  83           if (checked) {
  84             map.addLayer(layer);
  85           } else {
  86             map.removeLayer(layer);
  87             $(`#layers-${name}-loading`).remove();
  88           }
  89         });
  90
  91         map.on("overlayadd overlayremove", function () {
  92           input.checked = map.hasLayer(layer);
  93         });
  94
  95         map.on("zoomend", function () {
  96           const disabled = map.getBounds().getSize() >= item.dataset.maxArea;
  97           $(input).prop("disabled", disabled);
  98
  99           if (disabled && $(input).is(":checked")) {
 100             $(input).prop("checked", false)
 101               .trigger("change");
 102             checked = true;
 103           } else if (!disabled && !$(input).is(":checked") && checked) {
 104             $(input).prop("checked", true)
 105               .trigger("change");
 106           }
 107
 108           $(item)
 109             .toggleClass("disabled", disabled)
 110             .tooltip(disabled ? "enable" : "disable");
 111         });
 112       });
 113     }
 114   };
 115
 116   return control;
 117 };