mirror of
https://github.com/symfony/ux-leaflet-map.git
synced 2026-03-24 00:52:09 +01:00
[Map] Rework UxIconRenderer injection
This commit is contained in:
Hugo Alliaume
18
assets/dist/map_controller.js
vendored
18
assets/dist/map_controller.js
vendored
@@ -209,13 +209,25 @@ class map_controller extends default_1 {
|
||||
const { type, width, height } = definition;
|
||||
let icon;
|
||||
if (type === IconTypes.Svg) {
|
||||
icon = L.divIcon({ html: definition.html, iconSize: [width, height], className: '' });
|
||||
icon = L.divIcon({
|
||||
html: definition.html,
|
||||
iconSize: [width, height],
|
||||
className: '',
|
||||
});
|
||||
}
|
||||
else if (type === IconTypes.UxIcon) {
|
||||
icon = L.divIcon({ html: definition._generated_html, iconSize: [width, height], className: '' });
|
||||
icon = L.divIcon({
|
||||
html: definition._generated_html,
|
||||
iconSize: [width, height],
|
||||
className: '',
|
||||
});
|
||||
}
|
||||
else if (type === IconTypes.Url) {
|
||||
icon = L.icon({ iconUrl: definition.url, iconSize: [width, height], className: '' });
|
||||
icon = L.icon({
|
||||
iconUrl: definition.url,
|
||||
iconSize: [width, height],
|
||||
className: '',
|
||||
});
|
||||
}
|
||||
else {
|
||||
throw new Error(`Unsupported icon type: ${type}.`);
|
||||
|
||||
@@ -42,7 +42,7 @@ export default class extends AbstractMapController<
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12.5, 41],
|
||||
popupAnchor: [0, -41],
|
||||
className: '',
|
||||
className: '', // Adding an empty class to the icon to avoid the default Leaflet styles
|
||||
});
|
||||
|
||||
super.connect();
|
||||
@@ -189,11 +189,23 @@ export default class extends AbstractMapController<
|
||||
|
||||
let icon: L.DivIcon | L.Icon;
|
||||
if (type === IconTypes.Svg) {
|
||||
icon = L.divIcon({ html: definition.html, iconSize: [width, height], className: '' });
|
||||
icon = L.divIcon({
|
||||
html: definition.html,
|
||||
iconSize: [width, height],
|
||||
className: '', // Adding an empty class to the icon to avoid the default Leaflet styles
|
||||
});
|
||||
} else if (type === IconTypes.UxIcon) {
|
||||
icon = L.divIcon({ html: definition._generated_html, iconSize: [width, height], className: '' });
|
||||
icon = L.divIcon({
|
||||
html: definition._generated_html,
|
||||
iconSize: [width, height],
|
||||
className: '', // Adding an empty class to the icon to avoid the default Leaflet styles
|
||||
});
|
||||
} else if (type === IconTypes.Url) {
|
||||
icon = L.icon({ iconUrl: definition.url, iconSize: [width, height], className: '' });
|
||||
icon = L.icon({
|
||||
iconUrl: definition.url,
|
||||
iconSize: [width, height],
|
||||
className: '', // Adding an empty class to the icon to avoid the default Leaflet styles
|
||||
});
|
||||
} else {
|
||||
throw new Error(`Unsupported icon type: ${type}.`);
|
||||
}
|
||||
|
||||
@@ -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/" },
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -11,8 +11,10 @@
|
||||
|
||||
namespace Symfony\UX\Map\Bridge\Leaflet\Tests;
|
||||
|
||||
use Symfony\UX\Icons\IconRendererInterface;
|
||||
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 @@ class LeafletRendererTest extends RendererTestCase
|
||||
->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="{"lat":48.8566,"lng":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="{"tileLayer":{"url":"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png","attribution":"\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>","options":[]},"@provider":"leaflet"}" 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="{"lat":48.8566,"lng":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="{"tileLayer":{"url":"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png","attribution":"\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>","options":[]},"@provider":"leaflet"}" 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="{"lat":48.8566,"lng":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="{"tileLayer":{"url":"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png","attribution":"\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>","options":[]},"@provider":"leaflet"}" data-symfony--ux-leaflet-map--map-markers-value="[{"position":{"lat":48.8566,"lng":2.3522},"title":"Paris","infoWindow":null,"icon":null,"extra":[],"id":"marker1","@id":"872feba9ebf3905d"},{"position":{"lat":48.8566,"lng":2.3522},"title":"Lyon","infoWindow":{"headerContent":null,"content":"Lyon","position":null,"opened":false,"autoClose":true,"extra":[]},"icon":null,"extra":[],"id":null,"@id":"bce206d73dc5c164"}]" 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 @@ class LeafletRendererTest extends RendererTestCase
|
||||
|
||||
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="{"lat":48.8566,"lng":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="{"tileLayer":{"url":"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png","attribution":"\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>","options":[]},"@provider":"leaflet"}" 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)
|
||||
@@ -69,8 +72,8 @@ class LeafletRendererTest extends RendererTestCase
|
||||
];
|
||||
|
||||
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="{"lat":48.8566,"lng":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="{"tileLayer":{"url":"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png","attribution":"\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>","options":[]},"@provider":"leaflet"}" data-symfony--ux-leaflet-map--map-markers-value="[{"position":{"lat":48.8566,"lng":2.3522},"title":"Paris","infoWindow":null,"icon":null,"extra":[],"id":"marker1","@id":"872feba9ebf3905d"},{"position":{"lat":48.8566,"lng":2.3522},"title":"Lyon","infoWindow":{"headerContent":null,"content":"Lyon","position":null,"opened":false,"autoClose":true,"extra":[]},"icon":{"content":"<svg><\/svg>","type":"inline-svg","width":24,"height":24},"extra":[],"id":"marker2","@id":"414a0455a0c33cf0"}]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[]"></div>',
|
||||
'renderer' => new LeafletRenderer(new StimulusHelper(null)),
|
||||
'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="{"lat":48.8566,"lng":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="{"tileLayer":{"url":"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png","attribution":"\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>","options":[]},"@provider":"leaflet"}" data-symfony--ux-leaflet-map--map-markers-value="[{"position":{"lat":48.8566,"lng":2.3522},"title":"Paris","infoWindow":null,"icon":null,"extra":[],"id":"marker1","@id":"872feba9ebf3905d"},{"position":{"lat":48.8566,"lng":2.3522},"title":"Lyon","infoWindow":{"headerContent":null,"content":"Lyon","position":null,"opened":false,"autoClose":true,"extra":[]},"icon":null,"extra":[],"id":"marker2","@id":"6028bf5e41f644ab"}]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[]"></div>',
|
||||
'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 @@ class LeafletRendererTest extends RendererTestCase
|
||||
|
||||
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="{"lat":48.8566,"lng":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="{"tileLayer":{"url":"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png","attribution":"\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>","options":[]},"@provider":"leaflet"}" data-symfony--ux-leaflet-map--map-markers-value="[]" data-symfony--ux-leaflet-map--map-polygons-value="[{"points":[{"lat":48.8566,"lng":2.3522},{"lat":48.8566,"lng":2.3522},{"lat":48.8566,"lng":2.3522}],"title":null,"infoWindow":null,"extra":[],"id":"polygon1","@id":"35bfa920335b849d"},{"points":[{"lat":1.1,"lng":2.2},{"lat":3.3,"lng":4.4},{"lat":5.5,"lng":6.6}],"title":null,"infoWindow":{"headerContent":null,"content":"Polygon","position":null,"opened":false,"autoClose":true,"extra":[]},"extra":[],"id":"polygon2","@id":"7be1fe9f10489d73"}]" 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,30 @@ class LeafletRendererTest extends RendererTestCase
|
||||
|
||||
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="{"lat":48.8566,"lng":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="{"tileLayer":{"url":"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png","attribution":"\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>","options":[]},"@provider":"leaflet"}" data-symfony--ux-leaflet-map--map-markers-value="[]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[{"points":[{"lat":48.8566,"lng":2.3522},{"lat":48.8566,"lng":2.3522},{"lat":48.8566,"lng":2.3522}],"title":null,"infoWindow":null,"extra":[],"id":"polyline1","@id":"823f6ee5acdb5db3"},{"points":[{"lat":1.1,"lng":2.2},{"lat":3.3,"lng":4.4},{"lat":5.5,"lng":6.6}],"title":null,"infoWindow":{"headerContent":null,"content":"Polyline","position":null,"opened":false,"autoClose":true,"extra":[]},"extra":[],"id":"polyline2","@id":"77fb0e390b5e91f1"}]"></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 data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="{}" data-symfony--ux-leaflet-map--map-center-value="{"lat":48.8566,"lng":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="{"tileLayer":{"url":"https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png","attribution":"\u00a9 <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>","options":[]},"@provider":"leaflet"}" data-symfony--ux-leaflet-map--map-markers-value="[{"position":{"lat":48.8566,"lng":2.3522},"title":"Paris","infoWindow":null,"icon":{"type":"url","width":32,"height":32,"url":"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/icons\/geo-alt.svg"},"extra":[],"id":null,"@id":"217fa57668ad8e64"},{"position":{"lat":45.764,"lng":4.8357},"title":"Lyon","infoWindow":null,"icon":{"type":"ux-icon","width":32,"height":32,"name":"fa:map-marker","_generated_html":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\">...<\/svg>"},"extra":[],"id":null,"@id":"255b208136900fc0"},{"position":{"lat":45.8566,"lng":2.3522},"title":"Dijon","infoWindow":null,"icon":{"type":"svg","width":24,"height":24,"html":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\">...<\/svg>"},"extra":[],"id":null,"@id":"1a410e92214f770c"}]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[]"></div>',
|
||||
'renderer' => new LeafletRenderer(
|
||||
new StimulusHelper(null),
|
||||
new UxIconRenderer(new class implements IconRendererInterface {
|
||||
public function renderIcon(string $name, array $attributes = []): string
|
||||
{
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">...</svg>';
|
||||
}
|
||||
})),
|
||||
'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/bootstrap-icons@1.11.3/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>'))),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user