[Map] Rework UxIconRenderer injection

Author: Kocal

src/Map/composer.json

@@ -40,7 +40,8 @@
         "symfony/framework-bundle": "^6.4|^7.0",
         "symfony/phpunit-bridge": "^6.4|^7.0",
         "symfony/twig-bundle": "^6.4|^7.0",
-        "symfony/ux-twig-component": "^2.18"
+        "symfony/ux-twig-component": "^2.18",
+        "symfony/ux-icons": "^2.18"
     },
     "conflict": {
         "symfony/ux-twig-component": "<2.21"

src/Map/config/services.php

@@ -39,7 +39,7 @@
             ->abstract()
             ->args([
                 service('stimulus.helper'),
-                service('.ux_map.ux_icons.renderer')->nullOnInvalid(),
+                service('.ux_map.ux_icons.renderer'),
             ])
 
         ->set('ux_map.renderer_factory', Renderer::class)

src/Map/src/Bridge/Google/composer.json

@@ -21,7 +21,8 @@
         "symfony/ux-map": "^2.19"
     },
     "require-dev": {
-        "symfony/phpunit-bridge": "^6.4|^7.0"
+        "symfony/phpunit-bridge": "^6.4|^7.0",
+        "symfony/ux-icons": "^2.18"
     },
     "autoload": {
         "psr-4": { "Symfony\\UX\\Map\\Bridge\\Google\\": "src/" },

src/Map/src/Bridge/Google/src/Renderer/GoogleRenderer.php

@@ -29,6 +29,7 @@
      */
     public function __construct(
         StimulusHelper $stimulusHelper,
+        UxIconRenderer $uxIconRenderer,
         #[\SensitiveParameter]
         private string $apiKey,
         private ?string $id = null,
@@ -43,7 +44,6 @@ public function __construct(
          */
         private array $libraries = [],
         private ?string $defaultMapId = null,
-        ?UxIconRenderer $uxIconRenderer = null,
     ) {
         parent::__construct($stimulusHelper, $uxIconRenderer);
     }

src/Map/src/Bridge/Google/src/Renderer/GoogleRendererFactory.php

@@ -27,7 +27,7 @@ final class GoogleRendererFactory extends AbstractRendererFactory implements Ren
 {
     public function __construct(
         StimulusHelper $stimulus,
-        ?UxIconRenderer $uxIconRenderer = null,
+        UxIconRenderer $uxIconRenderer,
         private ?string $defaultMapId = null,
     ) {
         parent::__construct($stimulus, $uxIconRenderer);
@@ -43,7 +43,8 @@ public function create(Dsn $dsn): RendererInterface
 
         return new GoogleRenderer(
             $this->stimulus,
-            $apiKey,
+            $this->uxIconRenderer,
+            apiKey: $apiKey,
             id: $dsn->getOption('id'),
             language: $dsn->getOption('language'),
             region: $dsn->getOption('region'),
@@ -53,7 +54,6 @@ public function create(Dsn $dsn): RendererInterface
             version: $dsn->getOption('version', 'weekly'),
             libraries: ['maps', 'marker', ...$dsn->getOption('libraries', [])],
             defaultMapId: $this->defaultMapId,
-            uxIconRenderer: $this->uxIconRenderer,
         );
     }
 

src/Map/src/Bridge/Google/tests/GoogleRendererFactoryTest.php

@@ -12,6 +12,7 @@
 namespace Symfony\UX\Map\Bridge\Google\Tests;
 
 use Symfony\UX\Map\Bridge\Google\Renderer\GoogleRendererFactory;
+use Symfony\UX\Map\Icon\UxIconRenderer;
 use Symfony\UX\Map\Renderer\RendererFactoryInterface;
 use Symfony\UX\Map\Test\RendererFactoryTestCase;
 use Symfony\UX\StimulusBundle\Helper\StimulusHelper;
@@ -20,7 +21,7 @@ final class GoogleRendererFactoryTest extends RendererFactoryTestCase
 {
     public function createRendererFactory(): RendererFactoryInterface
     {
-        return new GoogleRendererFactory(new StimulusHelper(null));
+        return new GoogleRendererFactory(new StimulusHelper(null), new UxIconRenderer(null));
     }
 
     public static function supportsRenderer(): iterable

src/Map/src/Bridge/Google/tests/GoogleRendererTest.php

@@ -21,7 +21,8 @@
         "symfony/ux-map": "^2.19"
     },
     "require-dev": {
-        "symfony/phpunit-bridge": "^6.4|^7.0"
+        "symfony/phpunit-bridge": "^6.4|^7.0",
+        "symfony/ux-icons": "^2.18"
     },
     "autoload": {
         "psr-4": { "Symfony\\UX\\Map\\Bridge\\Leaflet\\": "src/" },

src/Map/src/Bridge/Leaflet/composer.json

@@ -12,6 +12,7 @@
 namespace Symfony\UX\Map\Bridge\Leaflet\Tests;
 
 use Symfony\UX\Map\Bridge\Leaflet\Renderer\LeafletRendererFactory;
+use Symfony\UX\Map\Icon\UxIconRenderer;
 use Symfony\UX\Map\Renderer\RendererFactoryInterface;
 use Symfony\UX\Map\Test\RendererFactoryTestCase;
 use Symfony\UX\StimulusBundle\Helper\StimulusHelper;
@@ -20,7 +21,7 @@ final class LeafletRendererFactoryTest extends RendererFactoryTestCase
 {
     public function createRendererFactory(): RendererFactoryInterface
     {
-        return new LeafletRendererFactory(new StimulusHelper(null));
+        return new LeafletRendererFactory(new StimulusHelper(null), new UxIconRenderer(null));
     }
 
     public static function supportsRenderer(): iterable

src/Map/src/Bridge/Leaflet/tests/LeafletRendererFactoryTest.php

@@ -11,8 +11,10 @@
 
 namespace Symfony\UX\Map\Bridge\Leaflet\Tests;
 
+use Symfony\UX\Map\Bridge\Google\Renderer\GoogleRenderer;
 use Symfony\UX\Map\Bridge\Leaflet\Renderer\LeafletRenderer;
 use Symfony\UX\Map\Icon\Icon;
+use Symfony\UX\Map\Icon\UxIconRenderer;
 use Symfony\UX\Map\InfoWindow;
 use Symfony\UX\Map\Map;
 use Symfony\UX\Map\Marker;
@@ -31,24 +33,25 @@ public function provideTestRenderMap(): iterable
             ->zoom(12);
 
         $marker1 = new Marker(position: new Point(48.8566, 2.3522), title: 'Paris', id: 'marker1');
-        $marker2 = new Marker(position: new Point(48.8566, 2.3522), title: 'Lyon', infoWindow: new InfoWindow(content: 'Lyon'), id: 'marker2', icon: Icon::svg(html: '<svg></svg>'));
+        $marker2 = new Marker(position: new Point(48.8566, 2.3522), title: 'Lyon', infoWindow: new InfoWindow(content: 'Lyon'), id: 'marker2');
         $marker3 = new Marker(position: new Point(45.8566, 2.3522), title: 'Dijon', id: 'marker3');
 
         yield 'simple map' => [
             'expected_render' => '<div data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="{}" data-symfony--ux-leaflet-map--map-center-value="{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}" data-symfony--ux-leaflet-map--map-zoom-value="12" data-symfony--ux-leaflet-map--map-fit-bounds-to-markers-value="false" data-symfony--ux-leaflet-map--map-options-value="{&quot;tileLayer&quot;:{&quot;url&quot;:&quot;https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png&quot;,&quot;attribution&quot;:&quot;\u00a9 &lt;a href=\&quot;https:\/\/www.openstreetmap.org\/copyright\&quot;&gt;OpenStreetMap&lt;\/a&gt;&quot;,&quot;options&quot;:[]},&quot;@provider&quot;:&quot;leaflet&quot;}" data-symfony--ux-leaflet-map--map-markers-value="[]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[]"></div>',
-            'renderer' => new LeafletRenderer(new StimulusHelper(null)),
+            'renderer' => new LeafletRenderer(new StimulusHelper(null), new UxIconRenderer(null)),
             'map' => (clone $map),
         ];
 
         yield 'with custom attributes' => [
             'expected_render' => '<div data-controller="my-custom-controller symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="{}" data-symfony--ux-leaflet-map--map-center-value="{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}" data-symfony--ux-leaflet-map--map-zoom-value="12" data-symfony--ux-leaflet-map--map-fit-bounds-to-markers-value="false" data-symfony--ux-leaflet-map--map-options-value="{&quot;tileLayer&quot;:{&quot;url&quot;:&quot;https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png&quot;,&quot;attribution&quot;:&quot;\u00a9 &lt;a href=\&quot;https:\/\/www.openstreetmap.org\/copyright\&quot;&gt;OpenStreetMap&lt;\/a&gt;&quot;,&quot;options&quot;:[]},&quot;@provider&quot;:&quot;leaflet&quot;}" data-symfony--ux-leaflet-map--map-markers-value="[]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[]" class="map"></div>',
-            'renderer' => new LeafletRenderer(new StimulusHelper(null)),
+            'renderer' => new LeafletRenderer(new StimulusHelper(null), new UxIconRenderer(null)),
             'map' => (clone $map),
             'attributes' => ['data-controller' => 'my-custom-controller', 'class' => 'map'],
         ];
+
         yield 'with markers and infoWindows' => [
             'expected_render' => '<div data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="{}" data-symfony--ux-leaflet-map--map-center-value="{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}" data-symfony--ux-leaflet-map--map-zoom-value="12" data-symfony--ux-leaflet-map--map-fit-bounds-to-markers-value="false" data-symfony--ux-leaflet-map--map-options-value="{&quot;tileLayer&quot;:{&quot;url&quot;:&quot;https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png&quot;,&quot;attribution&quot;:&quot;\u00a9 &lt;a href=\&quot;https:\/\/www.openstreetmap.org\/copyright\&quot;&gt;OpenStreetMap&lt;\/a&gt;&quot;,&quot;options&quot;:[]},&quot;@provider&quot;:&quot;leaflet&quot;}" data-symfony--ux-leaflet-map--map-markers-value="[{&quot;position&quot;:{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522},&quot;title&quot;:&quot;Paris&quot;,&quot;infoWindow&quot;:null,&quot;icon&quot;:null,&quot;extra&quot;:[],&quot;id&quot;:&quot;marker1&quot;,&quot;@id&quot;:&quot;872feba9ebf3905d&quot;},{&quot;position&quot;:{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522},&quot;title&quot;:&quot;Lyon&quot;,&quot;infoWindow&quot;:{&quot;headerContent&quot;:null,&quot;content&quot;:&quot;Lyon&quot;,&quot;position&quot;:null,&quot;opened&quot;:false,&quot;autoClose&quot;:true,&quot;extra&quot;:[]},&quot;icon&quot;:null,&quot;extra&quot;:[],&quot;id&quot;:null,&quot;@id&quot;:&quot;bce206d73dc5c164&quot;}]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[]"></div>',
-            'renderer' => new LeafletRenderer(new StimulusHelper(null)),
+            'renderer' => new LeafletRenderer(new StimulusHelper(null), new UxIconRenderer(null)),
             'map' => (new Map())
                 ->center(new Point(48.8566, 2.3522))
                 ->zoom(12)
@@ -58,7 +61,7 @@ public function provideTestRenderMap(): iterable
 
         yield 'with all markers removed' => [
             'expected_render' => '<div data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="{}" data-symfony--ux-leaflet-map--map-center-value="{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}" data-symfony--ux-leaflet-map--map-zoom-value="12" data-symfony--ux-leaflet-map--map-fit-bounds-to-markers-value="false" data-symfony--ux-leaflet-map--map-options-value="{&quot;tileLayer&quot;:{&quot;url&quot;:&quot;https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png&quot;,&quot;attribution&quot;:&quot;\u00a9 &lt;a href=\&quot;https:\/\/www.openstreetmap.org\/copyright\&quot;&gt;OpenStreetMap&lt;\/a&gt;&quot;,&quot;options&quot;:[]},&quot;@provider&quot;:&quot;leaflet&quot;}" data-symfony--ux-leaflet-map--map-markers-value="[]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[]"></div>',
-            'renderer' => new LeafletRenderer(new StimulusHelper(null)),
+            'renderer' => new LeafletRenderer(new StimulusHelper(null), new UxIconRenderer(null)),
             'map' => (new Map())
                 ->center(new Point(48.8566, 2.3522))
                 ->zoom(12)
@@ -70,7 +73,7 @@ public function provideTestRenderMap(): iterable
 
         yield 'with marker remove and new ones added' => [
             'expected_render' => '<div data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="{}" data-symfony--ux-leaflet-map--map-center-value="{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}" data-symfony--ux-leaflet-map--map-zoom-value="12" data-symfony--ux-leaflet-map--map-fit-bounds-to-markers-value="false" data-symfony--ux-leaflet-map--map-options-value="{&quot;tileLayer&quot;:{&quot;url&quot;:&quot;https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png&quot;,&quot;attribution&quot;:&quot;\u00a9 &lt;a href=\&quot;https:\/\/www.openstreetmap.org\/copyright\&quot;&gt;OpenStreetMap&lt;\/a&gt;&quot;,&quot;options&quot;:[]},&quot;@provider&quot;:&quot;leaflet&quot;}" data-symfony--ux-leaflet-map--map-markers-value="[{&quot;position&quot;:{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522},&quot;title&quot;:&quot;Paris&quot;,&quot;infoWindow&quot;:null,&quot;icon&quot;:null,&quot;extra&quot;:[],&quot;id&quot;:&quot;marker1&quot;,&quot;@id&quot;:&quot;872feba9ebf3905d&quot;},{&quot;position&quot;:{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522},&quot;title&quot;:&quot;Lyon&quot;,&quot;infoWindow&quot;:{&quot;headerContent&quot;:null,&quot;content&quot;:&quot;Lyon&quot;,&quot;position&quot;:null,&quot;opened&quot;:false,&quot;autoClose&quot;:true,&quot;extra&quot;:[]},&quot;icon&quot;:{&quot;content&quot;:&quot;&lt;svg&gt;&lt;\/svg&gt;&quot;,&quot;type&quot;:&quot;inline-svg&quot;,&quot;width&quot;:24,&quot;height&quot;:24},&quot;extra&quot;:[],&quot;id&quot;:&quot;marker2&quot;,&quot;@id&quot;:&quot;414a0455a0c33cf0&quot;}]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[]"></div>',
-            'renderer' => new LeafletRenderer(new StimulusHelper(null)),
+            'renderer' => new LeafletRenderer(new StimulusHelper(null), new UxIconRenderer(null)),
             'map' => (new Map())
                 ->center(new Point(48.8566, 2.3522))
                 ->zoom(12)
@@ -82,7 +85,7 @@ public function provideTestRenderMap(): iterable
 
         yield 'with polygons and infoWindows' => [
             'expected_render' => '<div data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="{}" data-symfony--ux-leaflet-map--map-center-value="{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}" data-symfony--ux-leaflet-map--map-zoom-value="12" data-symfony--ux-leaflet-map--map-fit-bounds-to-markers-value="false" data-symfony--ux-leaflet-map--map-options-value="{&quot;tileLayer&quot;:{&quot;url&quot;:&quot;https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png&quot;,&quot;attribution&quot;:&quot;\u00a9 &lt;a href=\&quot;https:\/\/www.openstreetmap.org\/copyright\&quot;&gt;OpenStreetMap&lt;\/a&gt;&quot;,&quot;options&quot;:[]},&quot;@provider&quot;:&quot;leaflet&quot;}" data-symfony--ux-leaflet-map--map-markers-value="[]" data-symfony--ux-leaflet-map--map-polygons-value="[{&quot;points&quot;:[{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522},{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522},{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}],&quot;title&quot;:null,&quot;infoWindow&quot;:null,&quot;extra&quot;:[],&quot;id&quot;:&quot;polygon1&quot;,&quot;@id&quot;:&quot;35bfa920335b849d&quot;},{&quot;points&quot;:[{&quot;lat&quot;:1.1,&quot;lng&quot;:2.2},{&quot;lat&quot;:3.3,&quot;lng&quot;:4.4},{&quot;lat&quot;:5.5,&quot;lng&quot;:6.6}],&quot;title&quot;:null,&quot;infoWindow&quot;:{&quot;headerContent&quot;:null,&quot;content&quot;:&quot;Polygon&quot;,&quot;position&quot;:null,&quot;opened&quot;:false,&quot;autoClose&quot;:true,&quot;extra&quot;:[]},&quot;extra&quot;:[],&quot;id&quot;:&quot;polygon2&quot;,&quot;@id&quot;:&quot;7be1fe9f10489d73&quot;}]" data-symfony--ux-leaflet-map--map-polylines-value="[]"></div>',
-            'renderer' => new LeafletRenderer(new StimulusHelper(null)),
+            'renderer' => new LeafletRenderer(new StimulusHelper(null), new UxIconRenderer(null)),
             'map' => (new Map())
                 ->center(new Point(48.8566, 2.3522))
                 ->zoom(12)
@@ -92,12 +95,23 @@ public function provideTestRenderMap(): iterable
 
         yield 'with polylines and infoWindows' => [
             'expected_render' => '<div data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="{}" data-symfony--ux-leaflet-map--map-center-value="{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}" data-symfony--ux-leaflet-map--map-zoom-value="12" data-symfony--ux-leaflet-map--map-fit-bounds-to-markers-value="false" data-symfony--ux-leaflet-map--map-options-value="{&quot;tileLayer&quot;:{&quot;url&quot;:&quot;https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png&quot;,&quot;attribution&quot;:&quot;\u00a9 &lt;a href=\&quot;https:\/\/www.openstreetmap.org\/copyright\&quot;&gt;OpenStreetMap&lt;\/a&gt;&quot;,&quot;options&quot;:[]},&quot;@provider&quot;:&quot;leaflet&quot;}" data-symfony--ux-leaflet-map--map-markers-value="[]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[{&quot;points&quot;:[{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522},{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522},{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}],&quot;title&quot;:null,&quot;infoWindow&quot;:null,&quot;extra&quot;:[],&quot;id&quot;:&quot;polyline1&quot;,&quot;@id&quot;:&quot;823f6ee5acdb5db3&quot;},{&quot;points&quot;:[{&quot;lat&quot;:1.1,&quot;lng&quot;:2.2},{&quot;lat&quot;:3.3,&quot;lng&quot;:4.4},{&quot;lat&quot;:5.5,&quot;lng&quot;:6.6}],&quot;title&quot;:null,&quot;infoWindow&quot;:{&quot;headerContent&quot;:null,&quot;content&quot;:&quot;Polyline&quot;,&quot;position&quot;:null,&quot;opened&quot;:false,&quot;autoClose&quot;:true,&quot;extra&quot;:[]},&quot;extra&quot;:[],&quot;id&quot;:&quot;polyline2&quot;,&quot;@id&quot;:&quot;77fb0e390b5e91f1&quot;}]"></div>',
-            'renderer' => new LeafletRenderer(new StimulusHelper(null)),
+            'renderer' => new LeafletRenderer(new StimulusHelper(null), new UxIconRenderer(null)),
             'map' => (new Map())
                 ->center(new Point(48.8566, 2.3522))
                 ->zoom(12)
                 ->addPolyline(new Polyline(points: [new Point(48.8566, 2.3522), new Point(48.8566, 2.3522), new Point(48.8566, 2.3522)], id: 'polyline1'))
                 ->addPolyline(new Polyline(points: [new Point(1.1, 2.2), new Point(3.3, 4.4), new Point(5.5, 6.6)], infoWindow: new InfoWindow(content: 'Polyline'), id: 'polyline2')),
         ];
+
+        yield 'markers with icons' => [
+            'expected_render' => '<div></div>',
+            'renderer' => new GoogleRenderer(new StimulusHelper(null), new UxIconRenderer(null), 'my_api_key'),
+            'map' => (new Map())
+                ->center(new Point(48.8566, 2.3522))
+                ->zoom(12)
+                ->addMarker(new Marker(position: new Point(48.8566, 2.3522), title: 'Paris', icon: Icon::url('https://cdn.jsdelivr.net/npm/[email protected]/icons/geo-alt.svg')->width(32)->height(32)))
+                ->addMarker(new Marker(position: new Point(45.7640, 4.8357), title: 'Lyon', icon: Icon::ux('fa:map-marker')->width(32)->height(32)))
+                ->addMarker(new Marker(position: new Point(45.8566, 2.3522), title: 'Dijon', icon: Icon::svg('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">...</svg>'))),
+        ];
     }
 }