Skip to content

Commit d4c98c0

Browse files
sblondeausblondeau
committed
feat: custom icon on markers
1 parent 823b87c commit d4c98c0

30 files changed

+577
-41
lines changed

‎src/Map/CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
## 2.24
44

55
- Installing the package in a Symfony app using Flex won't add the `@symfony/ux-map` dependency to the `package.json` file anymore.
6+
- Add `Icon` to customize a `Marker` icon (URL or SVG content)
67

78
## 2.23
89

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ export type Point = {
33
lat: number;
44
lng: number;
55
};
6+
export type Icon = {
7+
content: string;
8+
type: 'url' | 'inline-svg' | 'ux-icon';
9+
width: number;
10+
height: number;
11+
};
612
export type Identifier = string;
713
export type WithIdentifier<T extends Record<string, unknown>> = T & {
814
'@id': Identifier;
@@ -11,6 +17,7 @@ export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = WithIdentifier<
1117
position: Point;
1218
title: string | null;
1319
infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
20+
icon?: Icon;
1421
rawOptions?: MarkerOptions;
1522
extra: Record<string, unknown>;
1623
}>;
@@ -105,6 +112,10 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
105112
definition: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
106113
element: Marker | Polygon | Polyline;
107114
}): InfoWindow;
115+
protected abstract doCreateIcon({ definition, element, }: {
116+
definition: Icon;
117+
element: Marker;
118+
}): void;
108119
private createDrawingFactory;
109120
private onDrawChanged;
110121
}

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import { Controller } from '@hotwired/stimulus';
22

33
export type Point = { lat: number; lng: number };
4-
4+
export type Icon = {
5+
content: string;
6+
type: 'url' | 'inline-svg' | 'ux-icon';
7+
width: number;
8+
height: number;
9+
};
510
export type Identifier = string;
611
export type WithIdentifier<T extends Record<string, unknown>> = T & { '@id': Identifier };
712

813
export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = WithIdentifier<{
914
position: Point;
1015
title: string | null;
1116
infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
17+
icon?: Icon;
1218
/**
1319
* Raw options passed to the marker constructor, specific to the map provider (e.g.: `L.marker()` for Leaflet).
1420
*/
@@ -268,6 +274,13 @@ export default abstract class<
268274
definition: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
269275
element: Marker | Polygon | Polyline;
270276
}): InfoWindow;
277+
protected abstract doCreateIcon({
278+
definition,
279+
element,
280+
}: {
281+
definition: Icon;
282+
element: Marker;
283+
}): void;
271284

272285
//endregion
273286

‎src/Map/config/services.php

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
namespace Symfony\Component\DependencyInjection\Loader\Configurator;
1313

14+
use Symfony\UX\Map\Icon\UxIconRenderer;
1415
use Symfony\UX\Map\Renderer\AbstractRendererFactory;
1516
use Symfony\UX\Map\Renderer\Renderer;
1617
use Symfony\UX\Map\Renderer\Renderers;
@@ -20,33 +21,40 @@
2021
/*
2122
* @author Hugo Alliaume <[email protected]>
2223
*/
24+
2325
return static function (ContainerConfigurator $container): void {
2426
$container->services()
2527
->set('ux_map.renderers', Renderers::class)
26-
->factory([service('ux_map.renderer_factory'), 'fromStrings'])
27-
->args([
28-
abstract_arg('renderers configuration'),
29-
])
28+
->factory([service('ux_map.renderer_factory'), 'fromStrings'])
29+
->args([
30+
abstract_arg('renderers configuration'),
31+
])
32+
33+
->set('.ux_map.ux_icons.renderer', UxIconRenderer::class)
34+
->args([
35+
service('.ux_icons.icon_renderer')->nullOnInvalid(),
36+
])
3037

3138
->set('ux_map.renderer_factory.abstract', AbstractRendererFactory::class)
32-
->abstract()
33-
->args([
34-
service('stimulus.helper'),
35-
])
39+
->abstract()
40+
->args([
41+
service('stimulus.helper'),
42+
service('.ux_map.ux_icons.renderer')->nullOnInvalid(),
43+
])
3644

3745
->set('ux_map.renderer_factory', Renderer::class)
38-
->args([
39-
tagged_iterator('ux_map.renderer_factory'),
40-
])
46+
->args([
47+
tagged_iterator('ux_map.renderer_factory'),
48+
])
4149

4250
->set('ux_map.twig_extension', MapExtension::class)
43-
->tag('twig.extension')
51+
->tag('twig.extension')
4452

4553
->set('ux_map.twig_runtime', MapRuntime::class)
46-
->args([
47-
service('ux_map.renderers'),
48-
])
49-
->tag('twig.runtime')
50-
->tag('ux.twig_component.twig_renderer', ['key' => 'ux:map'])
54+
->args([
55+
service('ux_map.renderers'),
56+
])
57+
->tag('twig.runtime')
58+
->tag('ux.twig_component.twig_renderer', ['key' => 'ux:map'])
5159
;
5260
};

‎src/Map/doc/index.rst

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,10 @@ You can add markers to a map using the ``addMarker()`` method::
108108
infoWindow: new InfoWindow(
109109
headerContent: '<b>Lyon</b>',
110110
content: 'The French town in the historic Rhône-Alpes region, located at the junction of the Rhône and Saône rivers.'
111+
),
112+
icon: new Icon(
113+
content: '<svg>....</svg>'
114+
icontType: 'html'
111115
)
112116
))
113117

@@ -128,6 +132,39 @@ You can add markers to a map using the ``addMarker()`` method::
128132
))
129133
;
130134

135+
Add Marker icons
136+
~~~~~~~~~~~~~~~~
137+
138+
It is possible to add icon to Marker::
139+
140+
new Marker(
141+
position: new Point(45.7640, 4.8357),
142+
title: 'Lyon',
143+
infoWindow: new InfoWindow(
144+
headerContent: '<b>Lyon</b>',
145+
content: 'The French town in the historic Rhône-Alpes region, located at the junction of the Rhône and Saône rivers.'
146+
),
147+
icon: Icon::fromInlineSvg(
148+
svg: '<svg>....</svg>'
149+
)
150+
))
151+
152+
You can add image icon (type 'url')::
153+
154+
Icon::fromUrl(
155+
url: 'https://my-image.png',
156+
width: 24, // default
157+
height: 24, // default
158+
)
159+
160+
or SVG icon (type 'html')::
161+
162+
Icon::fromInlineSvg(
163+
svg: '<svg>...</svg>',
164+
width: 36,
165+
height: 36,
166+
)
167+
131168
Remove elements from Map
132169
~~~~~~~~~~~~~~~~~~~~~~~~
133170

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import type { LoaderOptions } from '@googlemaps/js-api-loader';
22
import AbstractMapController from '@symfony/ux-map';
3-
import type { InfoWindowWithoutPositionDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition } from '@symfony/ux-map';
3+
import type { Icon, InfoWindowWithoutPositionDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition } from '@symfony/ux-map';
44
type MapOptions = Pick<google.maps.MapOptions, 'mapId' | 'gestureHandling' | 'backgroundColor' | 'disableDoubleClickZoom' | 'zoomControl' | 'zoomControlOptions' | 'mapTypeControl' | 'mapTypeControlOptions' | 'streetViewControl' | 'streetViewControlOptions' | 'fullscreenControl' | 'fullscreenControlOptions'>;
55
export default class extends AbstractMapController<MapOptions, google.maps.Map, google.maps.marker.AdvancedMarkerElementOptions, google.maps.marker.AdvancedMarkerElement, google.maps.InfoWindowOptions, google.maps.InfoWindow, google.maps.PolygonOptions, google.maps.Polygon, google.maps.PolylineOptions, google.maps.Polyline> {
66
providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'>;
77
map: google.maps.Map;
8+
parser: DOMParser;
89
connect(): Promise<void>;
910
centerValueChanged(): void;
1011
zoomValueChanged(): void;
@@ -32,6 +33,10 @@ export default class extends AbstractMapController<MapOptions, google.maps.Map,
3233
}): google.maps.InfoWindow;
3334
protected doFitBoundsToMarkers(): void;
3435
private createTextOrElement;
36+
protected doCreateIcon({ definition, element, }: {
37+
definition: Icon;
38+
element: google.maps.marker.AdvancedMarkerElement;
39+
}): void;
3540
private closeInfoWindowsExcept;
3641
}
3742
export {};

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ class map_controller extends default_1 {
126126
});
127127
}
128128
super.connect();
129+
this.parser = new DOMParser();
129130
}
130131
centerValueChanged() {
131132
if (this.map && this.hasCenterValue && this.centerValue) {
@@ -158,7 +159,7 @@ class map_controller extends default_1 {
158159
});
159160
}
160161
doCreateMarker({ definition, }) {
161-
const { '@id': _id, position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
162+
const { '@id': _id, position, title, infoWindow, icon, extra, rawOptions = {}, ...otherOptions } = definition;
162163
const marker = new _google.maps.marker.AdvancedMarkerElement({
163164
position,
164165
title,
@@ -169,6 +170,9 @@ class map_controller extends default_1 {
169170
if (infoWindow) {
170171
this.createInfoWindow({ definition: infoWindow, element: marker });
171172
}
173+
if (icon) {
174+
this.doCreateIcon({ definition: icon, element: marker });
175+
}
172176
return marker;
173177
}
174178
doRemoveMarker(marker) {
@@ -272,6 +276,20 @@ class map_controller extends default_1 {
272276
}
273277
return content;
274278
}
279+
doCreateIcon({ definition, element, }) {
280+
const { content, type, width, height } = definition;
281+
if (type === 'inline-svg') {
282+
const icon = this.parser.parseFromString(content, 'image/svg+xml').documentElement;
283+
element.content = icon;
284+
}
285+
else {
286+
const icon = document.createElement('img');
287+
icon.width = width;
288+
icon.height = height;
289+
icon.src = content;
290+
element.content = icon;
291+
}
292+
}
275293
closeInfoWindowsExcept(infoWindow) {
276294
this.infoWindows.forEach((otherInfoWindow) => {
277295
if (otherInfoWindow !== infoWindow) {

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

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import type { LoaderOptions } from '@googlemaps/js-api-loader';
1111
import { Loader } from '@googlemaps/js-api-loader';
1212
import AbstractMapController from '@symfony/ux-map';
1313
import type {
14+
Icon,
1415
InfoWindowWithoutPositionDefinition,
1516
MarkerDefinition,
1617
Point,
@@ -55,6 +56,8 @@ export default class extends AbstractMapController<
5556

5657
declare map: google.maps.Map;
5758

59+
public parser: DOMParser;
60+
5861
async connect() {
5962
if (!_google) {
6063
_google = { maps: {} as typeof google.maps };
@@ -88,6 +91,7 @@ export default class extends AbstractMapController<
8891
}
8992

9093
super.connect();
94+
this.parser = new DOMParser();
9195
}
9296

9397
public centerValueChanged(): void {
@@ -139,7 +143,7 @@ export default class extends AbstractMapController<
139143
}: {
140144
definition: MarkerDefinition<google.maps.marker.AdvancedMarkerElementOptions, google.maps.InfoWindowOptions>;
141145
}): google.maps.marker.AdvancedMarkerElement {
142-
const { '@id': _id, position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
146+
const { '@id': _id, position, title, infoWindow, icon, extra, rawOptions = {}, ...otherOptions } = definition;
143147

144148
const marker = new _google.maps.marker.AdvancedMarkerElement({
145149
position,
@@ -153,6 +157,10 @@ export default class extends AbstractMapController<
153157
this.createInfoWindow({ definition: infoWindow, element: marker });
154158
}
155159

160+
if (icon) {
161+
this.doCreateIcon({ definition: icon, element: marker });
162+
}
163+
156164
return marker;
157165
}
158166

@@ -297,6 +305,26 @@ export default class extends AbstractMapController<
297305
return content;
298306
}
299307

308+
protected doCreateIcon({
309+
definition,
310+
element,
311+
}: {
312+
definition: Icon;
313+
element: google.maps.marker.AdvancedMarkerElement;
314+
}): void {
315+
const { content, type, width, height } = definition;
316+
if (type === 'inline-svg') {
317+
const icon = this.parser.parseFromString(content, 'image/svg+xml').documentElement;
318+
element.content = icon;
319+
} else {
320+
const icon = document.createElement('img');
321+
icon.width = width;
322+
icon.height = height;
323+
icon.src = content;
324+
element.content = icon;
325+
}
326+
}
327+
300328
private closeInfoWindowsExcept(infoWindow: google.maps.InfoWindow) {
301329
this.infoWindows.forEach((otherInfoWindow) => {
302330
if (otherInfoWindow !== infoWindow) {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
namespace Symfony\UX\Map\Bridge\Google\Renderer;
1313

1414
use Symfony\UX\Map\Bridge\Google\GoogleOptions;
15+
use Symfony\UX\Map\Icon\UxIconRenderer;
1516
use Symfony\UX\Map\MapOptionsInterface;
1617
use Symfony\UX\Map\Renderer\AbstractRenderer;
1718
use Symfony\UX\StimulusBundle\Helper\StimulusHelper;
@@ -42,8 +43,9 @@ public function __construct(
4243
*/
4344
private array $libraries = [],
4445
private ?string $defaultMapId = null,
46+
?UxIconRenderer $uxIconRenderer = null,
4547
) {
46-
parent::__construct($stimulusHelper);
48+
parent::__construct($stimulusHelper, $uxIconRenderer);
4749
}
4850

4951
protected function getName(): string

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
use Symfony\UX\Map\Exception\InvalidArgumentException;
1515
use Symfony\UX\Map\Exception\UnsupportedSchemeException;
16+
use Symfony\UX\Map\Icon\UxIconRenderer;
1617
use Symfony\UX\Map\Renderer\AbstractRendererFactory;
1718
use Symfony\UX\Map\Renderer\Dsn;
1819
use Symfony\UX\Map\Renderer\RendererFactoryInterface;
@@ -26,9 +27,10 @@ final class GoogleRendererFactory extends AbstractRendererFactory implements Ren
2627
{
2728
public function __construct(
2829
StimulusHelper $stimulus,
30+
?UxIconRenderer $uxIconRenderer = null,
2931
private ?string $defaultMapId = null,
3032
) {
31-
parent::__construct($stimulus);
33+
parent::__construct($stimulus, $uxIconRenderer);
3234
}
3335

3436
public function create(Dsn $dsn): RendererInterface
@@ -51,6 +53,7 @@ public function create(Dsn $dsn): RendererInterface
5153
version: $dsn->getOption('version', 'weekly'),
5254
libraries: ['maps', 'marker', ...$dsn->getOption('libraries', [])],
5355
defaultMapId: $this->defaultMapId,
56+
uxIconRenderer: $this->uxIconRenderer,
5457
);
5558
}
5659

0 commit comments

Comments
 (0)