...

smnandre · Aug 12, 2024 · 4d9f4f7 · 4d9f4f7
1 parent 30a433b
commit 4d9f4f7
Show file tree

Hide file tree

Showing 9 changed files with 567 additions and 362 deletions.
diff --git a/ux.symfony.com/.env b/ux.symfony.com/.env
@@ -41,3 +41,9 @@ DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
 ###> symfony/mercure-notifier ###
 MERCURE_DSN=mercure://default
 ###< symfony/mercure-notifier ###
+
+###> symfony/ux-leaflet-map ###
+# Options available at https://github.com/symfony/symfony-ux/blob/2.x/src/Map/src/Bridge/Leaflet/README.md
+#
+UX_MAP_DSN=leaflet://default
+###< symfony/ux-leaflet-map ###
diff --git a/ux.symfony.com/composer.json b/ux.symfony.com/composer.json
@@ -38,7 +38,9 @@
         "symfony/ux-dropzone": "2.x-dev",
         "symfony/ux-icons": "2.x-dev",
         "symfony/ux-lazy-image": "2.x-dev",
+        "symfony/ux-leaflet-map": "2.x-dev",
         "symfony/ux-live-component": "2.x-dev",
+        "symfony/ux-map": "2.x-dev",
         "symfony/ux-notify": "2.x-dev",
         "symfony/ux-react": "2.x-dev",
         "symfony/ux-svelte": "2.x-dev",

diff --git a/ux.symfony.com/composer.lock b/ux.symfony.com/composer.lock
diff --git a/ux.symfony.com/config/packages/ux_map.yaml b/ux.symfony.com/config/packages/ux_map.yaml
@@ -1,3 +1,3 @@
 ux_map:
-    # The directory where the JavaScript translations are dumped
-    renderer: '%env(UX_MAP_DSN)%'
+    # https://symfony.com/bundles/ux-map/current/index.html#available-renderers
+    renderer: '%env(resolve:default::UX_MAP_DSN)%'
diff --git a/ux.symfony.com/importmap.php b/ux.symfony.com/importmap.php
@@ -56,6 +56,9 @@
     '@symfony/ux-live-component' => [
         'path' => './vendor/symfony/ux-live-component/assets/dist/live_controller.js',
     ],
+    '@symfony/ux-map/abstract-map-controller' => [
+        'path' => './vendor/symfony/ux-map/assets/dist/abstract_map_controller.js',
+    ],
     'bootstrap' => [
         'version' => '5.3.3',
     ],
@@ -78,14 +81,14 @@
         'version' => '18.3.1',
     ],
     'vue' => [
-        'version' => '3.4.31',
+        'version' => '3.4.37',
         'package_specifier' => 'vue/dist/vue.esm-bundler.js',
     ],
     'swup' => [
         'version' => '3.1.1',
     ],
     'delegate-it' => [
-        'version' => '6.1.0',
+        'version' => '6.0.1',
     ],
     '@swup/debug-plugin' => [
         'version' => '3.0.0',
@@ -103,7 +106,7 @@
         'version' => '2.0.3',
     ],
     '@hotwired/turbo' => [
-        'version' => '8.0.4',
+        'version' => '8.0.5',
     ],
     'typed.js' => [
         'version' => '2.1.0',
@@ -127,22 +130,22 @@
         'version' => '10.5.14',
     ],
     '@vue/runtime-dom' => [
-        'version' => '3.4.31',
+        'version' => '3.4.37',
     ],
     '@vue/runtime-core' => [
-        'version' => '3.4.31',
+        'version' => '3.4.37',
     ],
     '@vue/shared' => [
-        'version' => '3.4.31',
+        'version' => '3.4.37',
     ],
     '@vue/reactivity' => [
-        'version' => '3.4.31',
+        'version' => '3.4.37',
     ],
     '@vue/compiler-dom' => [
-        'version' => '3.4.31',
+        'version' => '3.4.37',
     ],
     '@vue/compiler-core' => [
-        'version' => '3.4.31',
+        'version' => '3.4.37',
     ],
     'tslib' => [
         'version' => '2.6.3',
@@ -179,7 +182,7 @@
         'type' => 'css',
     ],
     'path-to-regexp' => [
-        'version' => '6.2.1',
+        'version' => '7.1.0',
     ],
     '@swup/theme' => [
         'version' => '2.1.0',
@@ -190,4 +193,8 @@
     'chart.js' => [
         'version' => '4.4.3',
     ],
+    'bootstrap/dist/css/bootstrap.min.css' => [
+        'version' => '5.3.3',
+        'type' => 'css',
+    ],
 ];
diff --git a/ux.symfony.com/src/Controller/UxPackage/MapController.php b/ux.symfony.com/src/Controller/UxPackage/MapController.php
@@ -13,20 +13,43 @@
 
 use App\Service\UxPackageRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
 use Symfony\UX\Chartjs\Model\Chart;
+use Symfony\UX\Map\Bridge\Leaflet\LeafletOptions;
+use Symfony\UX\Map\Bridge\Leaflet\Option\TileLayer;
+use Symfony\UX\Map\Map;
+use Symfony\UX\Map\Marker;
+use Symfony\UX\Map\Point;
 
 class MapController extends AbstractController
 {
     #[Route('/map', name: 'app_map')]
-    public function __invoke(UxPackageRepository $packageRepository): Response
+    public function __invoke(UxPackageRepository $packageRepository,
+    ): Response
     {
         $package = $packageRepository->find('map');
 
+        $map = (new Map())
+            ->center(new Point(48.8566, 2.3522))
+            ->zoom(6);
+
+        $map->options((new LeafletOptions())
+            ->tileLayer(new TileLayer(
+                url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                options: [
+                    'minZoom' => 5,
+                    'maxZoom' => 10,
+                ]
+            ))
+        );
+
         return $this->render('ux_packages/map.html.twig', [
             'package' => $package,
+            'map' => $map,
         ]);
     }
 }
diff --git a/ux.symfony.com/symfony.lock b/ux.symfony.com/symfony.lock
@@ -563,6 +563,15 @@
     "symfony/ux-lazy-image": {
         "version": "v2.1.1"
     },
+    "symfony/ux-leaflet-map": {
+        "version": "2.19",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.19",
+            "ref": "e696e4124071004125072f3b582a2b7e43ad58c1"
+        }
+    },
     "symfony/ux-live-component": {
         "version": "2.9999999",
         "recipe": {
@@ -575,6 +584,18 @@
             "config/routes/ux_live_component.yaml"
         ]
     },
+    "symfony/ux-map": {
+        "version": "2.19",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.19",
+            "ref": "04de870967555f00bd82f542e9e2d29683c3d39e"
+        },
+        "files": [
+            "config/packages/ux_map.yaml"
+        ]
+    },
     "symfony/ux-notify": {
         "version": "2.x-dev"
     },

diff --git a/ux.symfony.com/templates/base.html.twig b/ux.symfony.com/templates/base.html.twig
@@ -25,14 +25,6 @@
               document.documentElement.setAttribute('data-bs-theme', theme === 'light' ? 'light' : 'dark');
             </script>
             {% block importmap %}
-                <script>
-                    if (!(HTMLScriptElement && HTMLScriptElement.supports?.('importmap'))) {
-                        document.head.appendChild(Object.assign(document.createElement("script"),{
-                            src:"https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.min.js",
-                            async:true,
-                        }));
-                    }
-                </script>
                 {{ importmap('app') }}
             {% endblock %}
         {% endblock %}

diff --git a/ux.symfony.com/templates/ux_packages/map.html.twig b/ux.symfony.com/templates/ux_packages/map.html.twig
@@ -6,7 +6,7 @@
         eyebrowText: 'React Component Rendering'
     } %}
         {% block title_header %}
-            Build Interactive Maps <em>from PHP</em>
+            Interactive Maps <em>from PHP</em>
         {% endblock %}
 
         {% block sub_content %}
@@ -30,6 +30,6 @@
 
 {% block demo_content %}
     <div>
-        {{ render_map(map) }}
+        {{ render_map(map,{ style: 'height: 300px' }) }}
     </div>
 {% endblock %}