app/assets/javascripts/leaflet.layers.js

   1 //= require @maptiler/maplibre-gl-omt-language
   2 //= require maplibre/map
   3 //= require maplibre/i18n
   4
   5 L.OSM.layers = function (options) {
   6   const control = L.OSM.sidebarPane(options, "layers", "javascripts.map.layers.title", "javascripts.map.layers.header");
   7
   8   control.onAddPane = function (map, button, $ui, toggle) {
   9     const layers = options.layers;
  10
  11     control.onContentLoaded = function () {
  12       $ui.find(".base-layers>div").each(initBaseLayer);
  13       initOverlays();
  14     };
  15     control.loadContent();
  16
  17     function initBaseLayer() {
  18       const [container, input, item] = this.children;
  19       const layer = layers.find(l => l.options.layerId === container.dataset.layer);
  20       input.checked = map.hasLayer(layer);
  21
  22       map.whenReady(function () {
  23         let miniMap;
  24         $ui
  25           .on("show", shown)
  26           .on("hide", hide);
  27
  28         function shown() {
  29           const center = map.getCenter();
  30           try {
  31             miniMap = new OSM.MapLibre.Map({
  32               container,
  33               style: layer.options.style,
  34               interactive: false,
  35               attributionControl: false,
  36               fadeDuration: 0,
  37               zoomSnap: layer.options.isVectorStyle ? 0 : 1,
  38               center: [center.lng, center.lat],
  39               zoom: getZoomForMiniMap()
  40             });
  41           } catch (error) {
  42             return;
  43           }
  44
  45           if (layer.options.layerId === "openmaptiles_osm") {
  46             OSM.MapLibre.setOMTMapLanguage(miniMap);
  47           }
  48
  49           map.on("moveend", moved);
  50         }
  51
  52         function hide() {
  53           // miniMap can be falsy if webgl is not supported
  54           if (miniMap) {
  55             map.off("moveend", moved);
  56             miniMap.remove();
  57           }
  58         }
  59
  60         function moved() {
  61           const center = map.getCenter();
  62           const zoom = getZoomForMiniMap();
  63           miniMap.easeTo({ center: [center.lng, center.lat], zoom });
  64         }
  65
  66         function getZoomForMiniMap() {
  67           return Math.max(Math.floor(map.getZoom() - 3), -1);
  68         }
  69       });
  70
  71       $(input).on("click", function () {
  72         for (const other of layers) {
  73           if (other !== layer) {
  74             map.removeLayer(other);
  75           }
  76         }
  77         map.addLayer(layer);
  78       });
  79
  80       $(item).on("dblclick", toggle);
  81
  82       map.on("baselayerchange", function () {
  83         input.checked = map.hasLayer(layer);
  84       });
  85     }
  86
  87     function initOverlays() {
  88       $ui.find(".overlay-layers div.form-check").each(function () {
  89         const item = this;
  90         const layer = map[this.dataset.layerId];
  91         const input = this.firstElementChild.firstElementChild;
  92         $(item).tooltip("disable");
  93
  94         let checked = map.hasLayer(layer);
  95
  96         input.checked = checked;
  97
  98         $(input).on("change", function () {
  99           checked = input.checked;
 100           layer.cancelLoading?.();
 101
 102           if (checked) {
 103             map.addLayer(layer);
 104           } else {
 105             map.removeLayer(layer);
 106             $(`#layers-${name}-loading`).remove();
 107           }
 108         });
 109
 110         map.on("overlayadd overlayremove", function () {
 111           input.checked = map.hasLayer(layer);
 112         });
 113
 114         map.on("zoomend", function () {
 115           const disabled = map.getBounds().getSize() >= item.dataset.maxArea;
 116           input.disabled = disabled;
 117
 118           if (disabled && input.checked) {
 119             input.click();
 120             checked = true;
 121           } else if (!disabled && !input.checked && checked) {
 122             input.click();
 123           }
 124
 125           item.classList.toggle("disabled", disabled);
 126           $(item).tooltip(disabled ? "enable" : "disable");
 127         });
 128       });
 129     }
 130   };
 131
 132   return control;
 133 };