app/assets/javascripts/leaflet.layers.js

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