X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/ae00fa84c8f981e909c61ab31b6115bb96e859cc..78641615b35fb40ec195ece5834b2b93e7b6ef1a:/app/assets/javascripts/leaflet.share.js

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 40ba020e6..d84f8820e 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -1,16 +1,16 @@
 L.OSM.share = function (options) {
-  var control = L.OSM.sidebarPane(options, "share", "javascripts.share.title", "javascripts.share.title"),
-      marker = L.marker([0, 0], { draggable: true }),
-      locationFilter = new L.LocationFilter({
-        enableButton: false,
-        adjustButton: false
-      });
+  const control = L.OSM.sidebarPane(options, "share", "javascripts.share.title", "javascripts.share.title"),
+        marker = L.marker([0, 0], { draggable: true }),
+        locationFilter = new L.LocationFilter({
+          enableButton: false,
+          adjustButton: false
+        });
 
   control.onAddPane = function (map, button, $ui) {
     // Link / Embed
     $("#content").addClass("overlay-right-sidebar");
 
-    var $linkSection = $("<div>")
+    const $linkSection = $("<div>")
       .attr("class", "share-link p-3 border-bottom border-secondary-subtle")
       .appendTo($ui);
 
@@ -18,7 +18,7 @@ L.OSM.share = function (options) {
       .text(I18n.t("javascripts.share.link"))
       .appendTo($linkSection);
 
-    var $form = $("<form>")
+    let $form = $("<form>")
       .appendTo($linkSection);
 
     $("<div>")
@@ -54,7 +54,7 @@ L.OSM.share = function (options) {
       .on("click", "a", function (e) {
         e.preventDefault();
         if (!$(this).hasClass("btn-primary")) return;
-        var id = "#" + $(this).attr("for");
+        const id = "#" + $(this).attr("for");
         $(this).siblings("a")
           .removeClass("active");
         $(this).addClass("active");
@@ -104,7 +104,7 @@ L.OSM.share = function (options) {
 
     // Geo URI
 
-    var $geoUriSection = $("<div>")
+    const $geoUriSection = $("<div>")
       .attr("class", "share-geo-uri p-3 border-bottom border-secondary-subtle")
       .appendTo($ui);
 
@@ -119,7 +119,7 @@ L.OSM.share = function (options) {
 
     // Image
 
-    var $imageSection = $("<div>")
+    const $imageSection = $("<div>")
       .attr("class", "share-image p-3")
       .appendTo($ui);
 
@@ -130,7 +130,12 @@ L.OSM.share = function (options) {
     $("<div>")
       .attr("id", "export-warning")
       .attr("class", "text-body-secondary")
-      .text(I18n.t("javascripts.share.only_standard_layer"))
+      .text(I18n.t("javascripts.share.only_layers_exported_as_image"))
+      .append(
+        $("<ul>").append(
+          map.baseLayers
+            .filter(layer => layer.options.canDownloadImage)
+            .map(layer => $("<li>").text(layer.options.name))))
       .appendTo($imageSection);
 
     $form = $("<form>")
@@ -154,6 +159,7 @@ L.OSM.share = function (options) {
           .attr("class", "form-select w-auto")
           .append($("<option>").val("png").text("PNG").prop("selected", true))
           .append($("<option>").val("jpeg").text("JPEG"))
+          .append($("<option>").val("webp").text("WEBP"))
           .append($("<option>").val("svg").text("SVG"))
           .append($("<option>").val("pdf").text("PDF"))));
 
@@ -196,52 +202,40 @@ L.OSM.share = function (options) {
             .attr("class", "form-check-input")
             .bind("change", toggleFilter))));
 
-    ["minlon", "minlat", "maxlon", "maxlat", "lat", "lon"].forEach(function (name) {
+    const mapnikNames = ["minlon", "minlat", "maxlon", "maxlat", "lat", "lon"];
+
+    for (const name of mapnikNames) {
       $("<input>")
         .attr("id", "mapnik_" + name)
         .attr("name", name)
         .attr("type", "hidden")
         .appendTo($form);
-    });
-
-    $("<input>")
-      .attr("id", "map_format")
-      .attr("name", "format")
-      .attr("value", "mapnik")
-      .attr("type", "hidden")
-      .appendTo($form);
-
-    $("<input>")
-      .attr("id", "map_zoom")
-      .attr("name", "zoom")
-      .attr("value", map.getZoom())
-      .attr("type", "hidden")
-      .appendTo($form);
+    }
 
-    $("<input>")
-      .attr("id", "map_width")
-      .attr("name", "width")
-      .attr("value", 0)
-      .attr("type", "hidden")
-      .appendTo($form);
+    const hiddenExportDefaults = {
+      format: "mapnik",
+      zoom: map.getZoom(),
+      width: 0,
+      height: 0
+    };
 
-    $("<input>")
-      .attr("id", "map_height")
-      .attr("name", "height")
-      .attr("value", 0)
-      .attr("type", "hidden")
-      .appendTo($form);
+    for (const name in hiddenExportDefaults) {
+      $("<input>")
+        .attr("id", "map_" + name)
+        .attr("name", name)
+        .attr("value", hiddenExportDefaults[name])
+        .attr("type", "hidden")
+        .appendTo($form);
+    }
 
-    var csrf_param = $("meta[name=csrf-param]").attr("content"),
-        csrf_token = $("meta[name=csrf-token]").attr("content");
+    const csrfAttrs = { type: "hidden" };
+    [[csrfAttrs.name, csrfAttrs.value]] = Object.entries(OSM.csrf);
 
     $("<input>")
-      .attr("name", csrf_param)
-      .attr("value", csrf_token)
-      .attr("type", "hidden")
+      .attr(csrfAttrs)
       .appendTo($form);
 
-    var args = {
+    const args = {
       layer: "<span id=\"mapnik_image_layer\"></span>",
       width: "<span id=\"mapnik_image_width\"></span>",
       height: "<span id=\"mapnik_image_height\"></span>"
@@ -264,7 +258,7 @@ L.OSM.share = function (options) {
 
     marker.on("dragend", movedMarker);
     map.on("move", movedMap);
-    map.on("moveend layeradd layerremove", update);
+    map.on("moveend baselayerchange overlayadd overlayremove", update);
 
     $ui
       .on("show", shown)
@@ -324,7 +318,7 @@ L.OSM.share = function (options) {
     }
 
     function escapeHTML(string) {
-      var htmlEscapes = {
+      const htmlEscapes = {
         "&": "&amp;",
         "<": "&lt;",
         ">": "&gt;",
@@ -337,8 +331,9 @@ L.OSM.share = function (options) {
     }
 
     function update() {
-      var canEmbed = map.getMapBaseLayerId() !== "tracestracktopo";
-      var bounds = map.getBounds();
+      const layer = map.getMapBaseLayer();
+      const canEmbed = Boolean(layer && layer.options.canEmbed);
+      let bounds = map.getBounds();
 
       $("#link_marker")
         .prop("checked", map.hasLayer(marker));
@@ -353,14 +348,14 @@ L.OSM.share = function (options) {
       $("#short_link").attr("href", map.getShortUrl(marker));
       $("#long_link").attr("href", map.getUrl(marker));
 
-      var params = {
+      const params = new URLSearchParams({
         bbox: bounds.toBBoxString(),
         layer: map.getMapBaseLayerId()
-      };
+      });
 
       if (map.hasLayer(marker)) {
-        var latLng = marker.getLatLng().wrap();
-        params.marker = latLng.lat + "," + latLng.lng;
+        const latLng = marker.getLatLng().wrap();
+        params.set("marker", latLng.lat + "," + latLng.lng);
       }
 
       $("#embed_link")
@@ -373,7 +368,7 @@ L.OSM.share = function (options) {
 
       $("#embed_html").val(
         "<iframe width=\"425\" height=\"350\" src=\"" +
-          escapeHTML(OSM.SERVER_PROTOCOL + "://" + OSM.SERVER_URL + "/export/embed.html?" + $.param(params)) +
+          escapeHTML(OSM.SERVER_PROTOCOL + "://" + OSM.SERVER_URL + "/export/embed.html?" + params) +
           "\" style=\"border: 1px solid black\"></iframe><br/>" +
           "<small><a href=\"" + escapeHTML(map.getUrl(marker)) + "\">" +
           escapeHTML(I18n.t("javascripts.share.view_larger_map")) + "</a></small>");
@@ -390,10 +385,10 @@ L.OSM.share = function (options) {
         bounds = locationFilter.getBounds();
       }
 
-      var scale = $("#mapnik_scale").val(),
-          size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
-                          L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
-          maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
+      let scale = $("#mapnik_scale").val();
+      const size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
+                            L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
+            maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
 
       $("#mapnik_minlon").val(bounds.getWest());
       $("#mapnik_minlat").val(bounds.getSouth());
@@ -410,15 +405,10 @@ L.OSM.share = function (options) {
       $("#mapnik_image_width").text(mapWidth);
       $("#mapnik_image_height").text(mapHeight);
 
-      const layer = map.getMapBaseLayerId();
-      const layerKeys = new Map([
-        ["mapnik", "standard"],
-        ["cyclemap", "cycle_map"],
-        ["transportmap", "transport_map"]
-      ]);
+      const canDownloadImage = Boolean(layer && layer.options.canDownloadImage);
 
-      $("#mapnik_image_layer").text(layerKeys.has(layer) ? I18n.t(`javascripts.map.base.${layerKeys.get(layer)}`) : "");
-      $("#map_format").val(layer);
+      $("#mapnik_image_layer").text(canDownloadImage ? layer.options.name : "");
+      $("#map_format").val(canDownloadImage ? layer.options.layerId : "");
 
       $("#map_zoom").val(map.getZoom());
       $("#mapnik_lon").val(map.getCenter().lng);
@@ -426,18 +416,9 @@ L.OSM.share = function (options) {
       $("#map_width").val(mapWidth);
       $("#map_height").val(mapHeight);
 
-      if (["cyclemap", "transportmap"].includes(map.getMapBaseLayerId())) {
-        $("#export-image").show();
-        $("#mapnik_scale_row").hide();
-        $("#export-warning").hide();
-      } else if (map.getMapBaseLayerId() === "mapnik") {
-        $("#export-image").show();
-        $("#mapnik_scale_row").show();
-        $("#export-warning").hide();
-      } else {
-        $("#export-image").hide();
-        $("#export-warning").show();
-      }
+      $("#export-image").toggle(canDownloadImage);
+      $("#export-warning").toggle(!canDownloadImage);
+      $("#mapnik_scale_row").toggle(canDownloadImage && layer.options.layerId === "mapnik");
     }
 
     function select() {
@@ -445,17 +426,17 @@ L.OSM.share = function (options) {
     }
 
     function getScale() {
-      var bounds = map.getBounds(),
-          centerLat = bounds.getCenter().lat,
-          halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
-          meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
-          pixelsPerMeter = map.getSize().x / meters,
-          metersPerPixel = 1 / (92 * 39.3701);
+      const bounds = map.getBounds(),
+            centerLat = bounds.getCenter().lat,
+            halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
+            meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
+            pixelsPerMeter = map.getSize().x / meters,
+            metersPerPixel = 1 / (92 * 39.3701);
       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
     }
 
     function roundScale(scale) {
-      var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
+      const precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
       return precision * Math.ceil(scale / precision);
     }
   };