app/assets/javascripts/export.js

   1 function startExport(sidebarHtml) {
   2   var vectors,
   3       box,
   4       transform,
   5       markerLayer,
   6       markerControl,
   7       epsg4326 = new OpenLayers.Projection("EPSG:4326"),
   8       epsg900913 = new OpenLayers.Projection("EPSG:900913");
   9
  10   vectors = new OpenLayers.Layer.Vector("Vector Layer", {
  11     displayInLayerSwitcher: false
  12   });
  13   map.addLayer(vectors);
  14
  15   box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
  16     handlerOptions: {
  17       sides: 4,
  18       snapAngle: 90,
  19       irregular: true,
  20       persist: true
  21     }
  22   });
  23   box.handler.callbacks.done = endDrag;
  24   map.addControl(box);
  25
  26   transform = new OpenLayers.Control.TransformFeature(vectors, {
  27     rotate: false,
  28     irregular: true
  29   });
  30   transform.events.register("transformcomplete", transform, transformComplete);
  31   map.addControl(transform);
  32
  33   map.events.register("moveend", map, mapMoved);
  34   map.events.register("changebaselayer", map, htmlUrlChanged);
  35
  36   $("#sidebar_title").html(I18n.t('export.start_rjs.export'));
  37   $("#sidebar_content").html(sidebarHtml);
  38
  39   $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
  40
  41   $("#drag_box").click(startDrag);
  42
  43   $("#add_marker").click(startMarker);
  44
  45   $("#format_osm,#format_mapnik,#format_html").click(formatChanged);
  46
  47   $("#mapnik_scale").change(mapnikSizeChanged);
  48
  49   openSidebar({ onclose: stopExport });
  50
  51   if (map.baseLayer.name == "Mapnik") {
  52     $("#format_mapnik").prop("checked", true);
  53   }
  54
  55   formatChanged();
  56   setBounds(map.getExtent());
  57
  58   $("#viewanchor").removeClass("active");
  59   $("#exportanchor").addClass("active");
  60
  61   function stopExport() {
  62     $("#viewanchor").addClass("active");
  63     $("#exportanchor").removeClass("active");
  64
  65     clearBox();
  66     clearMarker();
  67     map.events.unregister("moveend", map, mapMoved);
  68     map.events.unregister("changebaselayer", map, htmlUrlChanged);
  69     map.removeLayer(vectors);
  70   }
  71
  72   function getMercatorBounds() {
  73     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(),
  74                                        $("#maxlon").val(), $("#maxlat").val());
  75
  76     return bounds.transform(epsg4326, epsg900913);
  77   }
  78
  79   function boundsChanged() {
  80     var bounds = getMercatorBounds();
  81
  82     map.events.unregister("moveend", map, mapMoved);
  83     map.zoomToExtent(bounds);
  84
  85     clearBox();
  86     drawBox(bounds);
  87
  88     validateControls();
  89     mapnikSizeChanged();
  90   }
  91
  92   function startDrag() {
  93     $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box'));
  94
  95     clearBox();
  96     box.activate();
  97   };
  98
  99   function endDrag(bbox) {
 100     var bounds = bbox.getBounds();
 101
 102     map.events.unregister("moveend", map, mapMoved);
 103     setBounds(bounds);
 104     drawBox(bounds);
 105     box.deactivate();
 106     validateControls();
 107
 108     $("#drag_box").html(I18n.t('export.start_rjs.manually_select'));
 109   }
 110
 111   function transformComplete(event) {
 112     setBounds(event.feature.geometry.bounds);
 113     validateControls();
 114   }
 115
 116   function startMarker() {
 117     $("#add_marker").html(I18n.t('export.start_rjs.click_add_marker'));
 118
 119     if (!markerLayer) {
 120       markerLayer = new OpenLayers.Layer.Vector("",{
 121         displayInLayerSwitcher: false,
 122         style: {
 123           externalGraphic: OpenLayers.Util.getImageLocation("marker.png"),
 124           graphicXOffset: -10.5,
 125           graphicYOffset: -25,
 126           graphicWidth: 21,
 127           graphicHeight: 25
 128         }
 129       });
 130       map.addLayer(markerLayer);
 131
 132       markerControl = new OpenLayers.Control.DrawFeature(markerLayer, OpenLayers.Handler.Point);
 133       map.addControl(markerControl);
 134
 135       markerLayer.events.on({ "featureadded": endMarker });
 136     }
 137
 138     markerLayer.destroyFeatures();
 139     markerControl.activate();
 140
 141     return false;
 142   }
 143
 144   function endMarker(event) {
 145     markerControl.deactivate();
 146
 147     $("#add_marker").html(I18n.t('export.start_rjs.change_marker'));
 148     $("#marker_inputs").show();
 149
 150     var geom = event.feature.geometry.clone().transform(epsg900913, epsg4326);
 151
 152     $("#marker_lon").val(geom.x.toFixed(5));
 153     $("#marker_lat").val(geom.y.toFixed(5));
 154
 155     htmlUrlChanged();
 156   }
 157
 158   function clearMarker() {
 159     $("#marker_lon,#marker_lat").val("");
 160     $("#marker_inputs").hide();
 161     $("#add_marker").html(I18n.t('export.start_rjs.add_marker'));
 162
 163     if (markerLayer) {
 164       markerControl.destroy();
 165       markerLayer.destroy();
 166       markerLayer = null;
 167       markerControl = null;
 168     }
 169   }
 170
 171   function mapMoved() {
 172     setBounds(map.getExtent());
 173     validateControls();
 174   }
 175
 176   function setBounds(bounds) {
 177     var toPrecision = zoomPrecision(map.getZoom());
 178
 179     bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
 180
 181     $("#minlon").val(toPrecision(bounds.left));
 182     $("#minlat").val(toPrecision(bounds.bottom));
 183     $("#maxlon").val(toPrecision(bounds.right));
 184     $("#maxlat").val(toPrecision(bounds.top));
 185
 186     mapnikSizeChanged();
 187     htmlUrlChanged();
 188   }
 189
 190   function clearBox() {
 191     transform.deactivate();
 192     vectors.destroyFeatures();
 193   }
 194
 195   function drawBox(bounds) {
 196     var feature = new OpenLayers.Feature.Vector(bounds.toGeometry());
 197
 198     vectors.addFeatures(feature);
 199     transform.setFeature(feature);
 200   }
 201
 202   function validateControls() {
 203     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
 204
 205     if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) {
 206       $("#export_osm_too_large").show();
 207     } else {
 208       $("#export_osm_too_large").hide();
 209     }
 210
 211     var max_scale = maxMapnikScale();
 212     var disabled = true;
 213
 214     if ($("#format_osm").prop("checked")) {
 215       disabled = bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA;
 216     } else if ($("#format_mapnik").prop("checked")) {
 217       disabled = $("#mapnik_scale").val() < max_scale;
 218     }
 219
 220     $("#export_commit").prop("disabled", disabled);
 221     $("#mapnik_max_scale").html(roundScale(max_scale));
 222   }
 223
 224   function htmlUrlChanged() {
 225     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
 226     var layerName = map.baseLayer.keyid;
 227     var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&amp;layer=" + layerName;
 228     var markerUrl = "";
 229
 230     if ($("#marker_lat").val() && $("#marker_lon").val()) {
 231       markerUrl = "&amp;mlat=" + $("#marker_lat").val() + "&amp;mlon=" + $("#marker_lon").val();
 232       url += "&amp;marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val();
 233     }
 234
 235     var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'" style="border: 1px solid black"></iframe>';
 236
 237     // Create "larger map" link
 238     var center = bounds.getCenterLonLat();
 239
 240     bounds.transform(epsg4326, epsg900913);
 241     var zoom = map.getZoomForExtent(bounds);
 242
 243     var layers = getMapLayers();
 244
 245     var text = I18n.t('export.start_rjs.view_larger_map');
 246     var escaped = [];
 247
 248     for (var i = 0; i < text.length; ++i) {
 249       var c = text.charCodeAt(i);
 250       escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";");
 251     }
 252
 253     html += '<br /><small><a href="http://' + OSM.SERVER_URL + '/?lat='+center.lat+'&amp;lon='+center.lon+'&amp;zoom='+zoom+'&amp;layers='+layers+markerUrl+'">'+escaped.join("")+'</a></small>';
 254
 255     $("#export_html_text").val(html);
 256
 257     if ($("#format_html").prop("checked")) {
 258       $("#export_html_text").prop("selected", true);
 259     }
 260   }
 261
 262   function formatChanged() {
 263     $("#export_commit").show();
 264
 265     if ($("#format_osm").prop("checked")) {
 266       $("#export_osm").show();
 267     } else {
 268       $("#export_osm").hide();
 269     }
 270
 271     if ($("#format_mapnik").prop("checked")) {
 272       $("#mapnik_scale").val(roundScale(map.getScale()));
 273       $("#export_mapnik").show();
 274
 275       mapnikSizeChanged();
 276     } else {
 277       $("#export_mapnik").hide();
 278     }
 279
 280     if ($("#format_html").prop("checked")) {
 281       $("#export_html").show();
 282       $("#export_commit").hide();
 283       $("#export_html_text").prop("selected", true);
 284     } else {
 285       $("#export_html").hide();
 286
 287       clearMarker();
 288     }
 289
 290     validateControls();
 291   }
 292
 293   function maxMapnikScale() {
 294     var bounds = getMercatorBounds();
 295
 296     return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136));
 297   }
 298
 299   function mapnikImageSize(scale) {
 300     var bounds = getMercatorBounds();
 301
 302     return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028),
 303                                Math.round(bounds.getHeight() / scale / 0.00028));
 304   }
 305
 306   function roundScale(scale) {
 307     var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
 308
 309     return precision * Math.ceil(scale / precision);
 310   }
 311
 312   function mapnikSizeChanged() {
 313     var size = mapnikImageSize($("#mapnik_scale").val());
 314
 315     $("#mapnik_image_width").html(size.w);
 316     $("#mapnik_image_height").html(size.h);
 317
 318     validateControls();
 319   }
 320 }