65 lines
2.3 KiB
JavaScript
65 lines
2.3 KiB
JavaScript
(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();
|
|
});
|
|
})();
|