Browse Source

HUE-2799 [search] Support marker clustering on Leaflet Map widget

Added marker cluster Leaflet plugin
Re-wrote ko.chart marker binding
Enrico Berti 10 years ago
parent
commit
c7da5f46bf

+ 2 - 0
apps/beeswax/src/beeswax/templates/watch_results.mako

@@ -72,6 +72,7 @@ ${layout.menubar(section='query')}
   }
   }
 </style>
 </style>
 <link href="${ static('desktop/ext/css/leaflet.css') }" rel="stylesheet">
 <link href="${ static('desktop/ext/css/leaflet.css') }" rel="stylesheet">
+<link href="${ static('desktop/ext/css/leaflet.markercluster.css') }" rel="stylesheet">
 
 
 <div class="container-fluid">
 <div class="container-fluid">
   <div id="expand"><i class="fa fa-chevron-right" style="color: #FFFFFF"></i></div>
   <div id="expand"><i class="fa fa-chevron-right" style="color: #FFFFFF"></i></div>
@@ -341,6 +342,7 @@ ${layout.menubar(section='query')}
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.flot.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.flot.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.flot.categories.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.flot.categories.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/leaflet/leaflet.js') }" type="text/javascript" charset="utf-8"></script>
 <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/js/jquery.blueprint.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/jquery.blueprint.js') }" type="text/javascript" charset="utf-8"></script>
 
 
 <script type="text/javascript" charset="utf-8">
 <script type="text/javascript" charset="utf-8">

+ 2 - 0
apps/spark/src/spark/templates/editor.mako

@@ -38,6 +38,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
 <link rel="stylesheet" href="${ static('desktop/ext/chosen/chosen.min.css') }">
 <link rel="stylesheet" href="${ static('desktop/ext/chosen/chosen.min.css') }">
 <link rel="stylesheet" href="${ static('desktop/ext/css/hue-charts.css') }">
 <link rel="stylesheet" href="${ static('desktop/ext/css/hue-charts.css') }">
 <link rel="stylesheet" href="${ static('desktop/ext/css/leaflet.css') }">
 <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/nv.d3.min.css') }">
 <link rel="stylesheet" href="${ static('desktop/ext/css/nv.d3.min.css') }">
 <link rel="stylesheet" href="${ static('desktop/css/nv.d3.css') }">
 <link rel="stylesheet" href="${ static('desktop/css/nv.d3.css') }">
 <link rel="stylesheet" href="${ static('desktop/ext/select2/select2.css') }">
 <link rel="stylesheet" href="${ static('desktop/ext/select2/select2.css') }">
@@ -79,6 +80,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
 <script src="${ static('desktop/js/hue.colors.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/hue.colors.js') }" type="text/javascript" charset="utf-8"></script>
 
 
 <script src="${ static('desktop/ext/js/leaflet/leaflet.js') }" type="text/javascript" charset="utf-8"></script>
 <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/d3.v3.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>
 <script src="${ static('desktop/js/nv.d3.js') }" type="text/javascript" charset="utf-8"></script>

+ 75 - 0
desktop/core/src/desktop/static/desktop/ext/css/leaflet.markercluster.css

@@ -0,0 +1,75 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+  -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+  -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+  -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.marker-cluster-small {
+  background-color: rgba(181, 226, 140, 0.6);
+}
+
+.marker-cluster-small div {
+  background-color: rgba(110, 204, 57, 0.6);
+}
+
+.marker-cluster-medium {
+  background-color: rgba(241, 211, 87, 0.6);
+}
+
+.marker-cluster-medium div {
+  background-color: rgba(240, 194, 12, 0.6);
+}
+
+.marker-cluster-large {
+  background-color: rgba(253, 156, 115, 0.6);
+}
+
+.marker-cluster-large div {
+  background-color: rgba(241, 128, 23, 0.6);
+}
+
+/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+  background-color: rgb(181, 226, 140);
+}
+
+.leaflet-oldie .marker-cluster-small div {
+  background-color: rgb(110, 204, 57);
+}
+
+.leaflet-oldie .marker-cluster-medium {
+  background-color: rgb(241, 211, 87);
+}
+
+.leaflet-oldie .marker-cluster-medium div {
+  background-color: rgb(240, 194, 12);
+}
+
+.leaflet-oldie .marker-cluster-large {
+  background-color: rgb(253, 156, 115);
+}
+
+.leaflet-oldie .marker-cluster-large div {
+  background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+  background-clip: padding-box;
+  border-radius: 20px;
+}
+
+.marker-cluster div {
+  width: 30px;
+  height: 30px;
+  margin-left: 5px;
+  margin-top: 5px;
+
+  text-align: center;
+  border-radius: 15px;
+  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+.marker-cluster span {
+  line-height: 30px;
+}

File diff suppressed because it is too large
+ 5 - 0
desktop/core/src/desktop/static/desktop/ext/js/leaflet/leaflet.markercluster.js


+ 5 - 5
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -370,7 +370,7 @@ ko.bindingHandlers.leafletMapChart = {
             }).addTo(_map);
             }).addTo(_map);
           }
           }
 
 
-          var _markers = [];
+          var _clusterGroup = L.markerClusterGroup();
           _data.forEach(function (item) {
           _data.forEach(function (item) {
             if (item && item.lng != null && item.lat != null) {
             if (item && item.lng != null && item.lat != null) {
               var _addMarker = false;
               var _addMarker = false;
@@ -384,17 +384,17 @@ ko.bindingHandlers.leafletMapChart = {
                 }
                 }
               }
               }
               if (_addMarker) {
               if (_addMarker) {
-                var _marker = L.marker([item.lat, item.lng]).addTo(_map);
+                var _marker = L.marker([item.lat, item.lng]);
                 if (item.label != null) {
                 if (item.label != null) {
                   _marker.bindPopup(item.label);
                   _marker.bindPopup(item.label);
                 }
                 }
-                _markers.push(_marker);
+                _clusterGroup.addLayer(_marker);
               }
               }
             }
             }
           });
           });
 
 
-          _map.markers = new L.featureGroup(_markers);
-          _map.fitBounds(_map.markers.getBounds());
+          _map.addLayer(_clusterGroup);
+          _map.fitBounds(_clusterGroup.getBounds());
 
 
 
 
           if (_options.onComplete != null) {
           if (_options.onComplete != null) {

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

@@ -250,6 +250,7 @@
 
 
 <%def name="import_charts()">
 <%def name="import_charts()">
   <link rel="stylesheet" href="${ static('desktop/ext/css/leaflet.css') }">
   <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/nv.d3.min.css') }">
   <link rel="stylesheet" href="${ static('desktop/ext/css/nv.d3.min.css') }">
   <link rel="stylesheet" href="${ static('desktop/css/nv.d3.css') }">
   <link rel="stylesheet" href="${ static('desktop/css/nv.d3.css') }">
 
 
@@ -257,6 +258,7 @@
   <script src="${ static('desktop/js/hue.colors.js') }" type="text/javascript" charset="utf-8"></script>
   <script src="${ static('desktop/js/hue.colors.js') }" type="text/javascript" charset="utf-8"></script>
 
 
   <script src="${ static('desktop/ext/js/leaflet/leaflet.js') }" type="text/javascript" charset="utf-8"></script>
   <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/d3.v3.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>
   <script src="${ static('desktop/js/nv.d3.js') }" type="text/javascript" charset="utf-8"></script>

Some files were not shown because too many files changed in this diff