app/assets/javascripts/leaflet.layers.js

   1 L.OSM.layers = function (options) {
   2   var control = L.OSM.sidebarPane(options);
   3
   4   control.onAdd = function (map) {
   5     var layers = options.layers;
   6
   7     var $container = $("<div>")
   8       .attr("class", "control-layers");
   9
  10     var button = this.makeButton("layers", "javascripts.map.layers.title", toggle)
  11       .appendTo($container);
  12
  13     var $ui = this.makeUI("layers-ui", "javascripts.map.layers.header", toggle);
  14
  15     var baseSection = $("<div>")
  16       .attr("class", "section base-layers")
  17       .appendTo($ui);
  18
  19     var baseLayers = $("<ul class='list-unstyled'>")
  20       .appendTo(baseSection);
  21
  22     layers.forEach(function (layer) {
  23       var item = $("<li>")
  24         .appendTo(baseLayers);
  25
  26       if (map.hasLayer(layer)) {
  27         item.addClass("active");
  28       }
  29
  30       var div = $("<div>")
  31         .appendTo(item);
  32
  33       map.whenReady(function () {
  34         var miniMap = L.map(div[0], { attributionControl: false, zoomControl: false, keyboard: false })
  35           .addLayer(new layer.constructor({ apikey: layer.options.apikey }));
  36
  37         miniMap.dragging.disable();
  38         miniMap.touchZoom.disable();
  39         miniMap.doubleClickZoom.disable();
  40         miniMap.scrollWheelZoom.disable();
  41
  42         $ui
  43           .on("show", shown)
  44           .on("hide", hide);
  45
  46         function shown() {
  47           miniMap.invalidateSize();
  48           setView({ animate: false });
  49           map.on("moveend", moved);
  50         }
  51
  52         function hide() {
  53           map.off("moveend", moved);
  54         }
  55
  56         function moved() {
  57           setView();
  58         }
  59
  60         function setView(options) {
  61           miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0), options);
  62         }
  63       });
  64
  65       var label = $("<label>")
  66         .appendTo(item);
  67
  68       var input = $("<input>")
  69         .attr("type", "radio")
  70         .prop("checked", map.hasLayer(layer))
  71         .appendTo(label);
  72
  73       label.append(layer.options.name);
  74
  75       item.on("click", function () {
  76         layers.forEach(function (other) {
  77           if (other === layer) {
  78             map.addLayer(other);
  79           } else {
  80             map.removeLayer(other);
  81           }
  82         });
  83         map.fire("baselayerchange", { layer: layer });
  84       });
  85
  86       item.on("dblclick", toggle);
  87
  88       map.on("layeradd layerremove", function () {
  89         item.toggleClass("active", map.hasLayer(layer));
  90         input.prop("checked", map.hasLayer(layer));
  91       });
  92     });
  93
  94     if (OSM.STATUS !== "api_offline" && OSM.STATUS !== "database_offline") {
  95       var overlaySection = $("<div>")
  96         .attr("class", "section overlay-layers")
  97         .appendTo($ui);
  98
  99       $("<p>")
 100         .text(I18n.t("javascripts.map.layers.overlays"))
 101         .attr("class", "text-muted")
 102         .appendTo(overlaySection);
 103
 104       var overlays = $("<ul class='list-unstyled form-check'>")
 105         .appendTo(overlaySection);
 106
 107       var addOverlay = function (layer, name, maxArea) {
 108         var item = $("<li>")
 109           .tooltip({
 110             placement: "top"
 111           })
 112           .appendTo(overlays);
 113
 114         var label = $("<label>")
 115           .attr("class", "form-check-label")
 116           .appendTo(item);
 117
 118         var checked = map.hasLayer(layer);
 119
 120         var input = $("<input>")
 121           .attr("type", "checkbox")
 122           .attr("class", "form-check-input")
 123           .prop("checked", checked)
 124           .appendTo(label);
 125
 126         label.append(I18n.t("javascripts.map.layers." + name));
 127
 128         input.on("change", function () {
 129           checked = input.is(":checked");
 130           if (checked) {
 131             map.addLayer(layer);
 132           } else {
 133             map.removeLayer(layer);
 134           }
 135           map.fire("overlaylayerchange", { layer: layer });
 136         });
 137
 138         map.on("layeradd layerremove", function () {
 139           input.prop("checked", map.hasLayer(layer));
 140         });
 141
 142         map.on("zoomend", function () {
 143           var disabled = map.getBounds().getSize() >= maxArea;
 144           $(input).prop("disabled", disabled);
 145
 146           if (disabled && $(input).is(":checked")) {
 147             $(input).prop("checked", false)
 148               .trigger("change");
 149             checked = true;
 150           } else if (!disabled && !$(input).is(":checked") && checked) {
 151             $(input).prop("checked", true)
 152               .trigger("change");
 153           }
 154
 155           $(item).attr("class", disabled ? "disabled" : "");
 156           item.attr("data-bs-original-title", disabled ?
 157             I18n.t("javascripts.site.map_" + name + "_zoom_in_tooltip") : "");
 158         });
 159       };
 160
 161       addOverlay(map.noteLayer, "notes", OSM.MAX_NOTE_REQUEST_AREA);
 162       addOverlay(map.dataLayer, "data", OSM.MAX_REQUEST_AREA);
 163       addOverlay(map.gpsLayer, "gps", Number.POSITIVE_INFINITY);
 164     }
 165
 166     options.sidebar.addPane($ui);
 167
 168     function toggle(e) {
 169       e.stopPropagation();
 170       e.preventDefault();
 171       options.sidebar.togglePane($ui, button);
 172       $(".leaflet-control .control-button").tooltip("hide");
 173     }
 174
 175     return $container[0];
 176   };
 177
 178   return control;
 179 };