app/assets/javascripts/index/export.js

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