Pārlūkot izejas kodu

[search] Add ZoomBox plugin

Enrico Berti 10 gadi atpakaļ
vecāks
revīzija
ea2d7ab

+ 14 - 14
apps/search/src/search/static/search/js/search.ko.js

@@ -285,20 +285,20 @@ var Query = function (vm, query) {
   self.selectMapRegionFacet = function (data) {
     self.removeFilter(ko.mapping.fromJS({'id': data.widget_id, 'dontZoomOut': true}));
 
-    console.log(ko.mapping.toJSON(data));
-    
-      self.fqs.push(ko.mapping.fromJS({
-          'id': data.widget_id,
-          'field': data.lat,
-          'lat': data.lat,
-          'lon': data.lon,
-          'filter': [{'exclude': false, 'value': data.bounds}],
-          'type': 'map',
-          'properties': {
-              'lat_sw': data.bounds._southWest.lat, 'lon_sw': data.bounds._southWest.lng,
-              'lat_ne': data.bounds._northEast.lat, 'lon_ne': data.bounds._northEast.lng
-          }
-      }));
+    self.fqs.push(ko.mapping.fromJS({
+      'id': data.widget_id,
+      'field': data.lat,
+      'lat': data.lat,
+      'lon': data.lon,
+      'filter': [
+        {'exclude': false, 'value': data.bounds}
+      ],
+      'type': 'map',
+      'properties': {
+        'lat_sw': data.bounds._southWest.lat, 'lon_sw': data.bounds._southWest.lng,
+        'lat_ne': data.bounds._northEast.lat, 'lon_ne': data.bounds._northEast.lng
+      }
+    }));
 
     if (vm.selectedQDefinition() != null) {
       vm.selectedQDefinition().hasChanged(true);

+ 1 - 5
apps/search/src/search/templates/search.mako

@@ -1570,7 +1570,7 @@ ${ dashboard.layout_skeleton() }
 
     <div data-bind="leafletMapChart: {showMoveCheckbox: true, moveCheckboxLabel: '${ _('Search as I move the map') }', visible: $root.hasRetrievedResults() && $root.collection.template.leafletmapOn(), isLoading: isLoading(), datum: {counts: $root.response()},
       transformer: leafletMapChartDataTransformer,
-      onRegionChange: function(bounds){ $root.query.selectMapRegionFacet({widget_id: id(), 'bounds': ko.toJS(bounds, null, 2), lat: $root.collection.template.leafletmap.latitudeField(), lon: $root.collection.template.leafletmap.longitudeField()}); console.log(getSolrURL(bounds)) },
+      onRegionChange: function(bounds){ $root.query.selectMapRegionFacet({widget_id: id(), 'bounds': ko.toJS(bounds, null, 2), lat: $root.collection.template.leafletmap.latitudeField(), lon: $root.collection.template.leafletmap.longitudeField()}); },
       onComplete: function(){ var widget = viewModel.getWidgetById(id()); if (widget != null) { widget.isLoading(false)}; } }">
     </div>
   </div>
@@ -2662,10 +2662,6 @@ $(document).ready(function () {
       $(document).trigger("warn", "${ _('Result highlighting is unavailable: the collection does not have an index field') }");
     }
   }
-
-  function getSolrURL(bounds){
-    return 'http://localhost:8983/solr/logs4_shard1_replica1/select?q=*%3A*&rows=1&wt=json&indent=true&facet=true&facet.heatmap=location_srpt&facet.heatmap.geom=["'+ bounds._southWest.lng + ' ' + bounds._southWest.lat +'" TO "'+ bounds._northEast.lng + ' ' + bounds._northEast.lat +'"]';
-  }
 </script>
 
 ${ commonfooter(messages) | n,unicode }

+ 10 - 0
desktop/core/src/desktop/static/desktop/ext/css/leaflet.zoombox.css

@@ -0,0 +1,10 @@
+.leaflet-zoom-box-control {
+    font-size: 18px;
+ }
+.leaflet-zoom-box-control.active a {
+    color: #FFF;
+    background: #666;
+}
+.leaflet-zoom-box-crosshair {
+    cursor: crosshair !important;
+}

+ 15 - 0
desktop/core/src/desktop/static/desktop/ext/js/leaflet/leaflet.zoombox.js

@@ -0,0 +1,15 @@
+// https://github.com/consbio/Leaflet.ZoomBox
+// Copyright (c) 2014, Conservation Biology Institute
+//
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+//
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+L.Control.ZoomBox=L.Control.extend({_active:false,_map:null,includes:L.Mixin.Events,options:{position:"topleft",className:"fa fa-search-plus",modal:false},onAdd:function(map){this._map=map;this._container=L.DomUtil.create("div","leaflet-zoom-box-control leaflet-bar");this._container.title="Zoom to specific area";var link=L.DomUtil.create("a",this.options.className,this._container);link.href="#";var _origMouseDown=map.boxZoom._onMouseDown;map.boxZoom._onMouseDown=function(e){_origMouseDown.call(map.boxZoom,{clientX:e.clientX,clientY:e.clientY,which:1,shiftKey:true})};map.on("zoomend",function(){if(map.getZoom()==map.getMaxZoom()){L.DomUtil.addClass(link,"leaflet-disabled")}else{L.DomUtil.removeClass(link,"leaflet-disabled")}},this);if(!this.options.modal){map.on("boxzoomend",this.deactivate,this)}L.DomEvent.on(this._container,"dblclick",L.DomEvent.stop).on(this._container,"click",L.DomEvent.stop).on(this._container,"click",function(){this._active=!this._active;if(this._active&&map.getZoom()!=map.getMaxZoom()){this.activate()}else{this.deactivate()}},this);return this._container},activate:function(){L.DomUtil.addClass(this._container,"active");this._map.dragging.disable();this._map.boxZoom.addHooks();L.DomUtil.addClass(this._map.getContainer(),"leaflet-zoom-box-crosshair")},deactivate:function(){L.DomUtil.removeClass(this._container,"active");this._map.dragging.enable();this._map.boxZoom.removeHooks();L.DomUtil.removeClass(this._map.getContainer(),"leaflet-zoom-box-crosshair");this._active=false;this._map.boxZoom._moved=false}});L.control.zoomBox=function(options){return new L.Control.ZoomBox(options)};

+ 14 - 1
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -363,6 +363,7 @@ ko.bindingHandlers.leafletMapChart = {
       if (element._map != null) {
         element._leaflet = false;
         element._map.remove();
+        $(element).removeClass("leaflet-zoom-box-crosshair");
       }
 
       if (_hasAtLeastOneLat && _hasAtLeastOneLng) {
@@ -375,6 +376,12 @@ ko.bindingHandlers.leafletMapChart = {
             }).addTo(_map);
           }
 
+          var _zoomBox = L.control.zoomBox({
+            modal: true
+          });
+          _map.addControl(_zoomBox);
+
+
           if (_options.showMoveCheckbox) {
             var _command = L.control({
               position: "topright"
@@ -408,7 +415,13 @@ ko.bindingHandlers.leafletMapChart = {
               }
             });
 
-            _map.on("moveend", function () {
+            _map.on("boxzoomend", function (e) {
+              _onRegionChange(e.boxZoomBounds);
+            });
+            _map.on("dragend", function () {
+              _onRegionChange(_map.getBounds());
+            });
+            _map.on("zoomend", function () {
               _onRegionChange(_map.getBounds());
             });
           }

+ 2 - 0
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -254,6 +254,7 @@
 <%def name="import_charts()">
   <link rel="stylesheet" href="${ static('desktop/ext/css/leaflet.css') }">
   <link rel="stylesheet" href="${ static('desktop/ext/css/leaflet.markercluster.css') }">
+  <link rel="stylesheet" href="${ static('desktop/ext/css/leaflet.zoombox.css') }">
   <link rel="stylesheet" href="${ static('desktop/ext/css/nv.d3.min.css') }">
   <link rel="stylesheet" href="${ static('desktop/css/nv.d3.css') }">
 
@@ -262,6 +263,7 @@
 
   <script src="${ static('desktop/ext/js/leaflet/leaflet.js') }" type="text/javascript" charset="utf-8"></script>
   <script src="${ static('desktop/ext/js/leaflet/leaflet.markercluster.js') }" type="text/javascript" charset="utf-8"></script>
+  <script src="${ static('desktop/ext/js/leaflet/leaflet.zoombox.js') }" type="text/javascript" charset="utf-8"></script>
 
   <script src="${ static('desktop/ext/js/d3.v3.js') }" type="text/javascript" charset="utf-8"></script>
   <script src="${ static('desktop/js/nv.d3.js') }" type="text/javascript" charset="utf-8"></script>