Bladeren bron

[search] Added region change event to the map

Enrico Berti 10 jaren geleden
bovenliggende
commit
6876e4a

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

@@ -1541,8 +1541,9 @@ ${ dashboard.layout_skeleton() }
       <select data-bind="options: $root.collection.template.sortedFieldsNames, value: $root.collection.template.leafletmap.labelField, optionsCaption: '${ _('Choose...') }'"></select>
     </div>
 
-    <div data-bind="leafletMapChart: {visible: $root.hasRetrievedResults() && $root.collection.template.leafletmapOn(), isLoading: isLoading(), datum: {counts: $root.response()},
+    <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){ alert(ko.toJSON(bounds, null, 2)); alert(getSolrURL(bounds)) },
       onComplete: function(){ var widget = viewModel.getWidgetById(id()); if (widget != null) { widget.isLoading(false)}; } }">
     </div>
   </div>
@@ -2634,6 +2635,10 @@ $(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 - 1
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2034,4 +2034,13 @@ pre {
 .hover-actions-2nd > a:hover,
 .hover-actions-3rd > a:hover {
   color: #338bb8;
-}
+}
+
+.leaflet-search-command {
+  padding: 4px;
+  background-color: #FFF;
+}
+
+.leaflet-search-command input, .leaflet-search-command label {
+  margin-bottom: 0;
+}

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

@@ -375,6 +375,44 @@ ko.bindingHandlers.leafletMapChart = {
             }).addTo(_map);
           }
 
+          if (_options.showMoveCheckbox) {
+            var _command = L.control({
+              position: "topright"
+            });
+
+            _command.onAdd = function (map) {
+              var div = L.DomUtil.create("div", "leaflet-search-command leaflet-bar");
+              div.innerHTML = '<label class="checkbox"><input id="command' + $(element).parents(".card-widget").attr("id") + '" type="checkbox"/> ' + (_options.moveCheckboxLabel ? _options.moveCheckboxLabel : 'Search as I move the map') + '</label>';
+              return div;
+            };
+
+            _command.addTo(_map);
+
+            if (_options.onRegionChange == null) {
+              _options.onRegionChange = function () {
+              };
+            }
+
+            var _onRegionChange = function () {
+            };
+
+            $("#command" + $(element).parents(".card-widget").attr("id")).on("change", function () {
+              if ($(this).is(":checked")) {
+                if (_options.onRegionChange != null) {
+                  _onRegionChange = _options.onRegionChange;
+                }
+              }
+              else {
+                _onRegionChange = function () {
+                };
+              }
+            });
+
+            _map.on("moveend", function () {
+              _onRegionChange(_map.getBounds());
+            });
+          }
+
           var _clusterGroup = L.markerClusterGroup({
             maxClusterRadius: 10,
             polygonOptions: {
@@ -405,6 +443,10 @@ ko.bindingHandlers.leafletMapChart = {
 
           _map.addLayer(_clusterGroup);
           _map.fitBounds(_clusterGroup.getBounds());
+
+          if (_options.onComplete != null) {
+            _options.onComplete();
+          }
         }
         catch (err) {
           $.jHueNotify.error(err.message);
@@ -1465,4 +1507,4 @@ var tipBuilder = function () {
   return tip
 };
 
-d3.tip = tipBuilder;
+d3.tip = tipBuilder;