app/assets/javascripts/leaflet.share.js

   1 //= require download_util
   2
   3 L.OSM.share = function (options) {
   4   const control = L.OSM.sidebarPane(options, "share", "javascripts.share.title", "javascripts.share.title"),
   5         marker = L.marker([0, 0], { draggable: true, icon: OSM.getMarker({ color: "var(--marker-blue)" }) }),
   6         locationFilter = new L.LocationFilter({
   7           enableButton: false,
   8           adjustButton: false
   9         });
  10
  11   function init(map, $ui) {
  12     // Link / Embed
  13
  14     $ui.find("#link_marker").on("change", toggleMarker);
  15
  16     $ui.find(".btn-group .btn")
  17       .on("shown.bs.tab", () => {
  18         $ui.find(".tab-pane.active [id]")
  19           .trigger("select");
  20       });
  21
  22     $ui.find(".share-tab [id]").on("click", select);
  23
  24     // Image
  25
  26     $ui.find("#mapnik_scale").on("change", update);
  27
  28     $ui.find("#image_filter").bind("change", toggleFilter);
  29
  30     const csrfInput = $ui.find("#csrf_export")[0];
  31     [[csrfInput.name, csrfInput.value]] = Object.entries(OSM.csrf);
  32
  33     document.getElementById("export-image")
  34       .addEventListener("turbo:submit-end",
  35                         OSM.getTurboBlobHandler(OSM.i18n.t("javascripts.share.filename")));
  36
  37     document.getElementById("export-image")
  38       .addEventListener("turbo:before-fetch-response", OSM.turboHtmlResponseHandler);
  39
  40     locationFilter
  41       .on("change", update)
  42       .addTo(map);
  43
  44     marker.on("dragend", movedMarker);
  45     map.on("move", movedMap);
  46     map.on("moveend baselayerchange overlayadd overlayremove", update);
  47
  48     $ui
  49       .on("show", shown)
  50       .on("hide", hidden);
  51
  52     update();
  53
  54     function shown() {
  55       $("#mapnik_scale").val(getScale());
  56       update();
  57     }
  58
  59     function hidden() {
  60       map.removeLayer(marker);
  61       map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
  62       locationFilter.disable();
  63       update();
  64     }
  65
  66     function toggleMarker() {
  67       if ($(this).is(":checked")) {
  68         marker.setLatLng(map.getCenter());
  69         map.addLayer(marker);
  70         map.options.scrollWheelZoom = map.options.doubleClickZoom = "center";
  71       } else {
  72         map.removeLayer(marker);
  73         map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
  74       }
  75       update();
  76     }
  77
  78     function toggleFilter() {
  79       if ($(this).is(":checked")) {
  80         locationFilter.setBounds(map.getBounds().pad(-0.2));
  81         locationFilter.enable();
  82       } else {
  83         locationFilter.disable();
  84       }
  85       update();
  86     }
  87
  88     function movedMap() {
  89       marker.setLatLng(map.getCenter());
  90       update();
  91     }
  92
  93     function movedMarker() {
  94       if (map.hasLayer(marker)) {
  95         map.off("move", movedMap);
  96         map.on("moveend", updateOnce);
  97         map.panTo(marker.getLatLng());
  98       }
  99     }
 100
 101     function updateOnce() {
 102       map.off("moveend", updateOnce);
 103       map.on("move", movedMap);
 104       update();
 105     }
 106
 107     function escapeHTML(string) {
 108       const htmlEscapes = {
 109         "&": "&amp;",
 110         "<": "&lt;",
 111         ">": "&gt;",
 112         "\"": "&quot;",
 113         "'": "&#x27;"
 114       };
 115       return string === null ? "" : String(string).replace(/[&<>"']/g, function (match) {
 116         return htmlEscapes[match];
 117       });
 118     }
 119
 120     function update() {
 121       const layer = map.getMapBaseLayer();
 122       const canEmbed = Boolean(layer && layer.options.canEmbed);
 123       let bounds = map.getBounds();
 124
 125       $("#link_marker")
 126         .prop("checked", map.hasLayer(marker));
 127
 128       $("#image_filter")
 129         .prop("checked", locationFilter.isEnabled());
 130
 131       // Link / Embed
 132
 133       $("#short_input").val(map.getShortUrl(marker));
 134       $("#long_input").val(map.getUrl(marker));
 135       $("#short_link").attr("href", map.getShortUrl(marker));
 136       $("#long_link").attr("href", map.getUrl(marker));
 137
 138       const params = new URLSearchParams({
 139         bbox: bounds.toBBoxString(),
 140         layer: map.getMapBaseLayerId()
 141       });
 142
 143       if (map.hasLayer(marker)) {
 144         const latLng = marker.getLatLng().wrap();
 145         params.set("marker", latLng.lat + "," + latLng.lng);
 146       }
 147
 148       if (!canEmbed && $("#nav-embed").hasClass("active")) {
 149         bootstrap.Tab.getOrCreateInstance($("#long_link")).show();
 150       }
 151       $("#embed_link")
 152         .toggleClass("disabled", !canEmbed)
 153         .parent()
 154         .tooltip(canEmbed ? "disable" : "enable");
 155
 156       $("#embed_html").val(
 157         "<iframe width=\"425\" height=\"350\" src=\"" +
 158           escapeHTML(OSM.SERVER_PROTOCOL + "://" + OSM.SERVER_URL + "/export/embed.html?" + params) +
 159           "\" style=\"border: 1px solid black\"></iframe><br/>" +
 160           "<small><a href=\"" + escapeHTML(map.getUrl(marker)) + "\">" +
 161           escapeHTML(OSM.i18n.t("javascripts.share.view_larger_map")) + "</a></small>");
 162
 163       // Geo URI
 164
 165       $("#geo_uri")
 166         .attr("href", map.getGeoUri(marker))
 167         .text(map.getGeoUri(marker));
 168
 169       // Image
 170
 171       if (locationFilter.isEnabled()) {
 172         bounds = locationFilter.getBounds();
 173       }
 174
 175       let scale = $("#mapnik_scale").val();
 176       const size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
 177                             L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
 178             maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
 179
 180       $("#mapnik_minlon").val(bounds.getWest());
 181       $("#mapnik_minlat").val(bounds.getSouth());
 182       $("#mapnik_maxlon").val(bounds.getEast());
 183       $("#mapnik_maxlat").val(bounds.getNorth());
 184
 185       if (scale < maxScale) {
 186         scale = roundScale(maxScale);
 187         $("#mapnik_scale").val(scale);
 188       }
 189
 190       const mapWidth = Math.round(size.x / scale / 0.00028);
 191       const mapHeight = Math.round(size.y / scale / 0.00028);
 192       $("#mapnik_image_width").text(mapWidth);
 193       $("#mapnik_image_height").text(mapHeight);
 194
 195       const canDownloadImage = Boolean(layer && layer.options.canDownloadImage);
 196
 197       $("#mapnik_image_layer").text(canDownloadImage ? layer.options.name : "");
 198       $("#map_format").val(canDownloadImage ? layer.options.layerId : "");
 199
 200       $("#map_zoom").val(map.getZoom());
 201       $("#mapnik_lon").val(map.getCenter().lng);
 202       $("#mapnik_lat").val(map.getCenter().lat);
 203       $("#map_width").val(mapWidth);
 204       $("#map_height").val(mapHeight);
 205
 206       $("#export-image").toggle(canDownloadImage);
 207       $("#export-warning").toggle(!canDownloadImage);
 208       $("#mapnik_scale_row").toggle(canDownloadImage && layer.options.layerId === "mapnik");
 209     }
 210
 211     function select() {
 212       $(this).trigger("select");
 213     }
 214
 215     function getScale() {
 216       const bounds = map.getBounds(),
 217             centerLat = bounds.getCenter().lat,
 218             halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
 219             meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
 220             pixelsPerMeter = map.getSize().x / meters,
 221             metersPerPixel = 1 / (92 * 39.3701);
 222       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
 223     }
 224
 225     function roundScale(scale) {
 226       const precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
 227       return precision * Math.ceil(scale / precision);
 228     }
 229   }
 230
 231   control.onAddPane = function (map, button, $ui) {
 232     $("#content").addClass("overlay-right-sidebar");
 233
 234     control.onContentLoaded = () => init(map, $ui);
 235     $ui.one("show", control.loadContent);
 236   };
 237
 238   return control;
 239 };