Replace dynamic Google maps with leaflet.js
This commit is contained in:
Björn Fromme
Generated
+4
-4
@@ -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",
|
||||
|
||||
+1
-1
@@ -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",
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(this.map);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initMap()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
lat="{latitude}"
|
||||
lng="{longitude}"
|
||||
:zoom="17"
|
||||
api-key="{googleMapsApiKey}"
|
||||
></gmap>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
@@ -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>
|
||||
|
||||
+1
-1
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user