Replace dynamic Google maps with leaflet.js

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' ],
-        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>

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>