Add static map integration for timeline using maps.jetzt API

.env.dist

@@ -51,3 +51,5 @@ FRIENDLYCAPTCHA_API_KEY=placeholder
 FRIENDLYCAPTCHA_SITE_KEY=placeholder
 
 LOGGLY_TOKEN=placeholder
+
+MAPS_JETZT_API_URL=https://maps.jetzt/api/static-map

config/services.yaml

@@ -34,6 +34,7 @@ parameters:
     assets_version: '%env(ASSETS_VERSION)%'
     friendlycaptcha_api_key: '%env(FRIENDLYCAPTCHA_API_KEY)%'
     friendlycaptcha_site_key: '%env(FRIENDLYCAPTCHA_SITE_KEY)%'
+    maps_jetzt_api_url: '%env(MAPS_JETZT_API_URL)%'
 
 services:
     _defaults:
@@ -58,6 +59,7 @@ services:
             $instagramScraperProxyServerAddress: '%env(INSTAGRAM_SCRAPER_PROXY_ADDRESS)%'
             $instagramScraperProxyServerPort: '%env(INSTAGRAM_SCRAPER_PROXY_PORT)%'
             cachePrefix: 'media/cache'
+            $mapsJetztApiUrl: '%maps_jetzt_api_url%'
 
     App\:
         resource: '../src/*'

src/Criticalmass/StaticMap/Cache/StaticMapCache.php

@@ -0,0 +1,37 @@
+<?php declare(strict_types=1);
+
+namespace App\Criticalmass\StaticMap\Cache;
+
+use Symfony\Component\Cache\Adapter\FilesystemAdapter;
+use Symfony\Contracts\Cache\ItemInterface;
+
+class StaticMapCache
+{
+    private const string CACHE_NAMESPACE = 'criticalmass_staticmap';
+    private const int DEFAULT_TTL = 604800; // 7 days
+
+    private FilesystemAdapter $cache;
+
+    public function __construct()
+    {
+        $this->cache = new FilesystemAdapter(
+            self::CACHE_NAMESPACE,
+            self::DEFAULT_TTL,
+        );
+    }
+
+    public function get(string $cacheKey, callable $callback): ?string
+    {
+        return $this->cache->get($cacheKey, function (ItemInterface $item) use ($callback) {
+            $item->expiresAfter(self::DEFAULT_TTL);
+
+            return $callback();
+        });
+    }
+
+    /** @param array<string, string|int|float> $parameters */
+    public static function generateCacheKey(array $parameters): string
+    {
+        return md5(serialize($parameters));
+    }
+}

src/Criticalmass/StaticMap/StaticMapService.php

@@ -0,0 +1,102 @@
+<?php declare(strict_types=1);
+
+namespace App\Criticalmass\StaticMap;
+
+use App\Criticalmass\StaticMap\Cache\StaticMapCache;
+use Symfony\Component\HttpClient\HttpClient;
+use Symfony\Contracts\HttpClient\HttpClientInterface;
+
+class StaticMapService
+{
+    private HttpClientInterface $httpClient;
+
+    public function __construct(
+        private readonly StaticMapCache $cache,
+        private readonly string $mapsJetztApiUrl,
+    ) {
+        $this->httpClient = HttpClient::create();
+    }
+
+    public function generatePolylineMap(
+        string $polyline,
+        string $color,
+        int $width = 600,
+        int $height = 150,
+        int $strokeWidth = 3,
+    ): ?string {
+        $parameters = [
+            'type' => 'polyline',
+            'polyline' => $polyline,
+            'color' => $this->normalizeColor($color),
+            'width' => $width,
+            'height' => $height,
+            'strokeWidth' => $strokeWidth,
+        ];
+
+        $cacheKey = StaticMapCache::generateCacheKey($parameters);
+
+        return $this->cache->get($cacheKey, fn() => $this->fetchMapUrl($parameters));
+    }
+
+    public function generateMarkerMap(
+        float $latitude,
+        float $longitude,
+        string $markerType = 'city',
+        string $color = '#FF0000',
+        int $width = 600,
+        int $height = 150,
+    ): ?string {
+        $icon = $this->mapMarkerTypeToIcon($markerType);
+
+        $parameters = [
+            'type' => 'marker',
+            'latitude' => $latitude,
+            'longitude' => $longitude,
+            'icon' => $icon,
+            'color' => $this->normalizeColor($color),
+            'width' => $width,
+            'height' => $height,
+        ];
+
+        $cacheKey = StaticMapCache::generateCacheKey($parameters);
+
+        return $this->cache->get($cacheKey, fn() => $this->fetchMapUrl($parameters));
+    }
+
+    /** @param array<string, string|int|float> $parameters */
+    private function fetchMapUrl(array $parameters): ?string
+    {
+        try {
+            $queryString = http_build_query($parameters);
+            $url = sprintf('%s?%s', $this->mapsJetztApiUrl, $queryString);
+
+            $response = $this->httpClient->request('GET', $url);
+
+            if ($response->getStatusCode() !== 200) {
+                return null;
+            }
+
+            return $url;
+        } catch (\Throwable) {
+            return null;
+        }
+    }
+
+    private function normalizeColor(string $color): string
+    {
+        if (!str_starts_with($color, '#')) {
+            return '#' . $color;
+        }
+
+        return $color;
+    }
+
+    private function mapMarkerTypeToIcon(string $markerType): string
+    {
+        return match ($markerType) {
+            'ride' => 'bicycle',
+            'city' => 'location-dot',
+            default => 'location-dot',
+        };
+    }
+}

src/Twig/Extension/StaticMapTwigExtension.php

@@ -0,0 +1,62 @@
+<?php declare(strict_types=1);
+
+namespace App\Twig\Extension;
+
+use App\Criticalmass\StaticMap\StaticMapService;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+
+class StaticMapTwigExtension extends AbstractExtension
+{
+    public function __construct(
+        private readonly StaticMapService $staticMapService,
+    ) {
+    }
+
+    public function getFunctions(): array
+    {
+        return [
+            new TwigFunction('static_map_polyline', [$this, 'staticMapPolyline']),
+            new TwigFunction('static_map_marker', [$this, 'staticMapMarker']),
+        ];
+    }
+
+    public function staticMapPolyline(
+        string $polyline,
+        string $color,
+        int $width = 600,
+        int $height = 150,
+        int $strokeWidth = 3,
+    ): ?string {
+        return $this->staticMapService->generatePolylineMap(
+            $polyline,
+            $color,
+            $width,
+            $height,
+            $strokeWidth,
+        );
+    }
+
+    public function staticMapMarker(
+        float $latitude,
+        float $longitude,
+        string $markerType = 'city',
+        string $color = '#FF0000',
+        int $width = 600,
+        int $height = 150,
+    ): ?string {
+        return $this->staticMapService->generateMarkerMap(
+            $latitude,
+            $longitude,
+            $markerType,
+            $color,
+            $width,
+            $height,
+        );
+    }
+
+    public function getName(): string
+    {
+        return 'static_map_extension';
+    }
+}

templates/Timeline/Items/cityCreated.html.twig

@@ -21,24 +21,37 @@
             </div>
         </div>
 
+        {% if item.city.latitude and item.city.longitude %}
         <div class="row">
             <div class="col-md-12">
-                <div
-                    id="map-{{ item.uniqId }}"
-                    class="map"
-                    data-controller="map--map"
-                    style="height: 150px;"
-                    data-map--map-center-latitude-value="{{ item.city.latitude }}"
-                    data-map--map-center-longitude-value="{{ item.city.longitude }}"
-                    data-map--map-zoom-value="13"
-                    data-map--map-lock-map-value="true"
-                    data-map--map-marker-latitude-value="{{ item.city.latitude }}"
-                    data-map--map-marker-longitude-value="{{ item.city.longitude }}"
-                    data-map--map-marker-type-value="city"
-                    data-map--map-vector-value="false"
-                >
-                </div>
+                {% set static_map_url = static_map_marker(item.city.latitude, item.city.longitude, 'city') %}
+                {% if static_map_url %}
+                    <img
+                        src="{{ static_map_url }}"
+                        alt="Karte von {{ item.cityName }}"
+                        class="img-responsive timeline-item-ride-map"
+                        style="width: 100%; height: auto;"
+                        loading="lazy"
+                    />
+                {% else %}
+                    <div
+                        id="map-{{ item.uniqId }}"
+                        class="map"
+                        data-controller="map--map"
+                        style="height: 150px;"
+                        data-map--map-center-latitude-value="{{ item.city.latitude }}"
+                        data-map--map-center-longitude-value="{{ item.city.longitude }}"
+                        data-map--map-zoom-value="13"
+                        data-map--map-lock-map-value="true"
+                        data-map--map-marker-latitude-value="{{ item.city.latitude }}"
+                        data-map--map-marker-longitude-value="{{ item.city.longitude }}"
+                        data-map--map-marker-type-value="city"
+                        data-map--map-vector-value="false"
+                    >
+                    </div>
+                {% endif %}
             </div>
         </div>
+        {% endif %}
     </div>
 </div>

templates/Timeline/Items/cityEdit.html.twig

@@ -24,21 +24,32 @@
         {% if item.city.latitude and item.city.longitude %}
         <div class="row">
             <div class="col-md-12">
-                <div
-                    id="map-{{ item.uniqId }}"
-                    class="map"
-                    data-controller="map--map"
-                    style="height: 150px;"
-                    data-map--map-center-latitude-value="{{ item.city.latitude }}"
-                    data-map--map-center-longitude-value="{{ item.city.longitude }}"
-                    data-map--map-zoom-value="13"
-                    data-map--map-lock-map-value="true"
-                    data-map--map-marker-latitude-value="{{ item.city.latitude }}"
-                    data-map--map-marker-longitude-value="{{ item.city.longitude }}"
-                    data-map--map-marker-type-value="city"
-                    data-map--map-vector-value="false"
-                >
-                </div>
+                {% set static_map_url = static_map_marker(item.city.latitude, item.city.longitude, 'city') %}
+                {% if static_map_url %}
+                    <img
+                        src="{{ static_map_url }}"
+                        alt="Karte von {{ item.cityName }}"
+                        class="img-responsive timeline-item-ride-map"
+                        style="width: 100%; height: auto;"
+                        loading="lazy"
+                    />
+                {% else %}
+                    <div
+                        id="map-{{ item.uniqId }}"
+                        class="map"
+                        data-controller="map--map"
+                        style="height: 150px;"
+                        data-map--map-center-latitude-value="{{ item.city.latitude }}"
+                        data-map--map-center-longitude-value="{{ item.city.longitude }}"
+                        data-map--map-zoom-value="13"
+                        data-map--map-lock-map-value="true"
+                        data-map--map-marker-latitude-value="{{ item.city.latitude }}"
+                        data-map--map-marker-longitude-value="{{ item.city.longitude }}"
+                        data-map--map-marker-type-value="city"
+                        data-map--map-vector-value="false"
+                    >
+                    </div>
+                {% endif %}
             </div>
         </div>
         {% endif %}

templates/Timeline/Items/rideEdit.html.twig

@@ -24,21 +24,32 @@
         {% if item.ride.latitude and item.ride.longitude %}
             <div class="row">
                 <div class="col-md-12">
-                    <div
-                        id="map-{{ item.uniqId }}"
-                        class="map timeline-item-ride-map"
-                        data-controller="map--map"
-                        style="height: 150px;"
-                        data-map--map-center-latitude-value="{{ item.ride.latitude }}"
-                        data-map--map-center-longitude-value="{{ item.ride.longitude }}"
-                        data-map--map-zoom-value="13"
-                        data-map--map-lock-map-value="true"
-                        data-map--map-marker-latitude-value="{{ item.ride.latitude }}"
-                        data-map--map-marker-longitude-value="{{ item.ride.longitude }}"
-                        data-map--map-marker-type-value="ride"
-                        data-map--map-vector-value="false"
-                    >
-                    </div>
+                    {% set static_map_url = static_map_marker(item.ride.latitude, item.ride.longitude, 'ride') %}
+                    {% if static_map_url %}
+                        <img
+                            src="{{ static_map_url }}"
+                            alt="Karte der Tour {{ item.rideTitle }}"
+                            class="img-responsive timeline-item-ride-map"
+                            style="width: 100%; height: auto;"
+                            loading="lazy"
+                        />
+                    {% else %}
+                        <div
+                            id="map-{{ item.uniqId }}"
+                            class="map timeline-item-ride-map"
+                            data-controller="map--map"
+                            style="height: 150px;"
+                            data-map--map-center-latitude-value="{{ item.ride.latitude }}"
+                            data-map--map-center-longitude-value="{{ item.ride.longitude }}"
+                            data-map--map-zoom-value="13"
+                            data-map--map-lock-map-value="true"
+                            data-map--map-marker-latitude-value="{{ item.ride.latitude }}"
+                            data-map--map-marker-longitude-value="{{ item.ride.longitude }}"
+                            data-map--map-marker-type-value="ride"
+                            data-map--map-vector-value="false"
+                        >
+                        </div>
+                    {% endif %}
                 </div>
             </div>
         {% endif %}