X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/cc4f133e64a1f0d963f60fb40045145a530d5dbb..7c0055b5d71ed5be84998843cbc9b082d5ded2c5:/app/assets/javascripts/export.js?ds=inline diff --git a/app/assets/javascripts/export.js b/app/assets/javascripts/export.js index bc1a87910..5debb1b07 100644 --- a/app/assets/javascripts/export.js +++ b/app/assets/javascripts/export.js @@ -1,10 +1,12 @@ -var vectors; -var box; -var transform; -var markerLayer; -var markerControl; - 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 }); @@ -34,22 +36,17 @@ function startExport(sidebarHtml) { $("#sidebar_title").html(I18n.t('export.start_rjs.export')); $("#sidebar_content").html(sidebarHtml); - $("#maxlat").change(boundsChanged); - $("#minlon").change(boundsChanged); - $("#maxlon").change(boundsChanged); - $("#minlat").change(boundsChanged); + $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged); $("#drag_box").click(startDrag); $("#add_marker").click(startMarker); - $("#format_osm").click(formatChanged); - $("#format_mapnik").click(formatChanged); - $("#format_html").click(formatChanged); + $("#format_osm,#format_mapnik,#format_html").click(formatChanged); $("#mapnik_scale").change(mapnikSizeChanged); - openSidebar({ onclose: stopExport }); + openSidebar(); if (map.baseLayer.name == "Mapnik") { $("#format_mapnik").prop("checked", true); @@ -60,273 +57,264 @@ function startExport(sidebarHtml) { $("#viewanchor").removeClass("active"); $("#exportanchor").addClass("active"); -} -function stopExport() { - $("#viewanchor").addClass("active"); - $("#exportanchor").removeClass("active"); + $("#sidebar").one("closed", function () { + $("#viewanchor").addClass("active"); + $("#exportanchor").removeClass("active"); - clearBox(); - clearMarker(); - map.events.unregister("moveend", map, mapMoved); - map.events.unregister("changebaselayer", map, htmlUrlChanged); - map.removeLayer(vectors); -} + clearBox(); + clearMarker(); + map.events.unregister("moveend", map, mapMoved); + map.events.unregister("changebaselayer", map, htmlUrlChanged); + map.removeLayer(vectors); + }); -function boundsChanged() { - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), - $("#maxlon").val(), $("#maxlat").val()); + function getMercatorBounds() { + var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), + $("#maxlon").val(), $("#maxlat").val()); - bounds.transform(epsg4326, map.getProjectionObject()); + return bounds.transform(epsg4326, epsg900913); + } - map.events.unregister("moveend", map, mapMoved); - map.zoomToExtent(bounds); + function boundsChanged() { + var bounds = getMercatorBounds(); - clearBox(); - drawBox(bounds); + map.events.unregister("moveend", map, mapMoved); + map.zoomToExtent(bounds); - validateControls(); - mapnikSizeChanged(); -} + clearBox(); + drawBox(bounds); -function startDrag() { - $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box')); + validateControls(); + mapnikSizeChanged(); + } - clearBox(); - box.activate(); -}; + function startDrag() { + $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box')); -function endDrag(bbox) { - var bounds = bbox.getBounds(); + clearBox(); + box.activate(); + }; - map.events.unregister("moveend", map, mapMoved); - setBounds(bounds); - drawBox(bounds); - box.deactivate(); - validateControls(); + function endDrag(bbox) { + var bounds = bbox.getBounds(); - $("#drag_box").html(I18n.t('export.start_rjs.manually_select')); -} + map.events.unregister("moveend", map, mapMoved); + setBounds(bounds); + drawBox(bounds); + box.deactivate(); + validateControls(); -function transformComplete(event) { - setBounds(event.feature.geometry.bounds); - validateControls(); -} + $("#drag_box").html(I18n.t('export.start_rjs.manually_select')); + } -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 transformComplete(event) { + setBounds(event.feature.geometry.bounds); + validateControls(); } - markerLayer.destroyFeatures(); - markerControl.activate(); + 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 }); + } - return false; -} + markerLayer.destroyFeatures(); + markerControl.activate(); -function endMarker(event) { - markerControl.deactivate(); + return false; + } - $("#add_marker").html(I18n.t('export.start_rjs.change_marker')); - $("#marker_inputs").show(); + function endMarker(event) { + markerControl.deactivate(); - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var epsg900913 = new OpenLayers.Projection("EPSG:900913"); - 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 geom = event.feature.geometry.clone().transform(epsg900913, epsg4326); - htmlUrlChanged(); -} + $("#marker_lon").val(geom.x.toFixed(5)); + $("#marker_lat").val(geom.y.toFixed(5)); -function clearMarker() { - $("#marker_lon").val(""); - $("#marker_lat").val(""); - $("#marker_inputs").hide(); - $("#add_marker").html(I18n.t('export.start_rjs.add_marker')); - - if (markerLayer) { - markerControl.destroy(); - markerLayer.destroy(); - markerLayer = null; - markerControl = null; + htmlUrlChanged(); } -} -function mapMoved() { - setBounds(map.getExtent()); - validateControls(); -} + function clearMarker() { + $("#marker_lon,#marker_lat").val(""); + $("#marker_inputs").hide(); + $("#add_marker").html(I18n.t('export.start_rjs.add_marker')); -function setBounds(bounds) { - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var decimals = Math.pow(10, Math.floor(map.getZoom() / 3)); + if (markerLayer) { + markerControl.destroy(); + markerLayer.destroy(); + markerLayer = null; + markerControl = null; + } + } - bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326); + function mapMoved() { + setBounds(map.getExtent()); + validateControls(); + } - $("#minlon").val(Math.round(bounds.left * decimals) / decimals); - $("#minlat").val(Math.round(bounds.bottom * decimals) / decimals); - $("#maxlon").val(Math.round(bounds.right * decimals) / decimals); - $("#maxlat").val(Math.round(bounds.top * decimals) / decimals); + function setBounds(bounds) { + var toPrecision = zoomPrecision(map.getZoom()); - mapnikSizeChanged(); - htmlUrlChanged(); -} + bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326); -function clearBox() { - transform.deactivate(); - vectors.destroyFeatures(); -} + $("#minlon").val(toPrecision(bounds.left)); + $("#minlat").val(toPrecision(bounds.bottom)); + $("#maxlon").val(toPrecision(bounds.right)); + $("#maxlat").val(toPrecision(bounds.top)); -function drawBox(bounds) { - var feature = new OpenLayers.Feature.Vector(bounds.toGeometry()); + mapnikSizeChanged(); + htmlUrlChanged(); + } - vectors.addFeatures(feature); - transform.setFeature(feature); -} + function clearBox() { + transform.deactivate(); + vectors.destroyFeatures(); + } -function validateControls() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); + function drawBox(bounds) { + var feature = new OpenLayers.Feature.Vector(bounds.toGeometry()); - if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) { - $("#export_osm_too_large").show(); - } else { - $("#export_osm_too_large").hide(); + vectors.addFeatures(feature); + transform.setFeature(feature); } - var max_scale = maxMapnikScale(); - var disabled = true; + function validateControls() { + var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); - 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; - } + if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) { + $("#export_osm_too_large").show(); + } else { + $("#export_osm_too_large").hide(); + } - $("#export_commit").prop("disabled", disabled); - $("#mapnik_max_scale").html(roundScale(max_scale)); -} + var max_scale = maxMapnikScale(); + var disabled = true; -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 = ""; + 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; + } - if ($("#marker_lat").val() && $("#marker_lon").val()) { - markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val(); - url += "&marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val(); + $("#export_commit").prop("disabled", disabled); + $("#mapnik_max_scale").html(roundScale(max_scale)); } - var html = ''; + 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 = ""; - // Create "larger map" link - var center = bounds.getCenterLonLat(); - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var epsg900913 = new OpenLayers.Projection("EPSG:900913"); + if ($("#marker_lat").val() && $("#marker_lon").val()) { + markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val(); + url += "&marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val(); + } - bounds.transform(epsg4326, epsg900913); - var zoom = map.getZoomForExtent(bounds); + var html = ''; - var layers = getMapLayers(); + // Create "larger map" link + var center = bounds.getCenterLonLat(); - var text = I18n.t('export.start_rjs.view_larger_map'); - var escaped = []; + bounds.transform(epsg4326, epsg900913); + var zoom = map.getZoomForExtent(bounds); - for (var i = 0; i < text.length; ++i) { - var c = text.charCodeAt(i); - escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";"); - } + var layers = getMapLayers(); - html += '
'+escaped.join("")+''; + var text = I18n.t('export.start_rjs.view_larger_map'); + var escaped = []; - $("#export_html_text").val(html); + for (var i = 0; i < text.length; ++i) { + var c = text.charCodeAt(i); + escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";"); + } - if ($("#format_html").prop("checked")) { - $("#export_html_text").prop("selected", true); - } -} + html += '
'+escaped.join("")+''; -function formatChanged() { - $("#export_commit").show(); + $("#export_html_text").val(html); - if ($("#format_osm").prop("checked")) { - $("#export_osm").show(); - } else { - $("#export_osm").hide(); + if ($("#format_html").prop("checked")) { + $("#export_html_text").prop("selected", true); + } } - if ($("#format_mapnik").prop("checked")) { - $("#mapnik_scale").val(roundScale(map.getScale())); - $("#export_mapnik").show(); - } else { - $("#export_mapnik").hide(); - } + function formatChanged() { + $("#export_commit").show(); - if ($("#format_html").prop("checked")) { - $("#export_html").show(); - $("#export_commit").hide(); - $("#export_html_text").prop("selected", true); - } else { - $("#export_html").hide(); + if ($("#format_osm").prop("checked")) { + $("#export_osm").show(); + } else { + $("#export_osm").hide(); + } - clearMarker(); - } + if ($("#format_mapnik").prop("checked")) { + $("#mapnik_scale").val(roundScale(map.getScale())); + $("#export_mapnik").show(); - validateControls(); -} + mapnikSizeChanged(); + } else { + $("#export_mapnik").hide(); + } -function maxMapnikScale() { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var epsg900913 = new OpenLayers.Projection("EPSG:900913"); + if ($("#format_html").prop("checked")) { + $("#export_html").show(); + $("#export_commit").hide(); + $("#export_html_text").prop("selected", true); + } else { + $("#export_html").hide(); - bounds.transform(epsg4326, epsg900913); + clearMarker(); + } - return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136)); -} + validateControls(); + } -function mapnikImageSize(scale) { - var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val()); - var epsg4326 = new OpenLayers.Projection("EPSG:4326"); - var epsg900913 = new OpenLayers.Projection("EPSG:900913"); + function maxMapnikScale() { + var bounds = getMercatorBounds(); - bounds.transform(epsg4326, epsg900913); + return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136)); + } - return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028), - Math.round(bounds.getHeight() / scale / 0.00028)); -} + function mapnikImageSize(scale) { + var bounds = getMercatorBounds(); -function roundScale(scale) { - var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2); + return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028), + Math.round(bounds.getHeight() / scale / 0.00028)); + } - return precision * Math.ceil(scale / precision); -} + function roundScale(scale) { + var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2); -function mapnikSizeChanged() { - var size = mapnikImageSize($("#mapnik_scale").val()); + return precision * Math.ceil(scale / precision); + } + + 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(); + } }