Merge pull request #18 from Netcentric/KAW-7683-maps-component

Kaw 7683 maps component

blocks/dealer-locator/dealer-locator.css

@@ -0,0 +1,13 @@
+.dealer-locator-map {
+  height: 400px;
+  position: relative;
+  overflow: hidden;
+}
+
+.dealer-locator.height-big .dealer-locator-map {
+  height: 600px;
+}
+
+.woosmap-slw-listview-desktop-partial {
+  display: none;
+}

blocks/dealer-locator/dealer-locator.js

@@ -0,0 +1,126 @@
+import { loadScript } from '../../scripts/aem.js';
+
+export default async function decorate(block) {
+  const dealerLocator = document.createElement('div');
+  dealerLocator.classList.add('dealer-locator-map');
+  dealerLocator.setAttribute('id', 'dealer-locator');
+  block.append(dealerLocator);
+  const language = /\/en\//.test(window.location.pathname) ? 'en' : 'it';
+  const isRedVariant = block.classList.contains('red');
+  const redConfig = [
+    {
+      featureType: 'water',
+      elementType: 'geometry',
+      stylers: [
+        { color: '#9c3030' },
+      ],
+    },
+    {
+      featureType: 'road',
+      elementType: 'geometry',
+      stylers: [
+        { color: '#7e4c4c' },
+      ],
+    },
+    {
+      featureType: 'landscape',
+      elementType: 'geometry.fill',
+      stylers: [
+        { color: '#562c2c' },
+      ],
+    },
+    {
+      featureType: 'poi.park',
+      elementType: 'geometry.fill',
+      stylers: [
+        {
+          color: '#3c3838',
+        },
+      ],
+    },
+    {
+      featureType: 'administrative.country',
+      elementType: 'geometry.stroke',
+      stylers: [
+        {
+          color: '#ffffff',
+        },
+        {
+          weight: 1,
+        },
+      ],
+    },
+  ];
+
+  const colorsConfig = isRedVariant ? redConfig : [];
+
+  loadScript('/blocks/dealer-locator/vendor/jquery.min.js', { type: 'text/javascript', charset: 'UTF-8' })
+    .then(() => {
+      // these scripts depend on jquery:
+      loadScript('//webapp.woosmap.com/webapp.js', { type: 'text/javascript' }).then(() => {
+        function loadWebApp() {
+          const publicKey = 'woos-50c04d89-af71-3a3b-b0b9-0786ee130532';
+          // eslint-disable-next-line no-undef
+          const webapp = new window.WebApp('dealer-locator', publicKey);
+          const config = {
+            maps: {
+              provider: 'woosmap',
+              channel: '',
+              localities: {
+                language,
+                data: 'advanced',
+              },
+            },
+            theme: {
+              primaryColor: '#ff0000',
+            },
+            datasource: {
+              maxResponses: 5,
+              maxDistance: 1000000,
+              useDistanceMatrix: true,
+              distanceMatrixProvider: 'woosmap',
+            },
+            internationalization: {
+              lang: language,
+            },
+            woosmapview: {
+              initialCenter: {
+                lat: 52.4862,
+                lng: 1.8904,
+              },
+              initialZoom: 5,
+              fitBounds: true,
+              tileStyle: {
+                color: '#ed1d24',
+                size: 12,
+                minSize: 10,
+              },
+              breakPoint: 10,
+              baseMapStyle: colorsConfig,
+              style: {
+                default: {
+                  icon: {
+                    url: 'https://www.kawasaki.eu/content/dam/dealerlocator/location-default-bimoto.png',
+                    anchor: {
+                      x: 16,
+                      y: 16,
+                    },
+                  },
+                  selectedIcon: {
+                    url: 'https://www.kawasaki.eu/content/dam/dealerlocator/location-active-bimoto.png',
+                    anchor: {
+                      x: 16,
+                      y: 16,
+                    },
+                  },
+                },
+              },
+            },
+          };
+          webapp.setConf(config);
+          webapp.render();
+        }
+        loadWebApp();
+      });
+    });
+}

styles/styles.css

@@ -366,6 +366,11 @@ main .border-top {
   margin: auto;
 }
 
+.section-center .button-container {
+  display: flex;
+  justify-content: center;
+}
+
 /* styles to override onetrust */
 #onetrust-consent-sdk #onetrust-pc-sdk button:not(#clear-filters-handler, .ot-close-icon, #filter-btn-handler, .ot-remove-objection-handler, .ot-obj-leg-btn-handler, [aria-expanded], .ot-link-btn),
 #onetrust-banner-sdk #onetrust-reject-all-handler,
@@ -394,7 +399,3 @@ main .border-top {
 }
 
 /* article styles - end */
-.section-center .button-container {
-  display: flex;
-  justify-content: center;
-}