Skip to content

Commit 9bcdd35

Browse files
javiereguiluzjaviereguiluz
committed
feature #2040 [Map] Add "extra" data for markers and infowindows (Kocal)
This PR was merged into the 2.x branch. Discussion ---------- [Map] Add "extra" data for markers and infowindows | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes <!-- please update src/**/CHANGELOG.md files --> | Issues | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT <!-- Replace this notice by a description of your feature/bugfix. This will help reviewers and should be a good start for the documentation. Additionally (see https://symfony.com/releases): - Always add tests and ensure they pass. - For new features, provide some code snippets to help understand usage. - Features and deprecations must be submitted against branch main. - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry - Never break backward compatibility (see https://symfony.com/bc). --> Actually when creating Marker and InfoWindow with Symfony UX Map, you can only pass: - Marker: `position`, `title`, and `infoWindow` - InfoWindow: `headerContent`, `content`, `position`, `opened` and `autoClose` This is great, but too strict. Adding a new property `extra`, defined by the developper and **only used by the developper** (in specific Stimulus events), is IMHO a good way to open for more extensibility. Note that the new example in the documentation is not complete yet, a 2nd PR will appears soon to customize the Marker Icon :) Commits ------- c118875 [Map] Add "extra" data for markers and infowindows
2 parents 6b8b305 + c118875 commit 9bcdd35

File tree

14 files changed

+99
-20
lines changed

14 files changed

+99
-20
lines changed

‎src/Map/assets/dist/abstract_map_controller.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
1515
title: string | null;
1616
infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
1717
rawOptions?: MarkerOptions;
18+
extra: Record<string, unknown>;
1819
};
1920
export type InfoWindowDefinition<InfoWindowOptions> = {
2021
headerContent: string | null;
@@ -23,6 +24,7 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
2324
opened: boolean;
2425
autoClose: boolean;
2526
rawOptions?: InfoWindowOptions;
27+
extra: Record<string, unknown>;
2628
};
2729
export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow> extends Controller<HTMLElement> {
2830
static values: {

‎src/Map/assets/src/abstract_map_controller.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,17 @@ export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
1414
position: Point;
1515
title: string | null;
1616
infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
17+
/**
18+
* Raw options passed to the marker constructor, specific to the map provider (e.g.: `L.marker()` for Leaflet).
19+
*/
1720
rawOptions?: MarkerOptions;
21+
/**
22+
* Extra data defined by the developer.
23+
* They are not directly used by the Stimulus controller, but they can be used by the developer with event listeners:
24+
* - `ux:map:marker:before-create`
25+
* - `ux:map:marker:after-create`
26+
*/
27+
extra: Record<string, unknown>;
1828
};
1929

2030
export type InfoWindowDefinition<InfoWindowOptions> = {
@@ -23,7 +33,18 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
2333
position: Point;
2434
opened: boolean;
2535
autoClose: boolean;
36+
/**
37+
* Raw options passed to the info window constructor,
38+
* specific to the map provider (e.g.: `google.maps.InfoWindow()` for Google Maps).
39+
*/
2640
rawOptions?: InfoWindowOptions;
41+
/**
42+
* Extra data defined by the developer.
43+
* They are not directly used by the Stimulus controller, but they can be used by the developer with event listeners:
44+
* - `ux:map:info-window:before-create`
45+
* - `ux:map:info-window:after-create`
46+
*/
47+
extra: Record<string, unknown>;
2748
};
2849

2950
export default abstract class<

‎src/Map/doc/index.rst‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Configuration is done in your ``config/packages/ux_map.yaml`` file:
3737
3838
# config/packages/ux_map.yaml
3939
ux_map:
40-
renderer: '%env(UX_MAP_DSN)%'
40+
renderer: '%env(resolve:default::UX_MAP_DSN)%'
4141
4242
The ``UX_MAP_DSN`` environment variable configure which renderer to use.
4343

@@ -82,21 +82,33 @@ A map is created by calling ``new Map()``. You can configure the center, zoom, a
8282
->zoom(6)
8383
;
8484
85-
// 2. You can add markers, with an optional info window
85+
// 2. You can add markers
8686
$myMap
8787
->addMarker(new Marker(
8888
position: new Point(48.8566, 2.3522),
8989
title: 'Paris'
9090
))
91+
92+
// With an info window associated to the marker:
9193
->addMarker(new Marker(
9294
position: new Point(45.7640, 4.8357),
9395
title: 'Lyon',
94-
// With an info window
9596
infoWindow: new InfoWindow(
9697
headerContent: '<b>Lyon</b>',
9798
content: 'The French town in the historic Rhône-Alpes region, located at the junction of the Rhône and Saône rivers.'
9899
)
99-
));
100+
))
101+
102+
// You can also pass extra data, that you can later use in your custom Stimulus controller
103+
// when listening to "ux:map:marker:before-create" event:
104+
->addMarker(new Marker(
105+
position: new Point(46.5074666, 6.633729),
106+
title: 'Olympic Parc',
107+
extra: [
108+
'icon_mask_url' => 'https://maps.gstatic.com/mapfiles/place_api/icons/v2/tree_pinlet.svg',
109+
]
110+
)
111+
;
100112
101113
// 3. And inject the map in your template to render it
102114
return $this->render('contact/index.html.twig', [

‎src/Map/src/Bridge/Google/assets/dist/map_controller.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ class default_1 extends AbstractMapController {
2525
});
2626
}
2727
doCreateMarker(definition) {
28-
const { position, title, infoWindow, rawOptions = {}, ...otherOptions } = definition;
28+
const { position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
2929
const marker = new library.AdvancedMarkerElement({
3030
position,
3131
title,
@@ -39,7 +39,7 @@ class default_1 extends AbstractMapController {
3939
return marker;
4040
}
4141
doCreateInfoWindow({ definition, marker, }) {
42-
const { headerContent, content, rawOptions = {}, ...otherOptions } = definition;
42+
const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
4343
const infoWindow = new library.InfoWindow({
4444
headerContent: this.createTextOrElement(headerContent),
4545
content: this.createTextOrElement(content),

‎src/Map/src/Bridge/Google/assets/src/map_controller.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default class extends AbstractMapController<
8787
protected doCreateMarker(
8888
definition: MarkerDefinition<google.maps.marker.AdvancedMarkerElementOptions, google.maps.InfoWindowOptions>
8989
): google.maps.marker.AdvancedMarkerElement {
90-
const { position, title, infoWindow, rawOptions = {}, ...otherOptions } = definition;
90+
const { position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
9191

9292
const marker = new library.AdvancedMarkerElement({
9393
position,
@@ -114,7 +114,7 @@ export default class extends AbstractMapController<
114114
>['infoWindow'];
115115
marker: google.maps.marker.AdvancedMarkerElement;
116116
}): google.maps.InfoWindow {
117-
const { headerContent, content, rawOptions = {}, ...otherOptions } = definition;
117+
const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
118118

119119
const infoWindow = new library.InfoWindow({
120120
headerContent: this.createTextOrElement(headerContent),

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ public function provideTestRenderMap(): iterable
4848
];
4949

5050
yield 'with markers and infoWindows' => [
51-
'expected_render' => '<div data-controller="symfony--ux-google-map--map" data-symfony--ux-google-map--map-provider-options-value="&#x7B;&quot;apiKey&quot;&#x3A;&quot;api_key&quot;&#x7D;" data-symfony--ux-google-map--map-view-value="&#x7B;&quot;center&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;zoom&quot;&#x3A;12,&quot;fitBoundsToMarkers&quot;&#x3A;false,&quot;options&quot;&#x3A;&#x7B;&quot;mapId&quot;&#x3A;null,&quot;gestureHandling&quot;&#x3A;&quot;auto&quot;,&quot;backgroundColor&quot;&#x3A;null,&quot;disableDoubleClickZoom&quot;&#x3A;false,&quot;zoomControlOptions&quot;&#x3A;&#x7B;&quot;position&quot;&#x3A;22&#x7D;,&quot;mapTypeControlOptions&quot;&#x3A;&#x7B;&quot;mapTypeIds&quot;&#x3A;&#x5B;&#x5D;,&quot;position&quot;&#x3A;14,&quot;style&quot;&#x3A;0&#x7D;,&quot;streetViewControlOptions&quot;&#x3A;&#x7B;&quot;position&quot;&#x3A;22&#x7D;,&quot;fullscreenControlOptions&quot;&#x3A;&#x7B;&quot;position&quot;&#x3A;20&#x7D;&#x7D;,&quot;markers&quot;&#x3A;&#x5B;&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;title&quot;&#x3A;&quot;Paris&quot;,&quot;infoWindow&quot;&#x3A;null&#x7D;,&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;title&quot;&#x3A;&quot;Lyon&quot;,&quot;infoWindow&quot;&#x3A;&#x7B;&quot;headerContent&quot;&#x3A;null,&quot;content&quot;&#x3A;&quot;Lyon&quot;,&quot;position&quot;&#x3A;null,&quot;opened&quot;&#x3A;false,&quot;autoClose&quot;&#x3A;true&#x7D;&#x7D;&#x5D;&#x7D;"></div>',
51+
'expected_render' => '<div data-controller="symfony--ux-google-map--map" data-symfony--ux-google-map--map-provider-options-value="&#x7B;&quot;apiKey&quot;&#x3A;&quot;api_key&quot;&#x7D;" data-symfony--ux-google-map--map-view-value="&#x7B;&quot;center&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;zoom&quot;&#x3A;12,&quot;fitBoundsToMarkers&quot;&#x3A;false,&quot;options&quot;&#x3A;&#x7B;&quot;mapId&quot;&#x3A;null,&quot;gestureHandling&quot;&#x3A;&quot;auto&quot;,&quot;backgroundColor&quot;&#x3A;null,&quot;disableDoubleClickZoom&quot;&#x3A;false,&quot;zoomControlOptions&quot;&#x3A;&#x7B;&quot;position&quot;&#x3A;22&#x7D;,&quot;mapTypeControlOptions&quot;&#x3A;&#x7B;&quot;mapTypeIds&quot;&#x3A;&#x5B;&#x5D;,&quot;position&quot;&#x3A;14,&quot;style&quot;&#x3A;0&#x7D;,&quot;streetViewControlOptions&quot;&#x3A;&#x7B;&quot;position&quot;&#x3A;22&#x7D;,&quot;fullscreenControlOptions&quot;&#x3A;&#x7B;&quot;position&quot;&#x3A;20&#x7D;&#x7D;,&quot;markers&quot;&#x3A;&#x5B;&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;title&quot;&#x3A;&quot;Paris&quot;,&quot;infoWindow&quot;&#x3A;null,&quot;extra&quot;&#x3A;&#x7B;&#x7D;&#x7D;,&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;title&quot;&#x3A;&quot;Lyon&quot;,&quot;infoWindow&quot;&#x3A;&#x7B;&quot;headerContent&quot;&#x3A;null,&quot;content&quot;&#x3A;&quot;Lyon&quot;,&quot;position&quot;&#x3A;null,&quot;opened&quot;&#x3A;false,&quot;autoClose&quot;&#x3A;true,&quot;extra&quot;&#x3A;&#x7B;&#x7D;&#x7D;,&quot;extra&quot;&#x3A;&#x7B;&#x7D;&#x7D;&#x5D;&#x7D;"></div>',
5252
'renderer' => new GoogleRenderer(new StimulusHelper(null), apiKey: 'api_key'),
5353
'map' => (clone $map)
5454
->addMarker(new Marker(new Point(48.8566, 2.3522), 'Paris'))

‎src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@ class map_controller extends AbstractMapController {
2626
return map$1;
2727
}
2828
doCreateMarker(definition) {
29-
const { position, title, infoWindow, rawOptions = {}, ...otherOptions } = definition;
29+
const { position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
3030
const marker$1 = marker(position, { title, ...otherOptions, ...rawOptions }).addTo(this.map);
3131
if (infoWindow) {
3232
this.createInfoWindow({ definition: infoWindow, marker: marker$1 });
3333
}
3434
return marker$1;
3535
}
3636
doCreateInfoWindow({ definition, marker, }) {
37-
const { headerContent, content, rawOptions = {}, ...otherOptions } = definition;
37+
const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
3838
marker.bindPopup([headerContent, content].filter((x) => x).join('<br>'), { ...otherOptions, ...rawOptions });
3939
if (definition.opened) {
4040
marker.openPopup();

‎src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default class extends AbstractMapController<
5151
}
5252

5353
protected doCreateMarker(definition: MarkerDefinition): Marker {
54-
const { position, title, infoWindow, rawOptions = {}, ...otherOptions } = definition;
54+
const { position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
5555

5656
const marker = createMarker(position, { title, ...otherOptions, ...rawOptions }).addTo(this.map);
5757

@@ -69,7 +69,7 @@ export default class extends AbstractMapController<
6969
definition: MarkerDefinition['infoWindow'];
7070
marker: Marker;
7171
}): Popup {
72-
const { headerContent, content, rawOptions = {}, ...otherOptions } = definition;
72+
const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
7373

7474
marker.bindPopup([headerContent, content].filter((x) => x).join('<br>'), { ...otherOptions, ...rawOptions });
7575
if (definition.opened) {

‎src/Map/src/Bridge/Leaflet/tests/LeafletRendererTest.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ public function provideTestRenderMap(): iterable
4141
];
4242

4343
yield 'with markers and infoWindows' => [
44-
'expected_render' => '<div data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="&#x7B;&#x7D;" data-symfony--ux-leaflet-map--map-view-value="&#x7B;&quot;center&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;zoom&quot;&#x3A;12,&quot;fitBoundsToMarkers&quot;&#x3A;false,&quot;options&quot;&#x3A;&#x7B;&quot;tileLayer&quot;&#x3A;&#x7B;&quot;url&quot;&#x3A;&quot;https&#x3A;&#x5C;&#x2F;&#x5C;&#x2F;tile.openstreetmap.org&#x5C;&#x2F;&#x7B;z&#x7D;&#x5C;&#x2F;&#x7B;x&#x7D;&#x5C;&#x2F;&#x7B;y&#x7D;.png&quot;,&quot;attribution&quot;&#x3A;&quot;&#x5C;u00a9&#x20;&lt;a&#x20;href&#x3D;&#x5C;&quot;https&#x3A;&#x5C;&#x2F;&#x5C;&#x2F;www.openstreetmap.org&#x5C;&#x2F;copyright&#x5C;&quot;&gt;OpenStreetMap&lt;&#x5C;&#x2F;a&gt;&quot;,&quot;options&quot;&#x3A;&#x7B;&#x7D;&#x7D;&#x7D;,&quot;markers&quot;&#x3A;&#x5B;&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;title&quot;&#x3A;&quot;Paris&quot;,&quot;infoWindow&quot;&#x3A;null&#x7D;,&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;title&quot;&#x3A;&quot;Lyon&quot;,&quot;infoWindow&quot;&#x3A;&#x7B;&quot;headerContent&quot;&#x3A;null,&quot;content&quot;&#x3A;&quot;Lyon&quot;,&quot;position&quot;&#x3A;null,&quot;opened&quot;&#x3A;false,&quot;autoClose&quot;&#x3A;true&#x7D;&#x7D;&#x5D;&#x7D;"></div>',
44+
'expected_render' => '<div data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="&#x7B;&#x7D;" data-symfony--ux-leaflet-map--map-view-value="&#x7B;&quot;center&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;zoom&quot;&#x3A;12,&quot;fitBoundsToMarkers&quot;&#x3A;false,&quot;options&quot;&#x3A;&#x7B;&quot;tileLayer&quot;&#x3A;&#x7B;&quot;url&quot;&#x3A;&quot;https&#x3A;&#x5C;&#x2F;&#x5C;&#x2F;tile.openstreetmap.org&#x5C;&#x2F;&#x7B;z&#x7D;&#x5C;&#x2F;&#x7B;x&#x7D;&#x5C;&#x2F;&#x7B;y&#x7D;.png&quot;,&quot;attribution&quot;&#x3A;&quot;&#x5C;u00a9&#x20;&lt;a&#x20;href&#x3D;&#x5C;&quot;https&#x3A;&#x5C;&#x2F;&#x5C;&#x2F;www.openstreetmap.org&#x5C;&#x2F;copyright&#x5C;&quot;&gt;OpenStreetMap&lt;&#x5C;&#x2F;a&gt;&quot;,&quot;options&quot;&#x3A;&#x7B;&#x7D;&#x7D;&#x7D;,&quot;markers&quot;&#x3A;&#x5B;&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;title&quot;&#x3A;&quot;Paris&quot;,&quot;infoWindow&quot;&#x3A;null,&quot;extra&quot;&#x3A;&#x7B;&#x7D;&#x7D;,&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;title&quot;&#x3A;&quot;Lyon&quot;,&quot;infoWindow&quot;&#x3A;&#x7B;&quot;headerContent&quot;&#x3A;null,&quot;content&quot;&#x3A;&quot;Lyon&quot;,&quot;position&quot;&#x3A;null,&quot;opened&quot;&#x3A;false,&quot;autoClose&quot;&#x3A;true,&quot;extra&quot;&#x3A;&#x7B;&#x7D;&#x7D;,&quot;extra&quot;&#x3A;&#x7B;&#x7D;&#x7D;&#x5D;&#x7D;"></div>',
4545
'renderer' => new LeafletRenderer(new StimulusHelper(null)),
4646
'map' => (clone $map)
4747
->addMarker(new Marker(new Point(48.8566, 2.3522), 'Paris'))

‎src/Map/src/InfoWindow.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,16 @@
1818
*/
1919
final readonly class InfoWindow
2020
{
21+
/**
22+
* @param array<string, mixed> $extra Extra data, can be used by the developer to store additional information and use them later JavaScript side
23+
*/
2124
public function __construct(
2225
private ?string $headerContent = null,
2326
private ?string $content = null,
2427
private ?Point $position = null,
2528
private bool $opened = false,
2629
private bool $autoClose = true,
30+
private array $extra = [],
2731
) {
2832
}
2933

@@ -35,6 +39,7 @@ public function toArray(): array
3539
'position' => $this->position?->toArray(),
3640
'opened' => $this->opened,
3741
'autoClose' => $this->autoClose,
42+
'extra' => (object) $this->extra,
3843
];
3944
}
4045
}

0 commit comments

Comments
 (0)