]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/leaflet.share.js
Merge remote-tracking branch 'upstream/pull/5099'
[rails.git] / app / assets / javascripts / leaflet.share.js
1 L.OSM.share = function (options) {
2   var control = L.OSM.sidebarPane(options, "share", "javascripts.share.title", "javascripts.share.title"),
3       marker = L.marker([0, 0], { draggable: true }),
4       locationFilter = new L.LocationFilter({
5         enableButton: false,
6         adjustButton: false
7       });
8
9   control.onAddPane = function (map, button, $ui) {
10     // Link / Embed
11     $("#content").addClass("overlay-right-sidebar");
12
13     var $linkSection = $("<div>")
14       .attr("class", "share-link p-3 border-bottom border-secondary-subtle")
15       .appendTo($ui);
16
17     $("<h4>")
18       .text(I18n.t("javascripts.share.link"))
19       .appendTo($linkSection);
20
21     var $form = $("<form>")
22       .appendTo($linkSection);
23
24     $("<div>")
25       .attr("class", "form-check mb-3")
26       .appendTo($form)
27       .append($("<label>")
28         .attr("for", "link_marker")
29         .attr("class", "form-check-label")
30         .text(I18n.t("javascripts.share.include_marker")))
31       .append($("<input>")
32         .attr("id", "link_marker")
33         .attr("type", "checkbox")
34         .attr("class", "form-check-input")
35         .bind("change", toggleMarker));
36
37     $("<div class='btn-group btn-group-sm mb-2'>")
38       .appendTo($form)
39       .append($("<a class='btn btn-primary'>")
40         .addClass("active")
41         .attr("for", "long_input")
42         .attr("id", "long_link")
43         .text(I18n.t("javascripts.share.long_link")))
44       .append($("<a class='btn btn-primary'>")
45         .attr("for", "short_input")
46         .attr("id", "short_link")
47         .text(I18n.t("javascripts.share.short_link")))
48       .append($("<a class='btn btn-primary'>")
49         .attr("for", "embed_html")
50         .attr("id", "embed_link")
51         .attr("data-bs-title", I18n.t("javascripts.site.embed_html_disabled"))
52         .attr("href", "#")
53         .text(I18n.t("javascripts.share.embed")))
54       .on("click", "a", function (e) {
55         e.preventDefault();
56         if (!$(this).hasClass("btn-primary")) return;
57         var id = "#" + $(this).attr("for");
58         $(this).siblings("a")
59           .removeClass("active");
60         $(this).addClass("active");
61         $linkSection.find(".share-tab")
62           .hide();
63         $linkSection.find(".share-tab:has(" + id + ")")
64           .show()
65           .find("input, textarea")
66           .select();
67       });
68
69     $("<div>")
70       .attr("class", "share-tab")
71       .appendTo($form)
72       .append($("<input>")
73         .attr("id", "long_input")
74         .attr("type", "text")
75         .attr("class", "form-control form-control-sm font-monospace")
76         .attr("readonly", true)
77         .on("click", select));
78
79     $("<div>")
80       .attr("class", "share-tab")
81       .hide()
82       .appendTo($form)
83       .append($("<input>")
84         .attr("id", "short_input")
85         .attr("type", "text")
86         .attr("class", "form-control form-control-sm font-monospace")
87         .attr("readonly", true)
88         .on("click", select));
89
90     $("<div>")
91       .attr("class", "share-tab")
92       .hide()
93       .appendTo($form)
94       .append(
95         $("<textarea>")
96           .attr("id", "embed_html")
97           .attr("class", "form-control form-control-sm font-monospace")
98           .attr("readonly", true)
99           .on("click", select))
100       .append(
101         $("<p>")
102           .attr("class", "text-body-secondary")
103           .text(I18n.t("javascripts.share.paste_html")));
104
105     // Geo URI
106
107     var $geoUriSection = $("<div>")
108       .attr("class", "share-geo-uri p-3 border-bottom border-secondary-subtle")
109       .appendTo($ui);
110
111     $("<h4>")
112       .text(I18n.t("javascripts.share.geo_uri"))
113       .appendTo($geoUriSection);
114
115     $("<div>")
116       .appendTo($geoUriSection)
117       .append($("<a>")
118         .attr("id", "geo_uri"));
119
120     // Image
121
122     var $imageSection = $("<div>")
123       .attr("class", "share-image p-3")
124       .appendTo($ui);
125
126     $("<h4>")
127       .text(I18n.t("javascripts.share.image"))
128       .appendTo($imageSection);
129
130     $("<div>")
131       .attr("id", "export-warning")
132       .attr("class", "text-body-secondary")
133       .text(I18n.t("javascripts.share.only_standard_layer"))
134       .appendTo($imageSection);
135
136     $form = $("<form>")
137       .attr("id", "export-image")
138       .attr("action", "/export/finish")
139       .attr("method", "post")
140       .appendTo($imageSection);
141
142     $("<div>")
143       .appendTo($form)
144       .attr("class", "row mb-3")
145       .append($("<label>")
146         .attr("for", "mapnik_format")
147         .attr("class", "col-auto col-form-label")
148         .text(I18n.t("javascripts.share.format")))
149       .append($("<div>")
150         .attr("class", "col-auto")
151         .append($("<select>")
152           .attr("name", "mapnik_format")
153           .attr("id", "mapnik_format")
154           .attr("class", "form-select w-auto")
155           .append($("<option>").val("png").text("PNG").prop("selected", true))
156           .append($("<option>").val("jpeg").text("JPEG"))
157           .append($("<option>").val("svg").text("SVG"))
158           .append($("<option>").val("pdf").text("PDF"))));
159
160     $("<div>")
161       .appendTo($form)
162       .attr("class", "row mb-3")
163       .attr("id", "mapnik_scale_row")
164       .append($("<label>")
165         .attr("for", "mapnik_scale")
166         .attr("class", "col-auto col-form-label")
167         .text(I18n.t("javascripts.share.scale")))
168       .append($("<div>")
169         .attr("class", "col-auto")
170         .append($("<div>")
171           .attr("class", "input-group flex-nowrap")
172           .append($("<span>")
173             .attr("class", "input-group-text")
174             .text("1 : "))
175           .append($("<input>")
176             .attr("name", "mapnik_scale")
177             .attr("id", "mapnik_scale")
178             .attr("type", "text")
179             .attr("class", "form-control")
180             .on("change", update))));
181
182     $("<div>")
183       .attr("class", "row mb-3")
184       .appendTo($form)
185       .append($("<div>")
186         .attr("class", "col-auto")
187         .append($("<div>")
188           .attr("class", "form-check")
189           .append($("<label>")
190             .attr("for", "image_filter")
191             .attr("class", "form-check-label")
192             .text(I18n.t("javascripts.share.custom_dimensions")))
193           .append($("<input>")
194             .attr("id", "image_filter")
195             .attr("type", "checkbox")
196             .attr("class", "form-check-input")
197             .bind("change", toggleFilter))));
198
199     ["minlon", "minlat", "maxlon", "maxlat", "lat", "lon"].forEach(function (name) {
200       $("<input>")
201         .attr("id", "mapnik_" + name)
202         .attr("name", name)
203         .attr("type", "hidden")
204         .appendTo($form);
205     });
206
207     $("<input>")
208       .attr("id", "map_format")
209       .attr("name", "format")
210       .attr("value", "mapnik")
211       .attr("type", "hidden")
212       .appendTo($form);
213
214     $("<input>")
215       .attr("id", "map_zoom")
216       .attr("name", "zoom")
217       .attr("value", map.getZoom())
218       .attr("type", "hidden")
219       .appendTo($form);
220
221     $("<input>")
222       .attr("id", "map_width")
223       .attr("name", "width")
224       .attr("value", 0)
225       .attr("type", "hidden")
226       .appendTo($form);
227
228     $("<input>")
229       .attr("id", "map_height")
230       .attr("name", "height")
231       .attr("value", 0)
232       .attr("type", "hidden")
233       .appendTo($form);
234
235     var csrf_param = $("meta[name=csrf-param]").attr("content"),
236         csrf_token = $("meta[name=csrf-token]").attr("content");
237
238     $("<input>")
239       .attr("name", csrf_param)
240       .attr("value", csrf_token)
241       .attr("type", "hidden")
242       .appendTo($form);
243
244     var args = {
245       layer: "<span id=\"mapnik_image_layer\"></span>",
246       width: "<span id=\"mapnik_image_width\"></span>",
247       height: "<span id=\"mapnik_image_height\"></span>"
248     };
249
250     $("<p>")
251       .attr("class", "text-body-secondary")
252       .html(I18n.t("javascripts.share.image_dimensions", args))
253       .appendTo($form);
254
255     $("<input>")
256       .attr("type", "submit")
257       .attr("class", "btn btn-primary")
258       .attr("value", I18n.t("javascripts.share.download"))
259       .appendTo($form);
260
261     locationFilter
262       .on("change", update)
263       .addTo(map);
264
265     marker.on("dragend", movedMarker);
266     map.on("move", movedMap);
267     map.on("moveend layeradd layerremove", update);
268
269     $ui
270       .on("show", shown)
271       .on("hide", hidden);
272
273     function shown() {
274       $("#mapnik_scale").val(getScale());
275       update();
276     }
277
278     function hidden() {
279       map.removeLayer(marker);
280       map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
281       locationFilter.disable();
282       update();
283     }
284
285     function toggleMarker() {
286       if ($(this).is(":checked")) {
287         marker.setLatLng(map.getCenter());
288         map.addLayer(marker);
289         map.options.scrollWheelZoom = map.options.doubleClickZoom = "center";
290       } else {
291         map.removeLayer(marker);
292         map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
293       }
294       update();
295     }
296
297     function toggleFilter() {
298       if ($(this).is(":checked")) {
299         locationFilter.setBounds(map.getBounds().pad(-0.2));
300         locationFilter.enable();
301       } else {
302         locationFilter.disable();
303       }
304       update();
305     }
306
307     function movedMap() {
308       marker.setLatLng(map.getCenter());
309       update();
310     }
311
312     function movedMarker() {
313       if (map.hasLayer(marker)) {
314         map.off("move", movedMap);
315         map.on("moveend", updateOnce);
316         map.panTo(marker.getLatLng());
317       }
318     }
319
320     function updateOnce() {
321       map.off("moveend", updateOnce);
322       map.on("move", movedMap);
323       update();
324     }
325
326     function escapeHTML(string) {
327       var htmlEscapes = {
328         "&": "&amp;",
329         "<": "&lt;",
330         ">": "&gt;",
331         "\"": "&quot;",
332         "'": "&#x27;"
333       };
334       return string === null ? "" : String(string).replace(/[&<>"']/g, function (match) {
335         return htmlEscapes[match];
336       });
337     }
338
339     function update() {
340       var canEmbed = map.getMapBaseLayerId() !== "tracestracktopo";
341       var bounds = map.getBounds();
342
343       $("#link_marker")
344         .prop("checked", map.hasLayer(marker));
345
346       $("#image_filter")
347         .prop("checked", locationFilter.isEnabled());
348
349       // Link / Embed
350
351       $("#short_input").val(map.getShortUrl(marker));
352       $("#long_input").val(map.getUrl(marker));
353       $("#short_link").attr("href", map.getShortUrl(marker));
354       $("#long_link").attr("href", map.getUrl(marker));
355
356       var params = {
357         bbox: bounds.toBBoxString(),
358         layer: map.getMapBaseLayerId()
359       };
360
361       if (map.hasLayer(marker)) {
362         var latLng = marker.getLatLng().wrap();
363         params.marker = latLng.lat + "," + latLng.lng;
364       }
365
366       $("#embed_link")
367         .toggleClass("btn-primary", canEmbed)
368         .toggleClass("btn-secondary", !canEmbed)
369         .tooltip(canEmbed ? "disable" : "enable");
370       if (!canEmbed && $("#embed_link").hasClass("active")) {
371         $("#long_link").click();
372       }
373
374       $("#embed_html").val(
375         "<iframe width=\"425\" height=\"350\" src=\"" +
376           escapeHTML(OSM.SERVER_PROTOCOL + "://" + OSM.SERVER_URL + "/export/embed.html?" + $.param(params)) +
377           "\" style=\"border: 1px solid black\"></iframe><br/>" +
378           "<small><a href=\"" + escapeHTML(map.getUrl(marker)) + "\">" +
379           escapeHTML(I18n.t("javascripts.share.view_larger_map")) + "</a></small>");
380
381       // Geo URI
382
383       $("#geo_uri")
384         .attr("href", map.getGeoUri(marker))
385         .html(map.getGeoUri(marker));
386
387       // Image
388
389       if (locationFilter.isEnabled()) {
390         bounds = locationFilter.getBounds();
391       }
392
393       var scale = $("#mapnik_scale").val(),
394           size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
395                           L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
396           maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
397
398       $("#mapnik_minlon").val(bounds.getWest());
399       $("#mapnik_minlat").val(bounds.getSouth());
400       $("#mapnik_maxlon").val(bounds.getEast());
401       $("#mapnik_maxlat").val(bounds.getNorth());
402
403       if (scale < maxScale) {
404         scale = roundScale(maxScale);
405         $("#mapnik_scale").val(scale);
406       }
407
408       const mapWidth = Math.round(size.x / scale / 0.00028);
409       const mapHeight = Math.round(size.y / scale / 0.00028);
410       $("#mapnik_image_width").text(mapWidth);
411       $("#mapnik_image_height").text(mapHeight);
412
413       const layer = map.getMapBaseLayerId();
414       const layerKeys = new Map([
415         ["mapnik", "standard"],
416         ["cyclemap", "cycle_map"],
417         ["transportmap", "transport_map"]
418       ]);
419
420       $("#mapnik_image_layer").text(layerKeys.has(layer) ? I18n.t(`javascripts.map.base.${layerKeys.get(layer)}`) : "");
421       $("#map_format").val(layer);
422
423       $("#map_zoom").val(map.getZoom());
424       $("#mapnik_lon").val(map.getCenter().lng);
425       $("#mapnik_lat").val(map.getCenter().lat);
426       $("#map_width").val(mapWidth);
427       $("#map_height").val(mapHeight);
428
429       if (["cyclemap", "transportmap"].includes(map.getMapBaseLayerId())) {
430         $("#export-image").show();
431         $("#mapnik_scale_row").hide();
432         $("#export-warning").hide();
433       } else if (map.getMapBaseLayerId() === "mapnik") {
434         $("#export-image").show();
435         $("#mapnik_scale_row").show();
436         $("#export-warning").hide();
437       } else {
438         $("#export-image").hide();
439         $("#export-warning").show();
440       }
441     }
442
443     function select() {
444       $(this).select();
445     }
446
447     function getScale() {
448       var bounds = map.getBounds(),
449           centerLat = bounds.getCenter().lat,
450           halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
451           meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
452           pixelsPerMeter = map.getSize().x / meters,
453           metersPerPixel = 1 / (92 * 39.3701);
454       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
455     }
456
457     function roundScale(scale) {
458       var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
459       return precision * Math.ceil(scale / precision);
460     }
461   };
462
463   return control;
464 };