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
 124       $("#link_marker")
 125         .prop("checked", map.hasLayer(marker));
 126
 127       $("#image_filter")
 128         .prop("checked", locationFilter.isEnabled());
 129
 130       // Link / Embed
 131
 132       Object.assign($("#long_link")[0], map.getUrl(marker));
 133       Object.assign($("#short_link")[0], map.getShortUrl(marker));
 134       Object.assign($("#embed_link")[0], map.getEmbedUrl(marker));
 135
 136       $("#long_input").val($("#long_link").prop("href"));
 137       $("#short_input").val($("#short_link").prop("href"));
 138
 139       if (!canEmbed && $("#nav-embed").hasClass("active")) {
 140         bootstrap.Tab.getOrCreateInstance($("#long_link")).show();
 141       }
 142       $("#embed_link")
 143         .toggleClass("disabled", !canEmbed)
 144         .parent()
 145         .tooltip(canEmbed ? "disable" : "enable");
 146
 147       $("#embed_html").val(
 148         "<iframe width=\"425\" height=\"350\" src=\"" +
 149           escapeHTML($("#embed_link").prop("href")) +
 150           "\" style=\"border: 1px solid black\"></iframe><br/>" +
 151           "<small><a href=\"" + escapeHTML($("#long_link").prop("href")) + "\">" +
 152           escapeHTML(OSM.i18n.t("javascripts.share.view_larger_map")) + "</a></small>");
 153
 154       // Geo URI
 155
 156       $("#geo_uri")
 157         .attr("href", map.getGeoUri(marker))
 158         .text(map.getGeoUri(marker));
 159
 160       // Image
 161
 162       const bounds = locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds();
 163
 164       let scale = $("#mapnik_scale").val();
 165       const size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
 166                             L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
 167             maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
 168
 169       $("#mapnik_minlon").val(bounds.getWest());
 170       $("#mapnik_minlat").val(bounds.getSouth());
 171       $("#mapnik_maxlon").val(bounds.getEast());
 172       $("#mapnik_maxlat").val(bounds.getNorth());
 173
 174       if (scale < maxScale) {
 175         scale = roundScale(maxScale);
 176         $("#mapnik_scale").val(scale);
 177       }
 178
 179       const mapWidth = Math.round(size.x / scale / 0.00028);
 180       const mapHeight = Math.round(size.y / scale / 0.00028);
 181       $("#mapnik_image_width").text(mapWidth);
 182       $("#mapnik_image_height").text(mapHeight);
 183
 184       const canDownloadImage = Boolean(layer && layer.options.canDownloadImage);
 185
 186       $("#mapnik_image_layer").text(canDownloadImage ? layer.options.name : "");
 187       $("#map_format").val(canDownloadImage ? layer.options.layerId : "");
 188
 189       $("#map_zoom").val(map.getZoom());
 190       $("#mapnik_lon").val(map.getCenter().lng);
 191       $("#mapnik_lat").val(map.getCenter().lat);
 192       $("#map_width").val(mapWidth);
 193       $("#map_height").val(mapHeight);
 194
 195       $("#export-image").toggle(canDownloadImage);
 196       $("#export-warning").toggle(!canDownloadImage);
 197       $("#mapnik_scale_row").toggle(canDownloadImage && layer.options.layerId === "mapnik");
 198     }
 199
 200     function select() {
 201       $(this).trigger("select");
 202     }
 203
 204     function getScale() {
 205       const bounds = map.getBounds(),
 206             centerLat = bounds.getCenter().lat,
 207             halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
 208             meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
 209             pixelsPerMeter = map.getSize().x / meters,
 210             metersPerPixel = 1 / (92 * 39.3701);
 211       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
 212     }
 213
 214     function roundScale(scale) {
 215       const precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
 216       return precision * Math.ceil(scale / precision);
 217     }
 218   }
 219
 220   control.onAddPane = function (map, button, $ui) {
 221     $("#content").addClass("overlay-right-sidebar");
 222
 223     control.onContentLoaded = () => init(map, $ui);
 224     $ui.one("show", control.loadContent);
 225   };
 226
 227   return control;
 228 };