X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/68a46f24522786b535809b0846d0bb6502c97406..0a98d08885bff899ed9e8fe2008ba26b7b13469a:/app/assets/javascripts/leaflet.share.js diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index f261a9d72..b92d70796 100644 --- a/app/assets/javascripts/leaflet.share.js +++ b/app/assets/javascripts/leaflet.share.js @@ -1,74 +1,416 @@ L.OSM.share = function (options) { - var control = L.control(options); - - control.onAdd = function (map) { - var $container = $('
") + .attr("class", "text-body-secondary") + .text(I18n.t("javascripts.share.paste_html"))); - var $linkSection = $('') - .attr('class', 'share-link') + // Geo URI + + var $geoUriSection = $("") + .attr("class", "share-geo-uri p-3 border-bottom border-secondary-subtle") .appendTo($ui); - $('') - .text(I18n.t('javascripts.share.link')) - .appendTo($linkSection); + $("") + .text(I18n.t("javascripts.share.geo_uri")) + .appendTo($geoUriSection); + + $("") + .appendTo($geoUriSection) + .append($("") + .attr("id", "geo_uri")); + + // Image + + var $imageSection = $("") + .attr("class", "share-image p-3") + .appendTo($ui); - var $shortLink, $longLink; + $("") + .text(I18n.t("javascripts.share.image")) + .appendTo($imageSection); - $('') - .appendTo($linkSection) - .append($('') - .append($longLink = $('') - .text(I18n.t('javascripts.share.long_link')))) - .append($('') - .append($shortLink = $('') - .text(I18n.t('javascripts.share.short_link')))); + $("") + .attr("id", "export-warning") + .attr("class", "text-body-secondary") + .text(I18n.t("javascripts.share.only_standard_layer")) + .appendTo($imageSection); - map.on('moveend layeradd layerremove', update); + $form = $("") + .attr("id", "export-image") + .attr("action", "/export/finish") + .attr("method", "post") + .appendTo($imageSection); - options.sidebar.addPane($ui); + $("") + .appendTo($form) + .attr("class", "row mb-3") + .append($("") + .attr("for", "mapnik_format") + .attr("class", "col-auto col-form-label") + .text(I18n.t("javascripts.share.format"))) + .append($("") + .attr("class", "col-auto") + .append($("") + .attr("name", "mapnik_format") + .attr("id", "mapnik_format") + .attr("class", "form-select w-auto") + .append($("").val("png").text("PNG").prop("selected", true)) + .append($("").val("jpeg").text("JPEG")) + .append($("").val("svg").text("SVG")) + .append($("").val("pdf").text("PDF")))); - function toggle(e) { - e.stopPropagation(); - e.preventDefault(); - options.sidebar.togglePane($ui); + $("") + .appendTo($form) + .attr("class", "row mb-3") + .append($("") + .attr("for", "mapnik_scale") + .attr("class", "col-auto col-form-label") + .text(I18n.t("javascripts.share.scale"))) + .append($("") + .attr("class", "col-auto") + .append($("") + .attr("class", "input-group flex-nowrap") + .append($("") + .attr("class", "input-group-text") + .text("1 : ")) + .append($("") + .attr("name", "mapnik_scale") + .attr("id", "mapnik_scale") + .attr("type", "text") + .attr("class", "form-control") + .on("change", update)))); + + $("") + .attr("class", "row mb-3") + .appendTo($form) + .append($("") + .attr("class", "col-auto") + .append($("") + .attr("class", "form-check") + .append($("") + .attr("for", "image_filter") + .attr("class", "form-check-label") + .text(I18n.t("javascripts.share.custom_dimensions"))) + .append($("") + .attr("id", "image_filter") + .attr("type", "checkbox") + .attr("class", "form-check-input") + .bind("change", toggleFilter)))); + + ["minlon", "minlat", "maxlon", "maxlat"].forEach(function (name) { + $("") + .attr("id", "mapnik_" + name) + .attr("name", name) + .attr("type", "hidden") + .appendTo($form); + }); + + $("") + .attr("name", "format") + .attr("value", "mapnik") + .attr("type", "hidden") + .appendTo($form); + + var csrf_param = $("meta[name=csrf-param]").attr("content"), + csrf_token = $("meta[name=csrf-token]").attr("content"); + + $("") + .attr("name", csrf_param) + .attr("value", csrf_token) + .attr("type", "hidden") + .appendTo($form); + + var args = { + width: "", + height: "" + }; + + $("") + .attr("class", "text-body-secondary") + .html(I18n.t("javascripts.share.image_dimensions", args)) + .appendTo($form); + + $("") + .attr("type", "submit") + .attr("class", "btn btn-primary") + .attr("value", I18n.t("javascripts.share.download")) + .appendTo($form); + + locationFilter + .on("change", update) + .addTo(map); + + marker.on("dragend", movedMarker); + map.on("move", movedMap); + map.on("moveend layeradd layerremove", update); + + $ui + .on("show", shown) + .on("hide", hidden); + + function shown() { + $("#mapnik_scale").val(getScale()); + update(); + } + + function hidden() { + map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; + locationFilter.disable(); update(); } + function toggleMarker() { + if ($(this).is(":checked")) { + marker.setLatLng(map.getCenter()); + map.addLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = "center"; + } else { + map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; + } + update(); + } + + function toggleFilter() { + if ($(this).is(":checked")) { + locationFilter.setBounds(map.getBounds().pad(-0.2)); + locationFilter.enable(); + } else { + locationFilter.disable(); + } + update(); + } + + function movedMap() { + marker.setLatLng(map.getCenter()); + update(); + } + + function movedMarker() { + if (map.hasLayer(marker)) { + map.off("move", movedMap); + map.on("moveend", updateOnce); + map.panTo(marker.getLatLng()); + } + } + + function updateOnce() { + map.off("moveend", updateOnce); + map.on("move", movedMap); + update(); + } + + function escapeHTML(string) { + var htmlEscapes = { + "&": "&", + "<": "<", + ">": ">", + "\"": """, + "'": "'" + }; + return string === null ? "" : String(string).replace(/[&<>"']/g, function (match) { + return htmlEscapes[match]; + }); + } + function update() { - $shortLink.attr('href', options.getShortUrl(map)); - $longLink.attr('href', options.getUrl(map)); + var canEmbed = map.getMapBaseLayerId() !== "tracestracktopo"; + var bounds = map.getBounds(); + + $("#link_marker") + .prop("checked", map.hasLayer(marker)); + + $("#image_filter") + .prop("checked", locationFilter.isEnabled()); + + // Link / Embed + + $("#short_input").val(map.getShortUrl(marker)); + $("#long_input").val(map.getUrl(marker)); + $("#short_link").attr("href", map.getShortUrl(marker)); + $("#long_link").attr("href", map.getUrl(marker)); + + var params = { + bbox: bounds.toBBoxString(), + layer: map.getMapBaseLayerId() + }; + + if (map.hasLayer(marker)) { + var latLng = marker.getLatLng().wrap(); + params.marker = latLng.lat + "," + latLng.lng; + } + + $("#embed_link") + .toggleClass("btn-primary", canEmbed) + .toggleClass("btn-secondary", !canEmbed) + .tooltip(canEmbed ? "disable" : "enable"); + if (!canEmbed && $("#embed_link").hasClass("active")) { + $("#long_link").click(); + } + + $("#embed_html").val( + "" + + "" + + escapeHTML(I18n.t("javascripts.share.view_larger_map")) + ""); + + // Geo URI + + $("#geo_uri") + .attr("href", map.getGeoUri(marker)) + .html(map.getGeoUri(marker)); + + // Image + + if (locationFilter.isEnabled()) { + 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)); + + $("#mapnik_minlon").val(bounds.getWest()); + $("#mapnik_minlat").val(bounds.getSouth()); + $("#mapnik_maxlon").val(bounds.getEast()); + $("#mapnik_maxlat").val(bounds.getNorth()); + + if (scale < maxScale) { + scale = roundScale(maxScale); + $("#mapnik_scale").val(scale); + } + + $("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028)); + $("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028)); + + if (map.getMapBaseLayerId() === "mapnik") { + $("#export-image").show(); + $("#export-warning").hide(); + } else { + $("#export-image").hide(); + $("#export-warning").show(); + } } function select() { $(this).select(); } - return $container[0]; + 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); + return Math.round(1 / (pixelsPerMeter * metersPerPixel)); + } + + function roundScale(scale) { + var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2); + return precision * Math.ceil(scale / precision); + } }; return control;
") + .attr("class", "text-body-secondary") + .html(I18n.t("javascripts.share.image_dimensions", args)) + .appendTo($form); + + $("") + .attr("type", "submit") + .attr("class", "btn btn-primary") + .attr("value", I18n.t("javascripts.share.download")) + .appendTo($form); + + locationFilter + .on("change", update) + .addTo(map); + + marker.on("dragend", movedMarker); + map.on("move", movedMap); + map.on("moveend layeradd layerremove", update); + + $ui + .on("show", shown) + .on("hide", hidden); + + function shown() { + $("#mapnik_scale").val(getScale()); + update(); + } + + function hidden() { + map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; + locationFilter.disable(); update(); } + function toggleMarker() { + if ($(this).is(":checked")) { + marker.setLatLng(map.getCenter()); + map.addLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = "center"; + } else { + map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; + } + update(); + } + + function toggleFilter() { + if ($(this).is(":checked")) { + locationFilter.setBounds(map.getBounds().pad(-0.2)); + locationFilter.enable(); + } else { + locationFilter.disable(); + } + update(); + } + + function movedMap() { + marker.setLatLng(map.getCenter()); + update(); + } + + function movedMarker() { + if (map.hasLayer(marker)) { + map.off("move", movedMap); + map.on("moveend", updateOnce); + map.panTo(marker.getLatLng()); + } + } + + function updateOnce() { + map.off("moveend", updateOnce); + map.on("move", movedMap); + update(); + } + + function escapeHTML(string) { + var htmlEscapes = { + "&": "&", + "<": "<", + ">": ">", + "\"": """, + "'": "'" + }; + return string === null ? "" : String(string).replace(/[&<>"']/g, function (match) { + return htmlEscapes[match]; + }); + } + function update() { - $shortLink.attr('href', options.getShortUrl(map)); - $longLink.attr('href', options.getUrl(map)); + var canEmbed = map.getMapBaseLayerId() !== "tracestracktopo"; + var bounds = map.getBounds(); + + $("#link_marker") + .prop("checked", map.hasLayer(marker)); + + $("#image_filter") + .prop("checked", locationFilter.isEnabled()); + + // Link / Embed + + $("#short_input").val(map.getShortUrl(marker)); + $("#long_input").val(map.getUrl(marker)); + $("#short_link").attr("href", map.getShortUrl(marker)); + $("#long_link").attr("href", map.getUrl(marker)); + + var params = { + bbox: bounds.toBBoxString(), + layer: map.getMapBaseLayerId() + }; + + if (map.hasLayer(marker)) { + var latLng = marker.getLatLng().wrap(); + params.marker = latLng.lat + "," + latLng.lng; + } + + $("#embed_link") + .toggleClass("btn-primary", canEmbed) + .toggleClass("btn-secondary", !canEmbed) + .tooltip(canEmbed ? "disable" : "enable"); + if (!canEmbed && $("#embed_link").hasClass("active")) { + $("#long_link").click(); + } + + $("#embed_html").val( + "" + + "" + + escapeHTML(I18n.t("javascripts.share.view_larger_map")) + ""); + + // Geo URI + + $("#geo_uri") + .attr("href", map.getGeoUri(marker)) + .html(map.getGeoUri(marker)); + + // Image + + if (locationFilter.isEnabled()) { + 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)); + + $("#mapnik_minlon").val(bounds.getWest()); + $("#mapnik_minlat").val(bounds.getSouth()); + $("#mapnik_maxlon").val(bounds.getEast()); + $("#mapnik_maxlat").val(bounds.getNorth()); + + if (scale < maxScale) { + scale = roundScale(maxScale); + $("#mapnik_scale").val(scale); + } + + $("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028)); + $("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028)); + + if (map.getMapBaseLayerId() === "mapnik") { + $("#export-image").show(); + $("#export-warning").hide(); + } else { + $("#export-image").hide(); + $("#export-warning").show(); + } } function select() { $(this).select(); } - return $container[0]; + 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); + return Math.round(1 / (pixelsPerMeter * metersPerPixel)); + } + + function roundScale(scale) { + var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2); + return precision * Math.ceil(scale / precision); + } }; return control;