X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/87e8cf3b5860509c0344cb34ee939ae73ea99c00..c30f20122d1f2f0f49240aae17d1233dd745e1e5:/app/assets/javascripts/index/export.js?ds=sidebyside diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js index ae1871b50..417dfabd3 100644 --- a/app/assets/javascripts/index/export.js +++ b/app/assets/javascripts/index/export.js @@ -1,318 +1,284 @@ -function startExport(sidebarHtml) { - var vectors, - box, - transform, - markerLayer, - markerControl, - epsg4326 = new OpenLayers.Projection("EPSG:4326"), - epsg900913 = new OpenLayers.Projection("EPSG:900913"); - - vectors = new OpenLayers.Layer.Vector("Vector Layer", { - displayInLayerSwitcher: false +function initializeExport(map) { + $("#exportanchor").click(function (e) { + $.ajax({ url: $(this).data('url'), success: function (sidebarHtml) { + startExport(sidebarHtml); + }}); + e.preventDefault(); }); - 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); - transform = new OpenLayers.Control.TransformFeature(vectors, { - rotate: false, - irregular: true - }); - transform.events.register("transformcomplete", transform, transformComplete); - map.addControl(transform); + if (window.location.pathname == "/export") { + $("#exportanchor").click(); + } - map.events.register("moveend", map, mapMoved); - map.events.register("changebaselayer", map, htmlUrlChanged); + function startExport(sidebarHtml) { + var marker; - $("#sidebar_title").html(I18n.t('export.start_rjs.export')); - $("#sidebar_content").html(sidebarHtml); + var locationFilter = new L.LocationFilter({ + enableButton: false, + adjustButton: false + }).addTo(map); - $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged); + locationFilter.on("change", filterChanged); - $("#drag_box").click(startDrag); + map.on("moveend", mapMoved); + map.on("baselayerchange", htmlUrlChanged); - $("#add_marker").click(startMarker); + $("#sidebar_title").html(I18n.t('export.start_rjs.export')); + $("#sidebar_content").html(sidebarHtml); - $("#format_osm,#format_mapnik,#format_html").click(formatChanged); + $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged); - $("#mapnik_scale").change(mapnikSizeChanged); + $("#drag_box").click(enableFilter); - openSidebar(); + $("#add_marker").click(startMarker); - if (map.baseLayer.name == "Mapnik") { - $("#format_mapnik").prop("checked", true); - } + $("#format_osm,#format_mapnik,#format_html").click(formatChanged); - formatChanged(); - setBounds(map.getExtent()); + $("#mapnik_scale").change(mapnikSizeChanged); - $("body").removeClass("site-index").addClass("site-export"); + openSidebar(); - $("#sidebar").one("closed", function () { - $("body").removeClass("site-export").addClass("site-index"); + if (map.getMapBaseLayerId() == "mapnik") { + $("#format_mapnik").prop("checked", true); + } - clearBox(); - clearMarker(); - map.events.unregister("moveend", map, mapMoved); - map.events.unregister("changebaselayer", map, htmlUrlChanged); - map.removeLayer(vectors); - }); + setBounds(map.getBounds()); + formatChanged(); - function getMercatorBounds() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), - $("#maxlon").val(), $("#maxlat").val()); + $("body").removeClass("site-index").addClass("site-export"); - return bounds.transform(epsg4326, epsg900913); - } + $("#sidebar").one("closed", function () { + $("body").removeClass("site-export").addClass("site-index"); - function boundsChanged() { - var bounds = getMercatorBounds(); + map.removeLayer(locationFilter); + clearMarker(); - map.events.unregister("moveend", map, mapMoved); - map.zoomToExtent(bounds); + map.off("moveend", mapMoved); + map.off("baselayerchange", htmlUrlChanged); + locationFilter.off("change", filterChanged); + }); - clearBox(); - drawBox(bounds); + function getBounds() { + return L.latLngBounds(L.latLng($("#minlat").val(), $("#minlon").val()), + L.latLng($("#maxlat").val(), $("#maxlon").val())); + } - validateControls(); - mapnikSizeChanged(); - } + 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 startDrag() { - $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box')); + function getMercatorBounds() { + var bounds = getBounds(); + return L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()), + L.CRS.EPSG3857.project(bounds.getNorthEast())); + } - clearBox(); - box.activate(); - }; + function boundsChanged() { + var bounds = getBounds(); - function endDrag(bbox) { - var bounds = bbox.getBounds(); + map.fitBounds(bounds); + locationFilter.setBounds(bounds); - map.events.unregister("moveend", map, mapMoved); - setBounds(bounds); - drawBox(bounds); - box.deactivate(); - validateControls(); + enableFilter(); + validateControls(); + mapnikSizeChanged(); + } - $("#drag_box").html(I18n.t('export.start_rjs.manually_select')); - } + function enableFilter() { + if (!locationFilter.getBounds().isValid()) { + locationFilter.setBounds(map.getBounds().pad(-0.2)); + } - function transformComplete(event) { - setBounds(event.feature.geometry.bounds); - validateControls(); - } + $("#drag_box").hide(); + locationFilter.enable(); + } - 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 }); + function filterChanged() { + setBounds(locationFilter.getBounds()); + validateControls(); } - markerLayer.destroyFeatures(); - markerControl.activate(); + function startMarker() { + $("#add_marker").html(I18n.t('export.start_rjs.click_add_marker')); - return false; - } + map.on("click", endMarker); - function endMarker(event) { - markerControl.deactivate(); + return false; + } - $("#add_marker").html(I18n.t('export.start_rjs.change_marker')); - $("#marker_inputs").show(); + function endMarker(event) { + map.off("click", endMarker); - var geom = event.feature.geometry.clone().transform(epsg900913, epsg4326); + $("#add_marker").html(I18n.t('export.start_rjs.change_marker')); + $("#marker_inputs").show(); - $("#marker_lon").val(geom.x.toFixed(5)); - $("#marker_lat").val(geom.y.toFixed(5)); + var latlng = event.latlng; - htmlUrlChanged(); - } + if (marker) { + map.removeLayer(marker); + } - function clearMarker() { - $("#marker_lon,#marker_lat").val(""); - $("#marker_inputs").hide(); - $("#add_marker").html(I18n.t('export.start_rjs.add_marker')); + marker = L.marker(latlng).addTo(map); - if (markerLayer) { - markerControl.destroy(); - markerLayer.destroy(); - markerLayer = null; - markerControl = null; - } - } + $("#marker_lon").val(latlng.lng.toFixed(5)); + $("#marker_lat").val(latlng.lat.toFixed(5)); - function mapMoved() { - setBounds(map.getExtent()); - validateControls(); - } + htmlUrlChanged(); + } - function setBounds(bounds) { - var toPrecision = zoomPrecision(map.getZoom()); + function clearMarker() { + $("#marker_lon,#marker_lat").val(""); + $("#marker_inputs").hide(); + $("#add_marker").html(I18n.t('export.start_rjs.add_marker')); - bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326); + if (marker) { + map.removeLayer(marker); + } + } - $("#minlon").val(toPrecision(bounds.left)); - $("#minlat").val(toPrecision(bounds.bottom)); - $("#maxlon").val(toPrecision(bounds.right)); - $("#maxlat").val(toPrecision(bounds.top)); + function mapMoved() { + if (!locationFilter.isEnabled()) { + setBounds(map.getBounds()); + validateControls(); + } + } - mapnikSizeChanged(); - htmlUrlChanged(); - } + function setBounds(bounds) { + var toPrecision = zoomPrecision(map.getZoom()); - function clearBox() { - transform.deactivate(); - vectors.destroyFeatures(); - } + $("#minlon").val(toPrecision(bounds.getWest())); + $("#minlat").val(toPrecision(bounds.getSouth())); + $("#maxlon").val(toPrecision(bounds.getEast())); + $("#maxlat").val(toPrecision(bounds.getNorth())); - function drawBox(bounds) { - var feature = new OpenLayers.Feature.Vector(bounds.toGeometry()); + mapnikSizeChanged(); + htmlUrlChanged(); + } - vectors.addFeatures(feature); - transform.setFeature(feature); - } + function validateControls() { + var bounds = getBounds(); - function validateControls() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); + var tooLarge = bounds.getSize() > OSM.MAX_REQUEST_AREA; + if (tooLarge) { + $("#export_osm_too_large").show(); + } else { + $("#export_osm_too_large").hide(); + } - if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) { - $("#export_osm_too_large").show(); - } else { - $("#export_osm_too_large").hide(); - } + var max_scale = maxMapnikScale(); + var disabled = true; - var max_scale = maxMapnikScale(); - var disabled = true; + if ($("#format_osm").prop("checked")) { + disabled = tooLarge; + } else if ($("#format_mapnik").prop("checked")) { + disabled = $("#mapnik_scale").val() < max_scale; + } - if ($("#format_osm").prop("checked")) { - disabled = bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA; - } else if ($("#format_mapnik").prop("checked")) { - disabled = $("#mapnik_scale").val() < max_scale; + $("#export_commit").prop("disabled", disabled); + $("#mapnik_max_scale").html(roundScale(max_scale)); } - $("#export_commit").prop("disabled", disabled); - $("#mapnik_max_scale").html(roundScale(max_scale)); - } + function htmlUrlChanged() { + var bounds = getBounds(); + var layerName = map.getMapBaseLayerId(); - 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 markerUrl = ""; + var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBoxString() + "&layer=" + layerName; + var markerUrl = ""; - if ($("#marker_lat").val() && $("#marker_lon").val()) { - markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val(); - url += "&marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val(); - } + if ($("#marker_lat").val() && $("#marker_lon").val()) { + markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val(); + url += "&marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val(); + } - var html = ''; + var html = ''; - // Create "larger map" link - var center = bounds.getCenterLonLat(); + // Create "larger map" link + var center = bounds.getCenter(); - bounds.transform(epsg4326, epsg900913); - var zoom = map.getZoomForExtent(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 = []; + var text = I18n.t('export.start_rjs.view_larger_map'); + var escaped = []; - for (var i = 0; i < text.length; ++i) { - var c = text.charCodeAt(i); - escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";"); - } + for (var i = 0; i < text.length; ++i) { + var c = text.charCodeAt(i); + escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";"); + } - html += '
'+escaped.join("")+''; + html += '
'+escaped.join("")+''; - $("#export_html_text").val(html); + $("#export_html_text").val(html); - if ($("#format_html").prop("checked")) { - $("#export_html_text").prop("selected", true); + if ($("#format_html").prop("checked")) { + $("#export_html_text").prop("selected", true); + } } - } - function formatChanged() { - $("#export_commit").show(); + function formatChanged() { + $("#export_commit").show(); - if ($("#format_osm").prop("checked")) { - $("#export_osm").show(); - } else { - $("#export_osm").hide(); - } + if ($("#format_osm").prop("checked")) { + $("#export_osm").show(); + } else { + $("#export_osm").hide(); + } - if ($("#format_mapnik").prop("checked")) { - $("#mapnik_scale").val(roundScale(map.getScale())); - $("#export_mapnik").show(); + if ($("#format_mapnik").prop("checked")) { + $("#mapnik_scale").val(getScale()); + $("#export_mapnik").show(); - mapnikSizeChanged(); - } else { - $("#export_mapnik").hide(); - } + mapnikSizeChanged(); + } else { + $("#export_mapnik").hide(); + } - if ($("#format_html").prop("checked")) { - $("#export_html").show(); - $("#export_commit").hide(); - $("#export_html_text").prop("selected", true); - } else { - $("#export_html").hide(); + if ($("#format_html").prop("checked")) { + $("#export_html").show(); + $("#export_commit").hide(); + $("#export_html_text").prop("selected", true); + } else { + $("#export_html").hide(); - clearMarker(); - } + clearMarker(); + } - validateControls(); - } + validateControls(); + } - function maxMapnikScale() { - var bounds = getMercatorBounds(); + function maxMapnikScale() { + 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(); + function mapnikImageSize(scale) { + 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) { - var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2); + function roundScale(scale) { + var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2); - return precision * Math.ceil(scale / precision); - } + return precision * Math.ceil(scale / precision); + } - function mapnikSizeChanged() { - var size = mapnikImageSize($("#mapnik_scale").val()); + function mapnikSizeChanged() { + var size = mapnikImageSize($("#mapnik_scale").val()); - $("#mapnik_image_width").html(size.w); - $("#mapnik_image_height").html(size.h); + $("#mapnik_image_width").html(size.w); + $("#mapnik_image_height").html(size.h); - validateControls(); + validateControls(); + } } }