Pan/zoom controls that look like the OL ones

[rails.git] / app / assets / javascripts / index / export.js

diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js
index 46cd105e4c812d4b6aa625fb7022ab28cb7c8cc9..e1b079607fed9e301e7d78f74fdf055a9386143f 100644 (file)
--- a/app/assets/javascripts/index/export.js
+++ b/app/assets/javascripts/index/export.js
@@ -11,10 +11,13 @@ $(document).ready(function () {
   }
 
   function startExport(sidebarHtml) {
-    var marker, rectangle;
+    var marker;
 
-    var drawHandler = new L.Rectangle.Draw(map, {title: I18n.t('export.start_rjs.drag_a_box')});
-    map.on('draw:rectangle-created', endDrag);
+    var locationFilter = new L.LocationFilter({
+      enableButton: false,
+      adjustButton: false,
+      onChange: filterChanged
+    }).addTo(map);
 
     map.on("moveend", mapMoved);
     map.on("baselayerchange", htmlUrlChanged);
@@ -24,7 +27,7 @@ $(document).ready(function () {
 
     $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
 
-    $("#drag_box").click(startDrag);
+    $("#drag_box").click(enableFilter);
 
     $("#add_marker").click(startMarker);
 
@@ -46,14 +49,11 @@ $(document).ready(function () {
     $("#sidebar").one("closed", function () {
       $("body").removeClass("site-export").addClass("site-index");
 
-      clearBox();
+      map.removeLayer(locationFilter);
       clearMarker();
 
       map.off("moveend", mapMoved);
       map.off("baselayerchange", htmlUrlChanged);
-      map.off('draw:rectangle-created', endDrag);
-
-      drawHandler.disable();
     });
 
     function getBounds() {
@@ -61,6 +61,16 @@ $(document).ready(function () {
                             L.latLng($("#maxlat").val(), $("#maxlon").val()));
     }
 
+    function getScale() {
+      var bounds = map.getBounds(),
+        centerLat = bounds.getCenter().lat,
+        halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
+        meters = halfWorldMeters * (bounds.getNorthEast().lng - bounds.getSouthWest().lng) / 180,
+        pixelsPerMeter = map.getSize().x / meters,
+        metersPerPixel = 1 / (92 * 39.3701);
+      return Math.round(1 / (pixelsPerMeter * metersPerPixel));
+    }
+
     function getMercatorBounds() {
       var bounds = getBounds();
       return L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
@@ -70,36 +80,22 @@ $(document).ready(function () {
     function boundsChanged() {
       var bounds = getBounds();
 
-      map.off("moveend", mapMoved);
       map.fitBounds(bounds);
 
-      clearBox();
-      drawBox(bounds);
+      enableFilter();
+      locationFilter.setBounds(bounds);
 
       validateControls();
       mapnikSizeChanged();
     }
 
-    function startDrag() {
-      $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box'));
-
-      clearBox();
-      drawHandler.enable();
-    }
-
-    function endDrag(e) {
-      var bounds = e.rect.getBounds();
-
-      map.off("moveend", mapMoved);
-      setBounds(bounds);
-      drawBox(bounds);
-      validateControls();
-
-      $("#drag_box").html(I18n.t('export.start_rjs.manually_select'));
+    function enableFilter() {
+      $("#drag_box").hide();
+      locationFilter.enable();
     }
 
-    function transformComplete(event) {
-      setBounds(event.feature.geometry.bounds);
+    function filterChanged() {
+      setBounds(locationFilter.getBounds());
       validateControls();
     }
 
@@ -142,8 +138,10 @@ $(document).ready(function () {
     }
 
     function mapMoved() {
-      setBounds(map.getBounds());
-      validateControls();
+      if (!locationFilter.isEnabled()) {
+        setBounds(map.getBounds());
+        validateControls();
+      }
     }
 
     function setBounds(bounds) {
@@ -158,18 +156,6 @@ $(document).ready(function () {
       htmlUrlChanged();
     }
 
-    function clearBox() {
-      if (rectangle) {
-        map.removeLayer(rectangle);
-      }
-      rectangle = null;
-    }
-
-    function drawBox(bounds) {
-      rectangle = L.rectangle(bounds);
-      rectangle.addTo(map);
-    }
-
     function validateControls() {
       var bounds = getBounds();
 
@@ -241,7 +227,7 @@ $(document).ready(function () {
       }
 
       if ($("#format_mapnik").prop("checked")) {
-//        $("#mapnik_scale").val(roundScale(map.getScale()));
+        $("#mapnik_scale").val(getScale());
         $("#export_mapnik").show();
 
         mapnikSizeChanged();