app/assets/javascripts/leaflet.layers.js

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