upload
This commit is contained in:
64
js/modern-map.js
Normal file
64
js/modern-map.js
Normal file
@@ -0,0 +1,64 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var container = document.getElementById("footer-map-modern");
|
||||
var footerColumn = document.querySelector(".page-footer .footer-col-right");
|
||||
|
||||
if (!container && footerColumn) {
|
||||
footerColumn.innerHTML =
|
||||
'<div class="modern-map-shell">' +
|
||||
'<div id="footer-map-modern" class="footer-map footer-map-modern" aria-label="Interaktive Karte zur KFZ-Meisterwerkstatt Deniz"></div>' +
|
||||
'<div class="map-location-card">' +
|
||||
'<span class="map-location-kicker">Ihr Weg zu uns</span>' +
|
||||
'<strong>KFZ-Meisterwerkstatt Deniz</strong>' +
|
||||
'<span>Spitalstraße 25 · 67659 Kaiserslautern</span>' +
|
||||
'<a href="https://www.google.com/maps/dir/?api=1&destination=Spitalstra%C3%9Fe+25%2C+67659+Kaiserslautern" target="_blank" rel="noopener">Route planen <span aria-hidden="true">↗</span></a>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
container = document.getElementById("footer-map-modern");
|
||||
}
|
||||
|
||||
if (!container || typeof maplibregl === "undefined") return;
|
||||
|
||||
var workshop = [7.763757080291502, 49.4460487802915];
|
||||
var map = new maplibregl.Map({
|
||||
container: container,
|
||||
style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
|
||||
center: workshop,
|
||||
zoom: 14.7,
|
||||
pitch: 18,
|
||||
bearing: -7,
|
||||
attributionControl: false,
|
||||
renderWorldCopies: false
|
||||
});
|
||||
|
||||
map.addControl(new maplibregl.NavigationControl({ showCompass: true }), "top-right");
|
||||
map.addControl(new maplibregl.AttributionControl({ compact: true }), "bottom-right");
|
||||
|
||||
var markerElement = document.createElement("button");
|
||||
markerElement.type = "button";
|
||||
markerElement.className = "deniz-map-marker";
|
||||
markerElement.setAttribute("aria-label", "KFZ-Meisterwerkstatt Deniz auf der Karte anzeigen");
|
||||
|
||||
var popup = new maplibregl.Popup({
|
||||
offset: 30,
|
||||
closeButton: false,
|
||||
maxWidth: "250px"
|
||||
}).setHTML("<strong>KFZ-Meisterwerkstatt Deniz</strong><span>Spitalstraße 25 · Kaiserslautern</span>");
|
||||
|
||||
new maplibregl.Marker({ element: markerElement, anchor: "bottom" })
|
||||
.setLngLat(workshop)
|
||||
.setPopup(popup)
|
||||
.addTo(map);
|
||||
|
||||
map.on("load", function () {
|
||||
window.setTimeout(function () {
|
||||
map.resize();
|
||||
popup.setLngLat(workshop).addTo(map);
|
||||
}, 120);
|
||||
});
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
map.resize();
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user