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 getMercatorBounds() {
  65       var bounds = getBounds();
  66       return L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
  67                       L.CRS.EPSG3857.project(bounds.getNorthEast()));
  68     }
  69
  70     function boundsChanged() {
  71       var bounds = getBounds();
  72
  73       map.off("moveend", mapMoved);
  74       map.fitBounds(bounds);
  75
  76       clearBox();
  77       drawBox(bounds);
  78
  79       validateControls();
  80       mapnikSizeChanged();
  81     }
  82
  83     function startDrag() {
  84       $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box'));
  85
  86       clearBox();
  87       drawHandler.enable();
  88     }
  89
  90     function endDrag(e) {
  91       var bounds = e.rect.getBounds();
  92
  93       map.off("moveend", mapMoved);
  94       setBounds(bounds);
  95       drawBox(bounds);
  96       validateControls();
  97
  98       $("#drag_box").html(I18n.t('export.start_rjs.manually_select'));
  99     }
 100
 101     function transformComplete(event) {
 102       setBounds(event.feature.geometry.bounds);
 103       validateControls();
 104     }
 105
 106     function startMarker() {
 107       $("#add_marker").html(I18n.t('export.start_rjs.click_add_marker'));
 108
 109       map.on("click", endMarker);
 110
 111       return false;
 112     }
 113
 114     function endMarker(event) {
 115       map.off("click", endMarker);
 116
 117       $("#add_marker").html(I18n.t('export.start_rjs.change_marker'));
 118       $("#marker_inputs").show();
 119
 120       var latlng = event.latlng;
 121
 122       if (marker) {
 123         map.removeLayer(marker);
 124       }
 125
 126       marker = L.marker(latlng).addTo(map);
 127
 128       $("#marker_lon").val(latlng.lng.toFixed(5));
 129       $("#marker_lat").val(latlng.lat.toFixed(5));
 130
 131       htmlUrlChanged();
 132     }
 133
 134     function clearMarker() {
 135       $("#marker_lon,#marker_lat").val("");
 136       $("#marker_inputs").hide();
 137       $("#add_marker").html(I18n.t('export.start_rjs.add_marker'));
 138
 139       if (marker) {
 140         map.removeLayer(marker);
 141       }
 142     }
 143
 144     function mapMoved() {
 145       setBounds(map.getBounds());
 146       validateControls();
 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 clearBox() {
 162       if (rectangle) {
 163         map.removeLayer(rectangle);
 164       }
 165       rectangle = null;
 166     }
 167
 168     function drawBox(bounds) {
 169       rectangle = L.rectangle(bounds);
 170       rectangle.addTo(map);
 171     }
 172
 173     function validateControls() {
 174       var bounds = getBounds();
 175
 176       var tooLarge = bounds.getSize() > OSM.MAX_REQUEST_AREA;
 177       if (tooLarge) {
 178         $("#export_osm_too_large").show();
 179       } else {
 180         $("#export_osm_too_large").hide();
 181       }
 182
 183       var max_scale = maxMapnikScale();
 184       var disabled = true;
 185
 186       if ($("#format_osm").prop("checked")) {
 187         disabled = tooLarge;
 188       } else if ($("#format_mapnik").prop("checked")) {
 189         disabled = $("#mapnik_scale").val() < max_scale;
 190       }
 191
 192       $("#export_commit").prop("disabled", disabled);
 193       $("#mapnik_max_scale").html(roundScale(max_scale));
 194     }
 195
 196     function htmlUrlChanged() {
 197       var bounds = getBounds();
 198       var layerName = getMapBaseLayer().keyid;
 199
 200       var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&amp;layer=" + layerName;
 201       var markerUrl = "";
 202
 203       if ($("#marker_lat").val() && $("#marker_lon").val()) {
 204         markerUrl = "&amp;mlat=" + $("#marker_lat").val() + "&amp;mlon=" + $("#marker_lon").val();
 205         url += "&amp;marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val();
 206       }
 207
 208       var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'" style="border: 1px solid black"></iframe>';
 209
 210       // Create "larger map" link
 211       var center = bounds.getCenter();
 212
 213       var zoom = map.getBoundsZoom(bounds);
 214
 215       var layers = getMapLayers();
 216
 217       var text = I18n.t('export.start_rjs.view_larger_map');
 218       var escaped = [];
 219
 220       for (var i = 0; i < text.length; ++i) {
 221         var c = text.charCodeAt(i);
 222         escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";");
 223       }
 224
 225       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>';
 226
 227       $("#export_html_text").val(html);
 228
 229       if ($("#format_html").prop("checked")) {
 230         $("#export_html_text").prop("selected", true);
 231       }
 232     }
 233
 234     function formatChanged() {
 235       $("#export_commit").show();
 236
 237       if ($("#format_osm").prop("checked")) {
 238         $("#export_osm").show();
 239       } else {
 240         $("#export_osm").hide();
 241       }
 242
 243       if ($("#format_mapnik").prop("checked")) {
 244 //        $("#mapnik_scale").val(roundScale(map.getScale()));
 245         $("#export_mapnik").show();
 246
 247         mapnikSizeChanged();
 248       } else {
 249         $("#export_mapnik").hide();
 250       }
 251
 252       if ($("#format_html").prop("checked")) {
 253         $("#export_html").show();
 254         $("#export_commit").hide();
 255         $("#export_html_text").prop("selected", true);
 256       } else {
 257         $("#export_html").hide();
 258
 259         clearMarker();
 260       }
 261
 262       validateControls();
 263     }
 264
 265     function maxMapnikScale() {
 266       var bounds = getMercatorBounds();
 267
 268       return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136));
 269     }
 270
 271     function mapnikImageSize(scale) {
 272       var bounds = getMercatorBounds();
 273
 274       return {w: Math.round(bounds.getWidth() / scale / 0.00028),
 275               h: Math.round(bounds.getHeight() / scale / 0.00028)};
 276     }
 277
 278     function roundScale(scale) {
 279       var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
 280
 281       return precision * Math.ceil(scale / precision);
 282     }
 283
 284     function mapnikSizeChanged() {
 285       var size = mapnikImageSize($("#mapnik_scale").val());
 286
 287       $("#mapnik_image_width").html(size.w);
 288       $("#mapnik_image_height").html(size.h);
 289
 290       validateControls();
 291     }
 292   }
 293 });