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