Add geolocation feature with map integration

Integrated the Symfony UX Map and Leaflet Map to enable interactive geolocation features. This involves adding a component to display user coordinates and a map centered on their location. Configuration files and templates were updated accordingly to support this new functionality.

.env

@@ -21,3 +21,9 @@ APP_SECRET=0aabd8ac1e1554db5b50ca9d54ad796c
 ###> nelmio/cors-bundle ###
 CORS_ALLOW_ORIGIN='^https?://(localhost|127\.0\.0\.1)(:[0-9]+)?$'
 ###< nelmio/cors-bundle ###
+
+###> symfony/ux-leaflet-map ###
+# Options available at https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Leaflet/README.md
+#
+UX_MAP_DSN=leaflet://default
+###< symfony/ux-leaflet-map ###

assets/controllers.json

@@ -58,6 +58,12 @@
                 "fetch": "eager"
             }
         },
+        "@symfony/ux-leaflet-map": {
+            "map": {
+                "enabled": true,
+                "fetch": "lazy"
+            }
+        },
         "@symfony/ux-live-component": {
             "live": {
                 "enabled": true,

composer.json

@@ -38,7 +38,9 @@
         "symfony/twig-bundle": "7.2.*",
         "symfony/uid": "7.2.*",
         "symfony/ux-icons": "^2.22",
+        "symfony/ux-leaflet-map": "^2.22",
         "symfony/ux-live-component": "^2.22",
+        "symfony/ux-map": "^2.22",
         "symfony/ux-turbo": "^2.22",
         "symfony/ux-twig-component": "^2.22",
         "symfony/validator": "7.2.*",

config/bundles.php

@@ -18,4 +18,5 @@
     Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
     Symfony\UX\Turbo\TurboBundle::class => ['all' => true],
     Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],
+    Symfony\UX\Map\UXMapBundle::class => ['all' => true],
 ];

config/packages/ux_map.yaml

@@ -0,0 +1,3 @@
+ux_map:
+    # https://symfony.com/bundles/ux-map/current/index.html#available-renderers
+    renderer: '%env(resolve:default::UX_MAP_DSN)%'

importmap.php

@@ -87,4 +87,14 @@
         'version' => '11.10.0',
         'type' => 'css',
     ],
+    'leaflet' => [
+        'version' => '1.9.4',
+    ],
+    'leaflet/dist/leaflet.min.css' => [
+        'version' => '1.9.4',
+        'type' => 'css',
+    ],
+    '@symfony/ux-leaflet-map' => [
+        'path' => './vendor/symfony/ux-leaflet-map/assets/dist/map_controller.js',
+    ],
 ];

src/Twig/Component/Geolocation.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Twig\Component;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
+use Symfony\UX\LiveComponent\Attribute\LiveListener;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+use Symfony\UX\LiveComponent\ComponentToolsTrait;
+
+#[AsLiveComponent('Geolocation')]
+class Geolocation
+{
+    use DefaultActionTrait;
+    use ComponentToolsTrait;
+
+    #[LiveProp()]
+    public int $zoom = 3;
+
+    #[LiveProp()]
+    public float $latitude = 0.0;
+
+    #[LiveProp()]
+    public float $longitude = 0.0;
+
+    #[LiveListener('geolocation:position')]
+    public function onPosition(#[LiveArg] float $latitude, #[LiveArg] float $longitude): void
+    {
+        $this->latitude = $latitude;
+        $this->longitude = $longitude;
+        $this->zoom = 12;
+    }
+}

symfony.lock

@@ -257,6 +257,15 @@
             "assets/icons/symfony.svg"
         ]
     },
+    "symfony/ux-leaflet-map": {
+        "version": "2.22",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.19",
+            "ref": "bed7e7f6d7c04e0de9665859ddbf0e842e5323e3"
+        }
+    },
     "symfony/ux-live-component": {
         "version": "2.22",
         "recipe": {
@@ -269,6 +278,18 @@
             "config/routes/ux_live_component.yaml"
         ]
     },
+    "symfony/ux-map": {
+        "version": "2.22",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.19",
+            "ref": "04de870967555f00bd82f542e9e2d29683c3d39e"
+        },
+        "files": [
+            "config/packages/ux_map.yaml"
+        ]
+    },
     "symfony/ux-turbo": {
         "version": "2.22",
         "recipe": {

templates/components/Geolocation.html.twig

@@ -0,0 +1,25 @@
+<div
+    data-controller="pwa--geolocation live"
+    {{ attributes }}
+    class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800 bg-gray-50 hover:bg-gray-100"
+>
+        <button
+            data-action="click->pwa--geolocation#watch"
+            data-pwa--geolocation-params-param='{"enableHighAccuracy":true, "maximumAge": 500, "timeout": 1000}'
+            class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800"
+        >
+            Tell me where I am
+        </button>
+        <dl>
+            <dt class="font-medium text-gray-500 dark:text-gray-400">Latitude</dt>
+            <dd class="text-gray-900 dark:text-white">{{ this.latitude }}</dd>
+            <dt class="font-medium text-gray-500 dark:text-gray-400">Longitude</dt>
+            <dd class="text-gray-900 dark:text-white">{{ this.longitude }}</dd>
+        </dl>
+        <twig:ux:map
+            :center="[this.latitude, this.longitude]"
+            :zoom="this.zoom"
+            class="w-full h-96 mt-4"
+            :markers='[{"position": [this.latitude, this.longitude], "title": "Your location"}]'
+        />
+</div>

templates/features/geolocation.html.twig

@@ -9,8 +9,12 @@
                 Geolocation
             </h2>
             <p class="mb-3 font-light text-gray-500 dark:text-gray-400 sm:text-xl">
-                TO BE COMPLETED
+                The Geolocation API enables users to share their location with a web app. Below you will see your current location on a Google Map.
             </p>
+            <p class="mb-3 font-light text-gray-500 dark:text-gray-400 sm:text-xl">
+                Your coordinates are:
+            </p>
+            <twig:Geolocation />
         </div>
     </section>
 {% endblock %}

templates/features/i18n.html.twig

@@ -0,0 +1,16 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}i18n{% endblock %}
+
+{% block body %}
+    <section class="bg-white dark:bg-gray-900">
+        <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6 ">
+            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
+                i18n
+            </h2>
+            <p class="mb-3 font-light text-gray-500 dark:text-gray-400 sm:text-xl">
+                TO BE COMPLETED
+            </p>
+        </div>
+    </section>
+{% endblock %}

templates/features/presentation.html.twig

@@ -0,0 +1,16 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Presentation{% endblock %}
+
+{% block body %}
+    <section class="bg-white dark:bg-gray-900">
+        <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6 ">
+            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
+                Presentation
+            </h2>
+            <p class="mb-3 font-light text-gray-500 dark:text-gray-400 sm:text-xl">
+                TO BE COMPLETED
+            </p>
+        </div>
+    </section>
+{% endblock %}