Fix Smile-SA/elasticsuite-for-retailer#11 - Performances optiomizatio…

…n (add ability to enable marker clustering)
tuping · Sep 3, 2018 · 62c8e15 · 62c8e15
1 parent 03b5694
commit 62c8e15
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 8 deletions.
diff --git a/etc/adminhtml/system.xml b/etc/adminhtml/system.xml
@@ -76,6 +76,16 @@
                     <upload_dir config="system/filesystem/media" scope_info="1">smile_map/marker</upload_dir>
                     <base_url type="media" scope_info="1">smile_map/marker</base_url>
                 </field>
+
+                <field id="provider_all_disabled_zoom_out" translate="label" type="select" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="60">
+                    <label>Disable zoom out when no results</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+
+                <field id="provider_all_marker_cluster" translate="label" type="select" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="70">
+                    <label>Enable Marker Cluster</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
             </group>
 
             <group id="address_templates" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">

diff --git a/etc/config.xml b/etc/config.xml
@@ -27,6 +27,9 @@
                 <provider_google_type>roadmap</provider_google_type>
                 <provider_google_libraries>geometry</provider_google_libraries>
                 <provider_google_direction_url_template>https://www.google.com/maps/dir/{{depend has_origin}}{{var orig_latitude}},{{var orig_longitude}}{{/depend}}/{{var dest_latitude}},{{var dest_longitude}}</provider_google_direction_url_template>
+
+                <provider_all_disabled_zoom_out>0</provider_all_disabled_zoom_out>
+                <provider_all_marker_cluster>0</provider_all_marker_cluster>
             </map>
 
             <address_templates>

diff --git a/view/frontend/layout/smile_map_styles.xml b/view/frontend/layout/smile_map_styles.xml
@@ -18,6 +18,9 @@
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <head>
         <css src="Smile_Map::leaflet/leaflet.css"/>
+        <!-- add conditional load css when use markercluser mode -->
+        <css src="Smile_Map::leaflet/plugins/markercluster/MarkerCluster.css"/>
+        <css src="Smile_Map::leaflet/plugins/markercluster/MarkerCluster.Default.css"/>
         <script src="Smile_Map::js/polyfill/ie11/promise.min.js" ie_condition="IE 11"/>
     </head>
 </page>

diff --git a/view/frontend/requirejs-config.js b/view/frontend/requirejs-config.js
@@ -30,6 +30,7 @@ var config = {
         'leaflet-geosearch'         : 'Smile_Map/leaflet/plugins/geosearch/l.control.geosearch',
         'leaflet-geosearch-osm'     : 'Smile_Map/leaflet/plugins/geosearch/l.geosearch.provider.openstreetmap',
         'leaflet-geosearch-google'  : 'Smile_Map/leaflet/plugins/geosearch/l.geosearch.provider.google',
+        'leaflet-markercluster'     : 'Smile_Map/leaflet/plugins/markercluster/leaflet.markercluster',
         'google-mutant'             : 'Smile_Map/leaflet/google-mutant'
     },
     shim: {
@@ -45,6 +46,9 @@ var config = {
         'leaflet-geosearch-google': {
             deps: ['leaflet', 'leaflet-geosearch']
         },
+        'leaflet-markercluster': {
+            deps: ['leaflet']
+        },
         'google-mutant': {
             deps: ['leaflet']
         },

diff --git a/view/frontend/web/js/map.js b/view/frontend/web/js/map.js
@@ -5,7 +5,8 @@ define([
     'ko',
     'uiRegistry',
     'smile-map-markers',
-    'mage/translate'
+    'mage/translate',
+    'leaflet-markercluster'
 ], function ($, Component, L, ko, registry, MarkersList) {
     return Component.extend({
         defaults: {
@@ -37,10 +38,6 @@ define([
                 marker.distance = ko.observable(0);
             });
 
-            this.markers.forEach(function(marker) {
-                marker.distance = ko.observable(0);
-            });
-
             this.displayedMarkers = ko.observable(this.markers);
         },
 
@@ -178,18 +175,27 @@ define([
          * Load the markers and centers the map on them.
          */
         loadMarkers: function() {
-            var markers = [];
+            var markers = [],
+                isMarkerCluster = this.marker_cluster === '1';
             var icon = L.icon({iconUrl: this.markerIcon, iconSize: this.markerIconSize});
             this.markers().forEach(function(markerData) {
                 var currentMarker = [markerData.latitude, markerData.longitude];
-                var marker = L.marker(currentMarker, {icon: icon}).addTo(this.map);
+                var marker = L.marker(currentMarker, {icon: icon});
+                if (!isMarkerCluster) {
+                    marker.addTo(this.map);
+                }
                 marker.on('click', function() {
                     this.selectMarker(markerData);
                 }.bind(this));
                 markers.push(marker);
             }.bind(this));
 
             var group = new L.featureGroup(markers);
+            if (isMarkerCluster) {
+                group = new L.markerClusterGroup();
+                group.addLayers(markers);
+                this.map.addLayer(group);
+            }
             this.initialBounds = group.getBounds();
         },
 
@@ -250,7 +256,7 @@ define([
 
             var zoom = this.map.getZoom();
 
-            if (displayedMarkers.length === 0) {
+            if (displayedMarkers.length === 0 && this.disabled_zoom_out !== '1') {
                 zoom = zoom - 1;
                 this.map.setZoom(zoom);
             }

diff --git a/view/frontend/web/leaflet/plugins/markercluster/MarkerCluster.Default.css b/view/frontend/web/leaflet/plugins/markercluster/MarkerCluster.Default.css
@@ -0,0 +1,60 @@
+.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;
+	}
diff --git a/view/frontend/web/leaflet/plugins/markercluster/MarkerCluster.css b/view/frontend/web/leaflet/plugins/markercluster/MarkerCluster.css
@@ -0,0 +1,14 @@
+.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;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}
diff --git a/view/frontend/web/leaflet/plugins/markercluster/leaflet.markercluster.js b/view/frontend/web/leaflet/plugins/markercluster/leaflet.markercluster.js