app/views/export/start.js.erb

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