From 8fb4e7c763cad8bb86671e2af003fea84ac66f4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Tue, 11 Sep 2018 16:45:22 +0200
Subject: [PATCH] Replace dynamic Google maps with leaflet.js

---
 package-lock.json                             |  8 +-
 package.json                                  |  2 +-
 .../Resources/Private/Assets/js/app.js        |  1 +
 .../Private/Assets/js/components/Gmap.vue     | 90 ++++++++++---------
 .../Resources/Private/Assets/js/main.js       |  1 +
 .../Templates/FluidStyledContent/Gmap.html    |  1 -
 .../Private/Templates/Map/General.html        |  2 +-
 webpack.config.js                             |  2 +-
 8 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bddaed5c..37583f30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5002,10 +5002,10 @@
         "invert-kv": "^1.0.0"
       }
     },
-    "load-google-maps-api": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/load-google-maps-api/-/load-google-maps-api-1.3.2.tgz",
-      "integrity": "sha512-uc0kW24xpTtw2g1g3qIXGgFF+u2Rlp+7a1Hze7Esuz24tHkbblJH0LZGjRVZuL7mqIxEWp+lP7ANt1/OiZRJbA=="
+    "leaflet": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.4.tgz",
+      "integrity": "sha512-FYL1LGFdj6v+2Ifpw+AcFIuIOqjNggfoLUwuwQv6+3sS21Za7Wvapq+LhbSE4NDXrEj6eYnW3y7LsaBICpyXtw=="
     },
     "load-json-file": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index 4a6be298..9217edf9 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "iframe-resizer": "^3.6.1",
     "jquery": "^2.2.4",
     "jquery-lazy": "^1.7.9",
-    "load-google-maps-api": "^1.3.2",
+    "leaflet": "^1.3.4",
     "normalize.css": "^7.0.0",
     "picturefill": "^3.0.2",
     "sass-mq": "^3.3.2",
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js
index dd2bfdb8..8d6178c6 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js
@@ -38,6 +38,7 @@ require('slick-carousel');
 require('jquery-lazy');
 require('bootstrap-sass/assets/javascripts/bootstrap');
 require('picturefill');
+require('leaflet');
 
 // Import components
 import EventBus from './bus'
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Gmap.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Gmap.vue
index 5f1557bc..70682677 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Gmap.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Gmap.vue
@@ -2,58 +2,64 @@
     <div class="gmap" ref="container"></div>
 </template>
 <script>
-    const loadGoogleMapsApi = require('load-google-maps-api');
+    import L from 'leaflet';
 
     export default {
-        props: [ 'lat', 'lng', 'zoom', 'markers', 'desaturate', 'apiKey' ],
-        data () {
-            return {
-                map: null,
-                mapOptions: {
-                    streetViewControl: false,
-                    scrollwheel: false,
-                    mapTypeIds: null
-                }
+        props: {
+            lat: {
+                type: String,
+                default: null
+            },
+            lng: {
+                type: String,
+                default: null
+            },
+            zoom: {
+                type: Number,
+                default: 17
+            },
+            markers: {
+                type: Array,
+                default: null
             }
         },
-        mounted () {
-            loadGoogleMapsApi({ key: this.apiKey }).then(googleMaps => {
-                this.mapOptions.mapTypeIds = googleMaps.MapTypeId.ROADMAP;
-                if (this.zoom) {
-                    this.mapOptions.zoom = this.zoom;
-                }
+        data () {
+            return {
+                map: null
+            }
+        },
+        methods: {
+            initMap () {
+                this.map = L.map(this.$refs.container, {
+                    scrollWheelZoom: false
+                });
+                this.map.setZoom(this.zoom);
                 if (this.lat && this.lng) {
-                    this.mapOptions.center = new googleMaps.LatLng(this.lat, this.lng);
-                }
-                if (this.desaturate) {
-                    this.mapOptions.styles = [{
-                        featureType: 'all',
-                        elementType: 'all',
-                        stylers: [
-                            { saturation: -100 }
-                        ]
-                    }];
-                }
-                this.map = new googleMaps.Map(this.$refs.container, this.mapOptions);
-                if (this.markers != null) {
-                    const bounds = new googleMaps.LatLngBounds();
-                    const infoWindow = new googleMaps.InfoWindow({maxWidth: 200});
+                    const center = L.latLng(this.lat, this.lng);
+                    this.map.setView(center);
+                } else if (this.markers) {
+                    const bounds = L.latLngBounds();
                     for (let item of this.markers) {
-                        let position = new googleMaps.LatLng(item.lat, item.lng);
-                        let marker = new googleMaps.Marker({
-                            position: position,
-                            map: this.map
-                        });
-                        googleMaps.event.addListener(marker, 'click', () => {
-                            infoWindow.setContent('<div><strong>' + item.name + '</strong><br>' + item.teaser +
-                                '<br><a href="' + item.uri + '">zu den Details</a></div>');
-                            infoWindow.open(this.map, marker);
-                        });
+                        const position = L.latLng(item.lat, item.lng);
+                        const marker = L.marker(position);
+                        marker.addTo(this.map);
+
+                        const popupContent = '<div><strong>' + item.name + '</strong><br>' + item.teaser +
+                            '<br><a href="' + item.uri + '">zu den Details</a></div>';
+                        marker.bindPopup(popupContent);
+
                         bounds.extend(position);
                     }
                     this.map.fitBounds(bounds);
                 }
-            });
+                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    maxZoom: 19,
+                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+                }).addTo(this.map);
+            }
+        },
+        mounted () {
+            this.initMap()
         }
     }
 </script>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/main.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/main.js
index d3ddb2b1..d9d0b674 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/main.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/main.js
@@ -6,4 +6,5 @@ require('font-awesome/css/font-awesome.min.css');
 require('cookieconsent/build/cookieconsent.min.css');
 require('@fancyapps/fancybox/dist/jquery.fancybox.min.css');
 require('slick-carousel/slick/slick.css');
+require('leaflet/dist/leaflet.css');
 require('../scss/main.scss');
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Gmap.html b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Gmap.html
index ae2ac62a..758a895a 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Gmap.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Gmap.html
@@ -19,7 +19,6 @@
                 lat="{latitude}"
                 lng="{longitude}"
                 :zoom="17"
-                api-key="{googleMapsApiKey}"
             ></gmap>
         </div>
     </f:section>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Map/General.html b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Map/General.html
index 00efe95e..6b1654b7 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Map/General.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Map/General.html
@@ -4,7 +4,7 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <gmap :markers="{markerData}" :zoom="17" api-key="{settings.googleMapsApiKey}"></gmap>
+        <gmap :markers="{markerData}" :zoom="17"></gmap>
     </f:section>
 
 </html>
diff --git a/webpack.config.js b/webpack.config.js
index a0e00d6f..b07f7e02 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,7 +12,7 @@ Encore
     .addStyleEntry('rte', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/css/rte.css')
     .createSharedEntry('vendor', [
         'jquery', 'vue', 'bootstrap-sass/assets/javascripts/bootstrap', 'slick-carousel',
-        'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox'
+        'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox', 'leaflet'
     ])
     .enableSassLoader()
     .enableVueLoader()