app/assets/javascripts/export.js

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