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 marker, rectangle;
  15
  16     var drawHandler = new L.Rectangle.Draw(map, {title: I18n.t('export.start_rjs.drag_a_box')});
  17     map.on('draw:rectangle-created', endDrag);
  18
  19     map.on("moveend", mapMoved);
  20     map.on("baselayerchange", htmlUrlChanged);
  21
  22     $("#sidebar_title").html(I18n.t('export.start_rjs.export'));
  23     $("#sidebar_content").html(sidebarHtml);
  24
  25     $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
  26
  27     $("#drag_box").click(startDrag);
  28
  29     $("#add_marker").click(startMarker);
  30
  31     $("#format_osm,#format_mapnik,#format_html").click(formatChanged);
  32
  33     $("#mapnik_scale").change(mapnikSizeChanged);
  34
  35     openSidebar();
  36
  37     if (map.hasLayer(layers[0].layer)) {
  38       $("#format_mapnik").prop("checked", true);
  39     }
  40
  41     setBounds(map.getBounds());
  42     formatChanged();
  43
  44     $("body").removeClass("site-index").addClass("site-export");
  45
  46     $("#sidebar").one("closed", function () {
  47       $("body").removeClass("site-export").addClass("site-index");
  48
  49       clearBox();
  50       clearMarker();
  51
  52       map.off("moveend", mapMoved);
  53       map.off("baselayerchange", htmlUrlChanged);
  54       map.off('draw:rectangle-created', endDrag);
  55
  56       drawHandler.disable();
  57     });
  58
  59     function getBounds() {
  60       return L.latLngBounds(L.latLng($("#minlat").val(), $("#minlon").val()),
  61                             L.latLng($("#maxlat").val(), $("#maxlon").val()));
  62     }
  63
  64     function getScale() {
  65       var bounds = map.getBounds(),
  66         centerLat = bounds.getCenter().lat,
  67         halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
  68         meters = halfWorldMeters * (bounds.getNorthEast().lng - bounds.getSouthWest().lng) / 180,
  69         pixelsPerMeter = map.getSize().x / meters,
  70         metersPerPixel = 1 / (92 * 39.3701);
  71       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
  72     }
  73
  74     function getMercatorBounds() {
  75       var bounds = getBounds();
  76       return L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
  77                       L.CRS.EPSG3857.project(bounds.getNorthEast()));
  78     }
  79
  80     function boundsChanged() {
  81       var bounds = getBounds();
  82
  83       map.off("moveend", mapMoved);
  84       map.fitBounds(bounds);
  85
  86       clearBox();
  87       drawBox(bounds);
  88
  89       validateControls();
  90       mapnikSizeChanged();
  91     }
  92
  93     function startDrag() {
  94       $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box'));
  95
  96       clearBox();
  97       drawHandler.enable();
  98     }
  99
 100     function endDrag(e) {
 101       var bounds = e.rect.getBounds();
 102
 103       map.off("moveend", mapMoved);
 104       setBounds(bounds);
 105       drawBox(bounds);
 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       map.on("click", endMarker);
 120
 121       return false;
 122     }
 123
 124     function endMarker(event) {
 125       map.off("click", endMarker);
 126
 127       $("#add_marker").html(I18n.t('export.start_rjs.change_marker'));
 128       $("#marker_inputs").show();
 129
 130       var latlng = event.latlng;
 131
 132       if (marker) {
 133         map.removeLayer(marker);
 134       }
 135
 136       marker = L.marker(latlng).addTo(map);
 137
 138       $("#marker_lon").val(latlng.lng.toFixed(5));
 139       $("#marker_lat").val(latlng.lat.toFixed(5));
 140
 141       htmlUrlChanged();
 142     }
 143
 144     function clearMarker() {
 145       $("#marker_lon,#marker_lat").val("");
 146       $("#marker_inputs").hide();
 147       $("#add_marker").html(I18n.t('export.start_rjs.add_marker'));
 148
 149       if (marker) {
 150         map.removeLayer(marker);
 151       }
 152     }
 153
 154     function mapMoved() {
 155       setBounds(map.getBounds());
 156       validateControls();
 157     }
 158
 159     function setBounds(bounds) {
 160       var toPrecision = zoomPrecision(map.getZoom());
 161
 162       $("#minlon").val(toPrecision(bounds.getWestLng()));
 163       $("#minlat").val(toPrecision(bounds.getSouthLat()));
 164       $("#maxlon").val(toPrecision(bounds.getEastLng()));
 165       $("#maxlat").val(toPrecision(bounds.getNorthLat()));
 166
 167       mapnikSizeChanged();
 168       htmlUrlChanged();
 169     }
 170
 171     function clearBox() {
 172       if (rectangle) {
 173         map.removeLayer(rectangle);
 174       }
 175       rectangle = null;
 176     }
 177
 178     function drawBox(bounds) {
 179       rectangle = L.rectangle(bounds);
 180       rectangle.addTo(map);
 181     }
 182
 183     function validateControls() {
 184       var bounds = getBounds();
 185
 186       var tooLarge = bounds.getSize() > OSM.MAX_REQUEST_AREA;
 187       if (tooLarge) {
 188         $("#export_osm_too_large").show();
 189       } else {
 190         $("#export_osm_too_large").hide();
 191       }
 192
 193       var max_scale = maxMapnikScale();
 194       var disabled = true;
 195
 196       if ($("#format_osm").prop("checked")) {
 197         disabled = tooLarge;
 198       } else if ($("#format_mapnik").prop("checked")) {
 199         disabled = $("#mapnik_scale").val() < max_scale;
 200       }
 201
 202       $("#export_commit").prop("disabled", disabled);
 203       $("#mapnik_max_scale").html(roundScale(max_scale));
 204     }
 205
 206     function htmlUrlChanged() {
 207       var bounds = getBounds();
 208       var layerName = getMapBaseLayer().keyid;
 209
 210       var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&amp;layer=" + layerName;
 211       var markerUrl = "";
 212
 213       if ($("#marker_lat").val() && $("#marker_lon").val()) {
 214         markerUrl = "&amp;mlat=" + $("#marker_lat").val() + "&amp;mlon=" + $("#marker_lon").val();
 215         url += "&amp;marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val();
 216       }
 217
 218       var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'" style="border: 1px solid black"></iframe>';
 219
 220       // Create "larger map" link
 221       var center = bounds.getCenter();
 222
 223       var zoom = map.getBoundsZoom(bounds);
 224
 225       var layers = getMapLayers();
 226
 227       var text = I18n.t('export.start_rjs.view_larger_map');
 228       var escaped = [];
 229
 230       for (var i = 0; i < text.length; ++i) {
 231         var c = text.charCodeAt(i);
 232         escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";");
 233       }
 234
 235       html += '<br /><small><a href="http://' + OSM.SERVER_URL + '/?lat='+center.lat+'&amp;lon='+center.lng+'&amp;zoom='+zoom+'&amp;layers='+layers+markerUrl+'">'+escaped.join("")+'</a></small>';
 236
 237       $("#export_html_text").val(html);
 238
 239       if ($("#format_html").prop("checked")) {
 240         $("#export_html_text").prop("selected", true);
 241       }
 242     }
 243
 244     function formatChanged() {
 245       $("#export_commit").show();
 246
 247       if ($("#format_osm").prop("checked")) {
 248         $("#export_osm").show();
 249       } else {
 250         $("#export_osm").hide();
 251       }
 252
 253       if ($("#format_mapnik").prop("checked")) {
 254         $("#mapnik_scale").val(getScale());
 255         $("#export_mapnik").show();
 256
 257         mapnikSizeChanged();
 258       } else {
 259         $("#export_mapnik").hide();
 260       }
 261
 262       if ($("#format_html").prop("checked")) {
 263         $("#export_html").show();
 264         $("#export_commit").hide();
 265         $("#export_html_text").prop("selected", true);
 266       } else {
 267         $("#export_html").hide();
 268
 269         clearMarker();
 270       }
 271
 272       validateControls();
 273     }
 274
 275     function maxMapnikScale() {
 276       var bounds = getMercatorBounds();
 277
 278       return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136));
 279     }
 280
 281     function mapnikImageSize(scale) {
 282       var bounds = getMercatorBounds();
 283
 284       return {w: Math.round(bounds.getWidth() / scale / 0.00028),
 285               h: Math.round(bounds.getHeight() / scale / 0.00028)};
 286     }
 287
 288     function roundScale(scale) {
 289       var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
 290
 291       return precision * Math.ceil(scale / precision);
 292     }
 293
 294     function mapnikSizeChanged() {
 295       var size = mapnikImageSize($("#mapnik_scale").val());
 296
 297       $("#mapnik_image_width").html(size.w);
 298       $("#mapnik_image_height").html(size.h);
 299
 300       validateControls();
 301     }
 302   }
 303 });