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