feat: integrate with Geaoapify for maps tiles

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/osm_controller.js

@@ -9,6 +9,9 @@ export default class extends Controller {
         zoom: Number,
         externalLink: String,
         markers: Array,
+        tileUrl: String,
+        apiKey: String,
+        attribution: String,
     }
 
     connect() {
@@ -44,9 +47,21 @@ export default class extends Controller {
             }
             this.map.fitBounds(bounds)
         }
-        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        L.tileLayer(this.tileUrl(), {
             maxZoom: 19,
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            // The site sends Referrer-Policy: same-origin, which strips the Referer on
+            // cross-origin requests. The tile provider needs it to match its key against
+            // the allowed-domain list, so widen the policy for tile requests only.
+            referrerPolicy: 'strict-origin-when-cross-origin',
+            attribution: this.attributionValue
         }).addTo(this.map)
     }
+
+    tileUrl() {
+        if ('' === this.tileUrlValue || '' === this.apiKeyValue) {
+            return ''
+        }
+        const separator = -1 === this.tileUrlValue.indexOf('?') ? '?' : '&'
+        return this.tileUrlValue + separator + 'apiKey=' + encodeURIComponent(this.apiKeyValue)
+    }
 }

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Map/Osm.html

@@ -0,0 +1,10 @@
+<div class="w-full aspect-w-16 aspect-h-9 {class}"
+     data-controller="osm"
+     data-osm-tile-url-value="{settings.mapTileUrl}"
+     data-osm-api-key-value="{settings.mapApiKey}"
+     data-osm-attribution-value="{settings.mapAttribution}"
+     <f:if condition="{zoom}">data-osm-zoom-value="{zoom}"</f:if>
+     <f:if condition="{lat}">data-osm-lat-value="{lat}" data-osm-lng-value="{lng}"</f:if>
+     <f:if condition="{externalLink}">data-osm-external-link-value="{externalLink}"</f:if>
+     <f:if condition="{markers}">data-osm-markers-value='{markers -> f:format.raw()}'</f:if>
+></div>

public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Gmap.html

@@ -13,11 +13,7 @@
             <f:variable name="latitude" value="{region.0.data.latitude}"/>
             <f:variable name="longitude" value="{region.0.data.longitude}"/>
         </f:if>
-        <div class="w-full aspect-w-16 aspect-h-9 mb-8"
-             data-controller="osm"
-             data-osm-lat-value="{latitude}"
-             data-osm-lng-value="{longitude}"
-             data-osm-zoom-value="17"></div>
+        <f:render partial="Map/Osm" arguments="{settings: settings, class: 'mb-8', zoom: 17, lat: latitude, lng: longitude}"/>
     </f:section>
 
 </html>

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Detail.html

@@ -26,11 +26,7 @@
                     <div class="bg-zinc-50 p-4">
                         <p><strong>Lage</strong></p>
                         <div>
-                            <div class="w-full aspect-w-16 aspect-h-9"
-                                 data-controller="osm"
-                                 data-osm-lat-value="{hotel.latitude}"
-                                 data-osm-lng-value="{hotel.longitude}"
-                                 data-osm-external-link-value="{f:uri.typolink(parameter: hotel.externalLink)}"></div>
+                            <f:render partial="Map/Osm" arguments="{settings: settings, lat: hotel.latitude, lng: hotel.longitude, externalLink: '{f:uri.typolink(parameter: hotel.externalLink)}'}"/>
                         </div>
                     </div>
                 </div>

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Map/General.html

@@ -7,9 +7,7 @@
     <f:section name="Main">
         <f:if condition="{markerData}">
             <ep:container data="{data}">
-                <div class="w-full aspect-w-16 aspect-h-9 mb-8"
-                     data-controller="osm"
-                     data-osm-markers-value='{markerData -> f:format.raw()}'></div>
+                <f:render partial="Map/Osm" arguments="{settings: settings, class: 'mb-8', markers: markerData}"/>
             </ep:container>
         </f:if>
     </f:section>

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html

@@ -216,12 +216,7 @@
             <p class="font-bold mb-2">
                 Lage
             </p>
-            <div class="w-full aspect-w-16 aspect-h-9"
-                 data-controller="osm"
-                 data-osm-zoom-value="15"
-                 data-osm-lat-value="{hotel.latitude}"
-                 data-osm-lng-value="{hotel.longitude}"
-                 data-osm-external-link-value="{f:uri.typolink(parameter: hotel.externalLink)}"></div>
+            <f:render partial="Map/Osm" arguments="{settings: settings, zoom: 15, lat: hotel.latitude, lng: hotel.longitude, externalLink: '{f:uri.typolink(parameter: hotel.externalLink)}'}"/>
         </div>
         <f:render partial="Region/Webcam" arguments="{region: product.region}"/>
         <f:render partial="RegionMaps" arguments="{region: product.region}"/>