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