X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/24c0bb1c88e1fca8ac1624bc909596926c2b53fa..c71209507bbc80c3e90006e67b93388b61fd0336:/app/assets/javascripts/index/export.js diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js index 8696338ab..417dfabd3 100644 --- a/app/assets/javascripts/index/export.js +++ b/app/assets/javascripts/index/export.js @@ -1,4 +1,4 @@ -$(document).ready(function () { +function initializeExport(map) { $("#exportanchor").click(function (e) { $.ajax({ url: $(this).data('url'), success: function (sidebarHtml) { startExport(sidebarHtml); @@ -11,44 +11,24 @@ $(document).ready(function () { } function startExport(sidebarHtml) { - var vectors, - box, - transform, - markerLayer, - markerControl; - - vectors = new OpenLayers.Layer.Vector("Vector Layer", { - displayInLayerSwitcher: false - }); - map.addLayer(vectors); - - box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { - handlerOptions: { - sides: 4, - snapAngle: 90, - irregular: true, - persist: true - } - }); - box.handler.callbacks.done = endDrag; - map.addControl(box); + var marker; - transform = new OpenLayers.Control.TransformFeature(vectors, { - rotate: false, - irregular: true - }); - transform.events.register("transformcomplete", transform, transformComplete); - map.addControl(transform); + var locationFilter = new L.LocationFilter({ + enableButton: false, + adjustButton: false + }).addTo(map); - map.events.register("moveend", map, mapMoved); - map.events.register("changebaselayer", map, htmlUrlChanged); + locationFilter.on("change", filterChanged); + + map.on("moveend", mapMoved); + map.on("baselayerchange", htmlUrlChanged); $("#sidebar_title").html(I18n.t('export.start_rjs.export')); $("#sidebar_content").html(sidebarHtml); $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged); - $("#drag_box").click(startDrag); + $("#drag_box").click(enableFilter); $("#add_marker").click(startMarker); @@ -58,107 +38,96 @@ $(document).ready(function () { openSidebar(); - if (map.baseLayer.name == "Mapnik") { + if (map.getMapBaseLayerId() == "mapnik") { $("#format_mapnik").prop("checked", true); } + setBounds(map.getBounds()); formatChanged(); - setBounds(map.getExtent()); $("body").removeClass("site-index").addClass("site-export"); $("#sidebar").one("closed", function () { $("body").removeClass("site-export").addClass("site-index"); - clearBox(); + map.removeLayer(locationFilter); clearMarker(); - map.events.unregister("moveend", map, mapMoved); - map.events.unregister("changebaselayer", map, htmlUrlChanged); - map.removeLayer(vectors); + + map.off("moveend", mapMoved); + map.off("baselayerchange", htmlUrlChanged); + locationFilter.off("change", filterChanged); }); - function getMercatorBounds() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), - $("#maxlon").val(), $("#maxlat").val()); + function getBounds() { + return L.latLngBounds(L.latLng($("#minlat").val(), $("#minlon").val()), + L.latLng($("#maxlat").val(), $("#maxlon").val())); + } - return proj(bounds); + 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 boundsChanged() { - var bounds = getMercatorBounds(); + function getMercatorBounds() { + var bounds = getBounds(); + return L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()), + L.CRS.EPSG3857.project(bounds.getNorthEast())); + } - map.events.unregister("moveend", map, mapMoved); - map.zoomToExtent(bounds); + function boundsChanged() { + var bounds = getBounds(); - clearBox(); - drawBox(bounds); + map.fitBounds(bounds); + locationFilter.setBounds(bounds); + enableFilter(); validateControls(); mapnikSizeChanged(); } - function startDrag() { - $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box')); - - clearBox(); - box.activate(); - }; - - function endDrag(bbox) { - var bounds = bbox.getBounds(); - - map.events.unregister("moveend", map, mapMoved); - setBounds(bounds); - drawBox(bounds); - box.deactivate(); - validateControls(); + function enableFilter() { + if (!locationFilter.getBounds().isValid()) { + locationFilter.setBounds(map.getBounds().pad(-0.2)); + } - $("#drag_box").html(I18n.t('export.start_rjs.manually_select')); + $("#drag_box").hide(); + locationFilter.enable(); } - function transformComplete(event) { - setBounds(event.feature.geometry.bounds); + function filterChanged() { + setBounds(locationFilter.getBounds()); validateControls(); } function startMarker() { $("#add_marker").html(I18n.t('export.start_rjs.click_add_marker')); - if (!markerLayer) { - markerLayer = new OpenLayers.Layer.Vector("",{ - displayInLayerSwitcher: false, - style: { - externalGraphic: OpenLayers.Util.getImageLocation("marker.png"), - graphicXOffset: -10.5, - graphicYOffset: -25, - graphicWidth: 21, - graphicHeight: 25 - } - }); - map.addLayer(markerLayer); - - markerControl = new OpenLayers.Control.DrawFeature(markerLayer, OpenLayers.Handler.Point); - map.addControl(markerControl); - - markerLayer.events.on({ "featureadded": endMarker }); - } - - markerLayer.destroyFeatures(); - markerControl.activate(); + map.on("click", endMarker); return false; } function endMarker(event) { - markerControl.deactivate(); + map.off("click", endMarker); $("#add_marker").html(I18n.t('export.start_rjs.change_marker')); $("#marker_inputs").show(); - var geom = unproj(event.feature.geometry); + var latlng = event.latlng; + + if (marker) { + map.removeLayer(marker); + } + + marker = L.marker(latlng).addTo(map); - $("#marker_lon").val(geom.x.toFixed(5)); - $("#marker_lat").val(geom.y.toFixed(5)); + $("#marker_lon").val(latlng.lng.toFixed(5)); + $("#marker_lat").val(latlng.lat.toFixed(5)); htmlUrlChanged(); } @@ -168,49 +137,35 @@ $(document).ready(function () { $("#marker_inputs").hide(); $("#add_marker").html(I18n.t('export.start_rjs.add_marker')); - if (markerLayer) { - markerControl.destroy(); - markerLayer.destroy(); - markerLayer = null; - markerControl = null; + if (marker) { + map.removeLayer(marker); } } function mapMoved() { - setBounds(map.getExtent()); - validateControls(); + if (!locationFilter.isEnabled()) { + setBounds(map.getBounds()); + validateControls(); + } } function setBounds(bounds) { var toPrecision = zoomPrecision(map.getZoom()); - bounds = unproj(bounds); - - $("#minlon").val(toPrecision(bounds.left)); - $("#minlat").val(toPrecision(bounds.bottom)); - $("#maxlon").val(toPrecision(bounds.right)); - $("#maxlat").val(toPrecision(bounds.top)); + $("#minlon").val(toPrecision(bounds.getWest())); + $("#minlat").val(toPrecision(bounds.getSouth())); + $("#maxlon").val(toPrecision(bounds.getEast())); + $("#maxlat").val(toPrecision(bounds.getNorth())); mapnikSizeChanged(); htmlUrlChanged(); } - function clearBox() { - transform.deactivate(); - vectors.destroyFeatures(); - } - - function drawBox(bounds) { - var feature = new OpenLayers.Feature.Vector(bounds.toGeometry()); - - vectors.addFeatures(feature); - transform.setFeature(feature); - } - function validateControls() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); + var bounds = getBounds(); - if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) { + var tooLarge = bounds.getSize() > OSM.MAX_REQUEST_AREA; + if (tooLarge) { $("#export_osm_too_large").show(); } else { $("#export_osm_too_large").hide(); @@ -220,7 +175,7 @@ $(document).ready(function () { var disabled = true; if ($("#format_osm").prop("checked")) { - disabled = bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA; + disabled = tooLarge; } else if ($("#format_mapnik").prop("checked")) { disabled = $("#mapnik_scale").val() < max_scale; } @@ -230,9 +185,10 @@ $(document).ready(function () { } function htmlUrlChanged() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); - var layerName = map.baseLayer.keyid; - var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&layer=" + layerName; + var bounds = getBounds(); + var layerName = map.getMapBaseLayerId(); + + var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBoxString() + "&layer=" + layerName; var markerUrl = ""; if ($("#marker_lat").val() && $("#marker_lon").val()) { @@ -243,11 +199,11 @@ $(document).ready(function () { var html = ''; // Create "larger map" link - var center = bounds.getCenterLonLat(); + var center = bounds.getCenter(); - var zoom = map.getZoomForExtent(proj(bounds)); + var zoom = map.getBoundsZoom(bounds); - var layers = getMapLayers(); + var layers = map.getLayersCode(); var text = I18n.t('export.start_rjs.view_larger_map'); var escaped = []; @@ -257,7 +213,7 @@ $(document).ready(function () { escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";"); } - html += '
'+escaped.join("")+''; + html += '
'+escaped.join("")+''; $("#export_html_text").val(html); @@ -276,7 +232,7 @@ $(document).ready(function () { } if ($("#format_mapnik").prop("checked")) { - $("#mapnik_scale").val(roundScale(map.getScale())); + $("#mapnik_scale").val(getScale()); $("#export_mapnik").show(); mapnikSizeChanged(); @@ -298,16 +254,16 @@ $(document).ready(function () { } function maxMapnikScale() { - var bounds = getMercatorBounds(); + var size = getMercatorBounds().getSize(); - return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136)); + return Math.floor(Math.sqrt(size.x * size.y / 0.3136)); } function mapnikImageSize(scale) { - var bounds = getMercatorBounds(); + var size = getMercatorBounds().getSize(); - return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028), - Math.round(bounds.getHeight() / scale / 0.00028)); + return {w: Math.round(size.x / scale / 0.00028), + h: Math.round(size.y / scale / 0.00028)}; } function roundScale(scale) { @@ -325,4 +281,4 @@ $(document).ready(function () { validateControls(); } } -}); +}