X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/438e8be102a2ac4c0e92041da2866f1339715b40..d69ae84963466634cf518a4f1ec38bf914663ed0:/app/assets/javascripts/leaflet.share.js diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index 7880abe14..7b1c995c2 100644 --- a/app/assets/javascripts/leaflet.share.js +++ b/app/assets/javascripts/leaflet.share.js @@ -1,219 +1,255 @@ L.OSM.share = function (options) { - var control = L.control(options), - marker = L.marker([0, 0], {draggable: true}), - locationFilter = new L.LocationFilter({ - enableButton: false, - adjustButton: false - }); - - control.onAdd = function (map) { - var $container = $('
") + .attr("class", "text-muted") + .text(I18n.t("javascripts.share.paste_html"))); + + // Geo URI + + var $geoUriSection = $("
') - .attr('class', 'deemphasize') - .text(I18n.t('javascripts.share.paste_html')) - .appendTo($embedSection); + $("
') - .attr('class', 'deemphasize') - .html(I18n.t('javascripts.share.image_size') + ' x ') + 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); - $('') - .attr('type', 'submit') - .attr('value', I18n.t('javascripts.share.download')) + var args = { + width: "", + height: "" + }; + + $("
") + .attr("class", "text-muted") + .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) + .on("change", update) .addTo(map); - map.on('moveend layeradd layerremove', update); - - options.sidebar.addPane($ui); + marker.on("dragend", movedMarker); + map.on("move", movedMap); + map.on("moveend layeradd layerremove", update); - function toggle(e) { - e.stopPropagation(); - e.preventDefault(); + $ui + .on("show", shown) + .on("hide", hidden); - $('#mapnik_scale').val(getScale()); - marker.setLatLng(map.getCenter()); + function shown() { + $("#mapnik_scale").val(getScale()); + update(); + } + function hidden() { + map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; + locationFilter.disable(); update(); - options.sidebar.togglePane($ui); } function toggleMarker() { - if ($(this).is(':checked')) { + 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')) { - if (!locationFilter.getBounds().isValid()) { - locationFilter.setBounds(map.getBounds().pad(-0.2)); - } - + if ($(this).is(":checked")) { + locationFilter.setBounds(map.getBounds().pad(-0.2)); locationFilter.enable(); } else { locationFilter.disable(); @@ -221,41 +257,76 @@ L.OSM.share = function (options) { 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() { - // Link + var bounds = map.getBounds(); - $shortLink.attr('href', map.getShortUrl()); - $longLink.attr('href', map.getUrl()); + $("#link_marker") + .prop("checked", map.hasLayer(marker)); - // Embed + $("#image_filter") + .prop("checked", locationFilter.isEnabled()); - var bounds = map.getBounds(), - center = bounds.getCenter(), - params = { - bbox: bounds.toBBoxString(), - layer: map.getMapBaseLayerId() - }, - linkParams = { - lat: center.lat, - lon: center.lng, - zoom: map.getBoundsZoom(bounds), - layers: map.getLayersCode() - }; + // 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 m = marker.getLatLng(); - params.marker = m.lat + ',' + m.lng; - linkParams.mlat = m.lat; - linkParams.mlon = m.lng; + var latLng = marker.getLatLng().wrap(); + params.marker = latLng.lat + "," + latLng.lng; } - $('#embed_html').val( - '' + - '' + I18n.t('export.start_rjs.view_larger_map') + ''); + $("#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 @@ -264,14 +335,14 @@ L.OSM.share = function (options) { } 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)); + 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()); + $("#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); @@ -280,6 +351,14 @@ L.OSM.share = function (options) { $("#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() { @@ -288,11 +367,11 @@ 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); + 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)); } @@ -300,8 +379,6 @@ L.OSM.share = function (options) { var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2); return precision * Math.ceil(scale / precision); } - - return $container[0]; }; return control;