From fe6e837cfe77e1414998c0216defe7912e34bf75 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 18 Oct 2012 17:53:30 -0700 Subject: [PATCH] Replace leaflet.draw with leaflet-locationfilter --- app/assets/javascripts/application.js | 2 +- app/assets/javascripts/index/browse.js | 73 +- app/assets/javascripts/index/export.js | 62 +- app/views/browse/start.html.erb | 6 +- app/views/layouts/_head.html.erb | 3 +- config/environments/production.rb | 2 +- config/locales/en.yml | 5 +- vendor/assets/leaflet/img/filter-icon.png | Bin 0 -> 1682 bytes vendor/assets/leaflet/img/move-handle.png | Bin 0 -> 1109 bytes vendor/assets/leaflet/img/resize-handle.png | Bin 0 -> 1017 bytes vendor/assets/leaflet/leaflet.draw.css | 130 --- vendor/assets/leaflet/leaflet.draw.ie.css | 10 - vendor/assets/leaflet/leaflet.draw.js | 931 ------------------ .../assets/leaflet/leaflet.locationfilter.css | 78 ++ .../assets/leaflet/leaflet.locationfilter.js | 489 +++++++++ 15 files changed, 618 insertions(+), 1173 deletions(-) create mode 100644 vendor/assets/leaflet/img/filter-icon.png create mode 100644 vendor/assets/leaflet/img/move-handle.png create mode 100644 vendor/assets/leaflet/img/resize-handle.png delete mode 100644 vendor/assets/leaflet/leaflet.draw.css delete mode 100644 vendor/assets/leaflet/leaflet.draw.ie.css delete mode 100644 vendor/assets/leaflet/leaflet.draw.js create mode 100644 vendor/assets/leaflet/leaflet.locationfilter.css create mode 100644 vendor/assets/leaflet/leaflet.locationfilter.js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index da05801a5..4fa2b56cc 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -6,7 +6,7 @@ //= require augment //= require leaflet //= require leaflet.osm -//= require leaflet.draw +//= require leaflet.locationfilter //= require i18n/translations //= require osm //= require piwik diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js index 65ed5f785..0016c7b5d 100644 --- a/app/assets/javascripts/index/browse.js +++ b/app/assets/javascripts/index/browse.js @@ -11,7 +11,6 @@ $(document).ready(function () { }); function startBrowse(sidebarHtml) { - var browseMode = "auto"; var browseBounds; var layersById; var selectedLayer; @@ -41,8 +40,11 @@ $(document).ready(function () { return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments); }; - var drawHandler = new L.Rectangle.Draw(map, {title: I18n.t('browse.start_rjs.drag_a_box')}); - map.on('draw:rectangle-created', endDrag); + var locationFilter = new L.LocationFilter({ + enableButton: false, + adjustButton: false, + onChange: getData + }).addTo(map); $("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title')); $("#sidebar_content").html(sidebarHtml); @@ -52,15 +54,19 @@ $(document).ready(function () { map.on("moveend", updateData); updateData(); - $("#browse_select_view").click(useMap); + $("#browse_filter_toggle").toggle(enableFilter, disableFilter); $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); $("#browse_hide_areas_box").toggle(hideAreas, showAreas); function updateData() { - if (browseMode == "auto") { + if (!locationFilter.isEnabled()) { if (map.getZoom() >= 15) { - useMap(); + var bounds = map.getBounds(); + if (!browseBounds || !browseBounds.contains(bounds)) { + browseBounds = bounds; + getData(); + } } else { setStatus(I18n.t('browse.start_rjs.zoom_or_select')); } @@ -69,62 +75,34 @@ $(document).ready(function () { $("#sidebar").one("closed", function () { map.removeLayer(dataLayer); + map.removeLayer(locationFilter); map.off("moveend", updateData); - map.off('draw:rectangle-created', endDrag); - drawHandler.disable(); - }); - - $("#browse_select_box").click(function () { - $("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box')); - - drawHandler.enable(); - - return false; }); - function useMap() { - var bounds = map.getBounds(); - - if (!browseBounds || !browseBounds.contains(bounds)) { - browseBounds = bounds; - browseMode = "auto"; - - getData(); - - $("#browse_select_view").hide(); - } + function enableFilter() { + $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.view_data')); + locationFilter.enable(); + getData(); + } - return false; + function disableFilter() { + $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.manually_select')); + locationFilter.disable(); + getData(); } function hideAreas() { $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas')); - areasHidden = true; - getData(); } function showAreas() { $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); - areasHidden = false; - getData(); } - function endDrag(e) { - browseBounds = e.rect.getBounds(); - browseMode = "manual"; - - getData(); - - $("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select')); - $("#browse_select_view").show(); - - drawHandler.disable(); - } - function displayFeatureWarning(count, limit, callback) { clearStatus(); @@ -145,7 +123,8 @@ $(document).ready(function () { } function getData() { - var size = browseBounds.getSize(); + var bounds = locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds(); + var size = bounds.getSize(); if (size > OSM.MAX_REQUEST_AREA) { setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size })); @@ -154,7 +133,7 @@ $(document).ready(function () { setStatus(I18n.t('browse.start_rjs.loading')); - var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + browseBounds.toBBOX(); + var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBOX(); /* * Modern browsers are quite happy showing far more than 100 features in @@ -211,7 +190,7 @@ $(document).ready(function () { onSelect(layer); - if (browseMode != "auto") { + if (locationFilter.isEnabled()) { map.panTo(layer.getBounds().getCenter()); } diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js index bff1ab239..e1b079607 100644 --- 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() { @@ -80,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(); } @@ -152,8 +138,10 @@ $(document).ready(function () { } function mapMoved() { - setBounds(map.getBounds()); - validateControls(); + if (!locationFilter.isEnabled()) { + setBounds(map.getBounds()); + validateControls(); + } } function setBounds(bounds) { @@ -168,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(); diff --git a/app/views/browse/start.html.erb b/app/views/browse/start.html.erb index 3777d710a..b0315dad9 100644 --- a/app/views/browse/start.html.erb +++ b/app/views/browse/start.html.erb @@ -1,11 +1,9 @@

- <%= t'browse.start.view_data' %> + <%= t'browse.start_rjs.manually_select' %>
- <%= t'browse.start.manually_select' %> -
- <%= t'browse.start.hide_areas' %> + <%= t'browse.start_rjs.hide_areas' %>