feat: integrate with Geaoapify for maps tiles

public/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/EpProducts.typoscript

@@ -17,5 +17,8 @@ plugin.tx_epproducts {
         ratingWidgetLabel = {$plugin.tx_eptheme.settings.ratingWidgetLabel}
         skipassPageUid = {$plugin.tx_eptheme.settings.skipassPageUid}
         conceptsPageUid = {$plugin.tx_eptheme.settings.conceptsPageUid}
+        mapTileUrl = {$plugin.tx_eptheme.settings.mapTileUrl}
+        mapApiKey = {$plugin.tx_eptheme.settings.mapApiKey}
+        mapAttribution = {$plugin.tx_eptheme.settings.mapAttribution}
     }
 }

public/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/FluidStyledContent.typoscript

@@ -7,5 +7,8 @@ lib.contentElement {
     settings < plugin.tx_eptheme.settings
     settings.themekey = {$plugin.tx_eptheme.settings.themekey}
     settings.defaultAjaxUid = {$plugin.tx_eptheme.settings.defaultAjaxUid}
+    settings.mapTileUrl = {$plugin.tx_eptheme.settings.mapTileUrl}
+    settings.mapApiKey = {$plugin.tx_eptheme.settings.mapApiKey}
+    settings.mapAttribution = {$plugin.tx_eptheme.settings.mapAttribution}
 }
 

public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript

@@ -75,6 +75,13 @@ plugin.tx_eptheme {
 		# cat=eptheme/200/350; type=string; label='Corona Updates' page UID
 		coronaUpdatesPageUid =
 
+		# cat=eptheme/500/100; type=string; label=Map tile URL template (without apiKey)
+		mapTileUrl = https://maps.geoapify.com/v1/tile/osm-bright/{z}/{x}/{y}.png
+		# cat=eptheme/500/110; type=string; label=Map tile API key (Geoapify), restricted by referrer
+		mapApiKey =
+		# cat=eptheme/500/120; type=string; label=Map attribution (Geoapify and OpenStreetMap credits are both required)
+		mapAttribution = Powered by <a href="https://www.geoapify.com/">Geoapify</a> | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors
+
 		# cat=eptheme/400/100; type=string; label=Phone number general
 		phoneNumber = 0221 - 272 276 0
 		# cat=eptheme/400/110; type=string; label=Phone number WhatsApp

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"
+        <f:render partial="Map/Osm" arguments="{settings: settings, class: 'mb-8', zoom: 17, lat: latitude, lng: longitude}"/>
-             data-controller="osm"
-             data-osm-lat-value="{latitude}"
-             data-osm-lng-value="{longitude}"
-             data-osm-zoom-value="17"></div>
     </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"
+                            <f:render partial="Map/Osm" arguments="{settings: settings, lat: hotel.latitude, lng: hotel.longitude, externalLink: '{f:uri.typolink(parameter: hotel.externalLink)}'}"/>
-                                 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>
                         </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"
+                <f:render partial="Map/Osm" arguments="{settings: settings, class: 'mb-8', markers: markerData}"/>
-                     data-controller="osm"
-                     data-osm-markers-value='{markerData -> f:format.raw()}'></div>
             </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"
+            <f:render partial="Map/Osm" arguments="{settings: settings, zoom: 15, lat: hotel.latitude, lng: hotel.longitude, externalLink: '{f:uri.typolink(parameter: hotel.externalLink)}'}"/>
-                 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>
         </div>
         <f:render partial="Region/Webcam" arguments="{region: product.region}"/>
         <f:render partial="RegionMaps" arguments="{region: product.region}"/>