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