Replace dynamic Google maps with leaflet.js

package-lock.json

@@ -5002,10 +5002,10 @@
         "invert-kv": "^1.0.0"
       }
     },
-    "load-google-maps-api": {
+    "leaflet": {
-      "version": "1.3.2",
+      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/load-google-maps-api/-/load-google-maps-api-1.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.4.tgz",
-      "integrity": "sha512-uc0kW24xpTtw2g1g3qIXGgFF+u2Rlp+7a1Hze7Esuz24tHkbblJH0LZGjRVZuL7mqIxEWp+lP7ANt1/OiZRJbA=="
+      "integrity": "sha512-FYL1LGFdj6v+2Ifpw+AcFIuIOqjNggfoLUwuwQv6+3sS21Za7Wvapq+LhbSE4NDXrEj6eYnW3y7LsaBICpyXtw=="
     },
     "load-json-file": {
       "version": "2.0.0",

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",

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'

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' ],
+        props: {
-        data () {
+            lat: {
-            return {
+                type: String,
-                map: null,
+                default: null
-                mapOptions: {
+            },
-                    streetViewControl: false,
+            lng: {
-                    scrollwheel: false,
+                type: String,
-                    mapTypeIds: null
+                default: null
-                }
+            },
+            zoom: {
+                type: Number,
+                default: 17
+            },
+            markers: {
+                type: Array,
+                default: null
             }
         },
-        mounted () {
+        data () {
-            loadGoogleMapsApi({ key: this.apiKey }).then(googleMaps => {
+            return {
-                this.mapOptions.mapTypeIds = googleMaps.MapTypeId.ROADMAP;
+                map: null
-                if (this.zoom) {
+            }
-                    this.mapOptions.zoom = this.zoom;
+        },
-                }
+        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);
+                    const center = L.latLng(this.lat, this.lng);
-                }
+                    this.map.setView(center);
-                if (this.desaturate) {
+                } else if (this.markers) {
-                    this.mapOptions.styles = [{
+                    const bounds = L.latLngBounds();
-                        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});
                     for (let item of this.markers) {
-                        let position = new googleMaps.LatLng(item.lat, item.lng);
+                        const position = L.latLng(item.lat, item.lng);
-                        let marker = new googleMaps.Marker({
+                        const marker = L.marker(position);
-                            position: position,
+                        marker.addTo(this.map);
-                            map: this.map
+
-                        });
+                        const popupContent = '<div><strong>' + item.name + '</strong><br>' + item.teaser +
-                        googleMaps.event.addListener(marker, 'click', () => {
+                            '<br><a href="' + item.uri + '">zu den Details</a></div>';
-                            infoWindow.setContent('<div><strong>' + item.name + '</strong><br>' + item.teaser +
+                        marker.bindPopup(popupContent);
-                                '<br><a href="' + item.uri + '">zu den Details</a></div>');
+
-                            infoWindow.open(this.map, marker);
-                        });
                         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>

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');

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>

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>

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()