app/assets/javascripts/leaflet.layers.js

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