@symfony/ux-leaflet-map 2.32.0 → 2.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -5
- package/dist/map_controller.d.ts +295 -64
- package/dist/map_controller.js +348 -384
- package/package.json +6 -11
package/README.md
CHANGED
|
@@ -6,9 +6,10 @@ JavaScript assets of the [symfony/ux-leaflet-map](https://packagist.org/packages
|
|
|
6
6
|
|
|
7
7
|
This npm package is **reserved for advanced users** who want to decouple their JavaScript dependencies from their PHP dependencies (e.g., when building Docker images, running JavaScript-only pipelines, etc.).
|
|
8
8
|
|
|
9
|
-
We **strongly recommend not installing this package directly**, but instead
|
|
9
|
+
We **strongly recommend not installing this package directly**, but instead install the PHP package [symfony/ux-leaflet-map](https://packagist.org/packages/symfony/ux-leaflet-map) in your Symfony application with [Flex](https://github.com/symfony/flex) enabled.
|
|
10
10
|
|
|
11
11
|
If you still want to install this package directly, please make sure its version exactly matches [symfony/ux-leaflet-map](https://packagist.org/packages/symfony/ux-leaflet-map) PHP package version:
|
|
12
|
+
|
|
12
13
|
```shell
|
|
13
14
|
composer require symfony/ux-leaflet-map:2.23.0
|
|
14
15
|
npm add @symfony/ux-leaflet-map@2.23.0
|
|
@@ -18,7 +19,7 @@ npm add @symfony/ux-leaflet-map@2.23.0
|
|
|
18
19
|
|
|
19
20
|
## Resources
|
|
20
21
|
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
- [Documentation](https://github.com/symfony/ux/tree/2.x/src/Map/src/Bridge/Google)
|
|
23
|
+
- [Report issues](https://github.com/symfony/ux/issues) and
|
|
24
|
+
[send Pull Requests](https://github.com/symfony/ux/pulls)
|
|
25
|
+
in the [main Symfony UX repository](https://github.com/symfony/ux)
|
package/dist/map_controller.d.ts
CHANGED
|
@@ -1,66 +1,297 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
type
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
prefix: string | false;
|
|
9
|
-
};
|
|
10
|
-
zoomControlOptions?: {
|
|
11
|
-
position: ControlPosition;
|
|
12
|
-
zoomInText: string;
|
|
13
|
-
zoomInTitle: string;
|
|
14
|
-
zoomOutText: string;
|
|
15
|
-
zoomOutTitle: string;
|
|
16
|
-
};
|
|
17
|
-
tileLayer: {
|
|
18
|
-
url: string;
|
|
19
|
-
attribution: string;
|
|
20
|
-
options: Record<string, unknown>;
|
|
21
|
-
} | false;
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
|
2
|
+
import "leaflet/dist/leaflet.min.css";
|
|
3
|
+
import * as L from "leaflet";
|
|
4
|
+
import { CircleOptions, ControlPosition, MapOptions, MarkerOptions, PolylineOptions, PopupOptions } from "leaflet";
|
|
5
|
+
type Point = {
|
|
6
|
+
lat: number;
|
|
7
|
+
lng: number;
|
|
22
8
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
9
|
+
type Identifier = string;
|
|
10
|
+
type WithIdentifier<T extends Record<string, unknown>> = T & {
|
|
11
|
+
'@id': Identifier;
|
|
12
|
+
};
|
|
13
|
+
type ExtraData = Record<string, unknown>;
|
|
14
|
+
declare const IconTypes: {
|
|
15
|
+
readonly Url: "url";
|
|
16
|
+
readonly Svg: "svg";
|
|
17
|
+
readonly UxIcon: "ux-icon";
|
|
18
|
+
};
|
|
19
|
+
type Icon = {
|
|
20
|
+
width: number;
|
|
21
|
+
height: number;
|
|
22
|
+
} & ({
|
|
23
|
+
type: typeof IconTypes.UxIcon;
|
|
24
|
+
name: string;
|
|
25
|
+
_generated_html: string;
|
|
26
|
+
} | {
|
|
27
|
+
type: typeof IconTypes.Url;
|
|
28
|
+
url: string;
|
|
29
|
+
} | {
|
|
30
|
+
type: typeof IconTypes.Svg;
|
|
31
|
+
html: string;
|
|
32
|
+
});
|
|
33
|
+
type MapDefinition<MapOptions, BridgeMapOptions> = {
|
|
34
|
+
center: Point | null;
|
|
35
|
+
zoom: number | null;
|
|
36
|
+
minZoom: number | null;
|
|
37
|
+
maxZoom: number | null;
|
|
38
|
+
options: MapOptions;
|
|
39
|
+
bridgeOptions?: BridgeMapOptions;
|
|
40
|
+
extra: ExtraData;
|
|
41
|
+
};
|
|
42
|
+
type MarkerDefinition<BridgeMarkerOptions, BridgeInfoWindowOptions> = WithIdentifier<{
|
|
43
|
+
position: Point;
|
|
44
|
+
title: string | null;
|
|
45
|
+
infoWindow?: Omit<InfoWindowDefinition<BridgeInfoWindowOptions>, 'position'>;
|
|
46
|
+
icon?: Icon;
|
|
47
|
+
rawOptions?: BridgeMarkerOptions;
|
|
48
|
+
bridgeOptions?: BridgeMarkerOptions;
|
|
49
|
+
extra: ExtraData;
|
|
50
|
+
}>;
|
|
51
|
+
type PolygonDefinition<BridgePolygonOptions, BridgeInfoWindowOptions> = WithIdentifier<{
|
|
52
|
+
infoWindow?: Omit<InfoWindowDefinition<BridgeInfoWindowOptions>, 'position'>;
|
|
53
|
+
points: Array<Point> | Array<Array<Point>>;
|
|
54
|
+
title: string | null;
|
|
55
|
+
rawOptions?: BridgePolygonOptions;
|
|
56
|
+
bridgeOptions?: BridgePolygonOptions;
|
|
57
|
+
extra: ExtraData;
|
|
58
|
+
}>;
|
|
59
|
+
type PolylineDefinition<BridgePolylineOptions, BridgeInfoWindowOptions> = WithIdentifier<{
|
|
60
|
+
infoWindow?: Omit<InfoWindowDefinition<BridgeInfoWindowOptions>, 'position'>;
|
|
61
|
+
points: Array<Point>;
|
|
62
|
+
title: string | null;
|
|
63
|
+
rawOptions?: BridgePolylineOptions;
|
|
64
|
+
bridgeOptions?: BridgePolylineOptions;
|
|
65
|
+
extra: ExtraData;
|
|
66
|
+
}>;
|
|
67
|
+
type CircleDefinition<BridgeCircleOptions, BridgeInfoWindowOptions> = WithIdentifier<{
|
|
68
|
+
infoWindow?: Omit<InfoWindowDefinition<BridgeInfoWindowOptions>, 'position'>;
|
|
69
|
+
center: Point;
|
|
70
|
+
radius: number;
|
|
71
|
+
title: string | null;
|
|
72
|
+
rawOptions?: BridgeCircleOptions;
|
|
73
|
+
bridgeOptions?: BridgeCircleOptions;
|
|
74
|
+
extra: ExtraData;
|
|
75
|
+
}>;
|
|
76
|
+
type RectangleDefinition<BridgeRectangleOptions, BridgeInfoWindowOptions> = WithIdentifier<{
|
|
77
|
+
infoWindow?: Omit<InfoWindowDefinition<BridgeInfoWindowOptions>, 'position'>;
|
|
78
|
+
southWest: Point;
|
|
79
|
+
northEast: Point;
|
|
80
|
+
title: string | null;
|
|
81
|
+
rawOptions?: BridgeRectangleOptions;
|
|
82
|
+
bridgeOptions?: BridgeRectangleOptions;
|
|
83
|
+
extra: ExtraData;
|
|
84
|
+
}>;
|
|
85
|
+
type InfoWindowDefinition<BridgeInfoWindowOptions> = {
|
|
86
|
+
headerContent: string | null;
|
|
87
|
+
content: string | null;
|
|
88
|
+
position: Point;
|
|
89
|
+
opened: boolean;
|
|
90
|
+
autoClose: boolean;
|
|
91
|
+
rawOptions?: BridgeInfoWindowOptions;
|
|
92
|
+
bridgeOptions?: BridgeInfoWindowOptions;
|
|
93
|
+
extra: ExtraData;
|
|
94
|
+
};
|
|
95
|
+
declare abstract class export_default$1<MapOptions, BridgeMapOptions, BridgeMap, BridgeMarkerOptions, BridgeMarker, BridgeInfoWindowOptions, BridgeInfoWindow, BridgePolygonOptions, BridgePolygon, BridgePolylineOptions, BridgePolyline, BridgeCircleOptions, BridgeCircle, BridgeRectangleOptions, BridgeRectangle> extends Controller<HTMLElement> {
|
|
96
|
+
static values: {
|
|
97
|
+
providerOptions: ObjectConstructor;
|
|
98
|
+
center: ObjectConstructor;
|
|
99
|
+
zoom: NumberConstructor;
|
|
100
|
+
minZoom: NumberConstructor;
|
|
101
|
+
maxZoom: NumberConstructor;
|
|
102
|
+
fitBoundsToMarkers: BooleanConstructor;
|
|
103
|
+
markers: ArrayConstructor;
|
|
104
|
+
polygons: ArrayConstructor;
|
|
105
|
+
polylines: ArrayConstructor;
|
|
106
|
+
circles: ArrayConstructor;
|
|
107
|
+
rectangles: ArrayConstructor;
|
|
108
|
+
options: ObjectConstructor;
|
|
109
|
+
extra: ObjectConstructor;
|
|
110
|
+
};
|
|
111
|
+
centerValue: Point | null;
|
|
112
|
+
zoomValue: number | null;
|
|
113
|
+
minZoomValue: number | null;
|
|
114
|
+
maxZoomValue: number | null;
|
|
115
|
+
fitBoundsToMarkersValue: boolean;
|
|
116
|
+
markersValue: Array<MarkerDefinition<BridgeMarkerOptions, BridgeInfoWindowOptions>>;
|
|
117
|
+
polygonsValue: Array<PolygonDefinition<BridgePolygonOptions, BridgeInfoWindowOptions>>;
|
|
118
|
+
polylinesValue: Array<PolylineDefinition<BridgePolylineOptions, BridgeInfoWindowOptions>>;
|
|
119
|
+
circlesValue: Array<CircleDefinition<BridgeCircleOptions, BridgeInfoWindowOptions>>;
|
|
120
|
+
rectanglesValue: Array<RectangleDefinition<BridgeRectangleOptions, BridgeInfoWindowOptions>>;
|
|
121
|
+
optionsValue: MapOptions;
|
|
122
|
+
extraValue: Record<string, unknown>;
|
|
123
|
+
hasCenterValue: boolean;
|
|
124
|
+
hasZoomValue: boolean;
|
|
125
|
+
hasMinZoomValue: boolean;
|
|
126
|
+
hasMaxZoomValue: boolean;
|
|
127
|
+
hasFitBoundsToMarkersValue: boolean;
|
|
128
|
+
hasMarkersValue: boolean;
|
|
129
|
+
hasPolygonsValue: boolean;
|
|
130
|
+
hasPolylinesValue: boolean;
|
|
131
|
+
hasCirclesValue: boolean;
|
|
132
|
+
hasRectanglesValue: boolean;
|
|
133
|
+
hasOptionsValue: boolean;
|
|
134
|
+
hasExtraValue: boolean;
|
|
135
|
+
protected map: BridgeMap;
|
|
136
|
+
protected markers: Map<string, BridgeMarker>;
|
|
137
|
+
protected polygons: Map<string, BridgePolygon>;
|
|
138
|
+
protected polylines: Map<string, BridgePolyline>;
|
|
139
|
+
protected circles: Map<string, BridgeCircle>;
|
|
140
|
+
protected rectangles: Map<string, BridgeRectangle>;
|
|
141
|
+
protected infoWindows: Array<BridgeInfoWindow>;
|
|
142
|
+
private isConnected;
|
|
143
|
+
private createMarker;
|
|
144
|
+
private createPolygon;
|
|
145
|
+
private createPolyline;
|
|
146
|
+
private createCircle;
|
|
147
|
+
private createRectangle;
|
|
148
|
+
protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
|
|
149
|
+
connect(): void;
|
|
150
|
+
createInfoWindow({
|
|
151
|
+
definition,
|
|
152
|
+
element
|
|
153
|
+
}: {
|
|
154
|
+
definition: Omit<InfoWindowDefinition<BridgeInfoWindowOptions>, 'position'>;
|
|
155
|
+
element: BridgeMarker | BridgePolygon | BridgePolyline | BridgeCircle | BridgeRectangle;
|
|
156
|
+
}): BridgeInfoWindow;
|
|
157
|
+
abstract centerValueChanged(): void;
|
|
158
|
+
abstract zoomValueChanged(): void;
|
|
159
|
+
abstract minZoomValueChanged(): void;
|
|
160
|
+
abstract maxZoomValueChanged(): void;
|
|
161
|
+
markersValueChanged(): void;
|
|
162
|
+
polygonsValueChanged(): void;
|
|
163
|
+
polylinesValueChanged(): void;
|
|
164
|
+
circlesValueChanged(): void;
|
|
165
|
+
rectanglesValueChanged(): void;
|
|
166
|
+
protected abstract doCreateMap({
|
|
167
|
+
definition
|
|
168
|
+
}: {
|
|
169
|
+
definition: MapDefinition<MapOptions, BridgeMapOptions>;
|
|
170
|
+
}): BridgeMap;
|
|
171
|
+
protected abstract doFitBoundsToMarkers(): void;
|
|
172
|
+
protected abstract doCreateMarker({
|
|
173
|
+
definition
|
|
174
|
+
}: {
|
|
175
|
+
definition: MarkerDefinition<BridgeMarkerOptions, BridgeInfoWindowOptions>;
|
|
176
|
+
}): BridgeMarker;
|
|
177
|
+
protected abstract doRemoveMarker(marker: BridgeMarker): void;
|
|
178
|
+
protected abstract doCreatePolygon({
|
|
179
|
+
definition
|
|
180
|
+
}: {
|
|
181
|
+
definition: PolygonDefinition<BridgePolygonOptions, BridgeInfoWindowOptions>;
|
|
182
|
+
}): BridgePolygon;
|
|
183
|
+
protected abstract doRemovePolygon(polygon: BridgePolygon): void;
|
|
184
|
+
protected abstract doCreatePolyline({
|
|
185
|
+
definition
|
|
186
|
+
}: {
|
|
187
|
+
definition: PolylineDefinition<BridgePolylineOptions, BridgeInfoWindowOptions>;
|
|
188
|
+
}): BridgePolyline;
|
|
189
|
+
protected abstract doRemovePolyline(polyline: BridgePolyline): void;
|
|
190
|
+
protected abstract doCreateCircle({
|
|
191
|
+
definition
|
|
192
|
+
}: {
|
|
193
|
+
definition: CircleDefinition<BridgeCircleOptions, BridgeInfoWindowOptions>;
|
|
194
|
+
}): BridgeCircle;
|
|
195
|
+
protected abstract doRemoveCircle(circle: BridgeCircle): void;
|
|
196
|
+
protected abstract doCreateRectangle({
|
|
197
|
+
definition
|
|
198
|
+
}: {
|
|
199
|
+
definition: RectangleDefinition<BridgeRectangleOptions, BridgeInfoWindowOptions>;
|
|
200
|
+
}): BridgeRectangle;
|
|
201
|
+
protected abstract doRemoveRectangle(rectangle: BridgeRectangle): void;
|
|
202
|
+
protected abstract doCreateInfoWindow({
|
|
203
|
+
definition,
|
|
204
|
+
element
|
|
205
|
+
}: {
|
|
206
|
+
definition: Omit<InfoWindowDefinition<BridgeInfoWindowOptions>, 'position'>;
|
|
207
|
+
element: BridgeMarker | BridgePolygon | BridgePolyline | BridgeCircle | BridgeRectangle;
|
|
208
|
+
}): BridgeInfoWindow;
|
|
209
|
+
protected abstract doCreateIcon({
|
|
210
|
+
definition,
|
|
211
|
+
element
|
|
212
|
+
}: {
|
|
213
|
+
definition: Icon;
|
|
214
|
+
element: BridgeMarker;
|
|
215
|
+
}): void;
|
|
216
|
+
private createDrawingFactory;
|
|
217
|
+
private onDrawChanged;
|
|
218
|
+
}
|
|
219
|
+
type MapOptions$1 = Pick<MapOptions, 'attributionControl' | 'zoomControl'> & {
|
|
220
|
+
attributionControlOptions?: {
|
|
221
|
+
position: ControlPosition;
|
|
222
|
+
prefix: string | false;
|
|
223
|
+
};
|
|
224
|
+
zoomControlOptions?: {
|
|
225
|
+
position: ControlPosition;
|
|
226
|
+
zoomInText: string;
|
|
227
|
+
zoomInTitle: string;
|
|
228
|
+
zoomOutText: string;
|
|
229
|
+
zoomOutTitle: string;
|
|
230
|
+
};
|
|
231
|
+
tileLayer: {
|
|
232
|
+
url: string;
|
|
233
|
+
attribution: string;
|
|
234
|
+
options: Record<string, unknown>;
|
|
235
|
+
} | false;
|
|
236
|
+
};
|
|
237
|
+
declare class export_default extends export_default$1<MapOptions$1, MapOptions, L.Map, MarkerOptions, L.Marker, PopupOptions, L.Popup, PolylineOptions, L.Polygon, PolylineOptions, L.Polyline, CircleOptions, L.Circle, PolylineOptions, L.Rectangle> {
|
|
238
|
+
map: L.Map;
|
|
239
|
+
connect(): void;
|
|
240
|
+
centerValueChanged(): void;
|
|
241
|
+
zoomValueChanged(): void;
|
|
242
|
+
minZoomValueChanged(): void;
|
|
243
|
+
maxZoomValueChanged(): void;
|
|
244
|
+
protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
|
|
245
|
+
protected doCreateMap({
|
|
246
|
+
definition
|
|
247
|
+
}: {
|
|
248
|
+
definition: MapDefinition<MapOptions$1, MapOptions>;
|
|
249
|
+
}): L.Map;
|
|
250
|
+
protected doCreateMarker({
|
|
251
|
+
definition
|
|
252
|
+
}: {
|
|
253
|
+
definition: MarkerDefinition<MarkerOptions, PopupOptions>;
|
|
254
|
+
}): L.Marker;
|
|
255
|
+
protected doRemoveMarker(marker: L.Marker): void;
|
|
256
|
+
protected doCreatePolygon({
|
|
257
|
+
definition
|
|
258
|
+
}: {
|
|
259
|
+
definition: PolygonDefinition<PolylineOptions, PopupOptions>;
|
|
260
|
+
}): L.Polygon;
|
|
261
|
+
protected doRemovePolygon(polygon: L.Polygon): void;
|
|
262
|
+
protected doCreatePolyline({
|
|
263
|
+
definition
|
|
264
|
+
}: {
|
|
265
|
+
definition: PolylineDefinition<PolylineOptions, PopupOptions>;
|
|
266
|
+
}): L.Polyline;
|
|
267
|
+
protected doRemovePolyline(polyline: L.Polyline): void;
|
|
268
|
+
protected doCreateCircle({
|
|
269
|
+
definition
|
|
270
|
+
}: {
|
|
271
|
+
definition: CircleDefinition<CircleOptions, PopupOptions>;
|
|
272
|
+
}): L.Circle;
|
|
273
|
+
protected doRemoveCircle(circle: L.Circle): void;
|
|
274
|
+
protected doCreateRectangle({
|
|
275
|
+
definition
|
|
276
|
+
}: {
|
|
277
|
+
definition: RectangleDefinition<PolylineOptions, PopupOptions>;
|
|
278
|
+
}): L.Rectangle;
|
|
279
|
+
protected doRemoveRectangle(rectangle: L.Rectangle): void;
|
|
280
|
+
protected doCreateInfoWindow({
|
|
281
|
+
definition,
|
|
282
|
+
element
|
|
283
|
+
}: {
|
|
284
|
+
definition: Omit<InfoWindowDefinition<PopupOptions>, 'position'>;
|
|
285
|
+
element: L.Marker | L.Polygon | L.Polyline | L.Circle | L.Rectangle;
|
|
286
|
+
}): L.Popup;
|
|
287
|
+
protected doCreateIcon({
|
|
288
|
+
definition,
|
|
289
|
+
element
|
|
290
|
+
}: {
|
|
291
|
+
definition: Icon;
|
|
292
|
+
element: L.Marker;
|
|
293
|
+
}): void;
|
|
294
|
+
protected doFitBoundsToMarkers(): void;
|
|
295
|
+
private closePopups;
|
|
64
296
|
}
|
|
65
|
-
|
|
66
|
-
export { export_default as default };
|
|
297
|
+
export { export_default as default };
|
package/dist/map_controller.js
CHANGED
|
@@ -1,389 +1,353 @@
|
|
|
1
|
-
// ../../../../assets/dist/abstract_map_controller.js
|
|
2
1
|
import { Controller } from "@hotwired/stimulus";
|
|
3
|
-
var IconTypes = {
|
|
4
|
-
Url: "url",
|
|
5
|
-
Svg: "svg",
|
|
6
|
-
UxIcon: "ux-icon"
|
|
7
|
-
};
|
|
8
|
-
var abstract_map_controller_default = class extends Controller {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
|
-
this.markers = /* @__PURE__ */ new Map();
|
|
12
|
-
this.polygons = /* @__PURE__ */ new Map();
|
|
13
|
-
this.polylines = /* @__PURE__ */ new Map();
|
|
14
|
-
this.circles = /* @__PURE__ */ new Map();
|
|
15
|
-
this.rectangles = /* @__PURE__ */ new Map();
|
|
16
|
-
this.infoWindows = [];
|
|
17
|
-
this.isConnected = false;
|
|
18
|
-
}
|
|
19
|
-
connect() {
|
|
20
|
-
const extra = this.hasExtraValue ? this.extraValue : {};
|
|
21
|
-
const mapDefinition = {
|
|
22
|
-
center: this.hasCenterValue ? this.centerValue : null,
|
|
23
|
-
zoom: this.hasZoomValue ? this.zoomValue : null,
|
|
24
|
-
minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
|
|
25
|
-
maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
|
|
26
|
-
options: this.optionsValue,
|
|
27
|
-
extra
|
|
28
|
-
};
|
|
29
|
-
this.dispatchEvent("pre-connect", mapDefinition);
|
|
30
|
-
this.createMarker = this.createDrawingFactory("marker", this.markers, this.doCreateMarker.bind(this));
|
|
31
|
-
this.createPolygon = this.createDrawingFactory("polygon", this.polygons, this.doCreatePolygon.bind(this));
|
|
32
|
-
this.createPolyline = this.createDrawingFactory("polyline", this.polylines, this.doCreatePolyline.bind(this));
|
|
33
|
-
this.createCircle = this.createDrawingFactory("circle", this.circles, this.doCreateCircle.bind(this));
|
|
34
|
-
this.createRectangle = this.createDrawingFactory("rectangle", this.rectangles, this.doCreateRectangle.bind(this));
|
|
35
|
-
this.map = this.doCreateMap({ definition: mapDefinition });
|
|
36
|
-
this.markersValue.forEach((definition) => {
|
|
37
|
-
this.createMarker({ definition });
|
|
38
|
-
});
|
|
39
|
-
this.polygonsValue.forEach((definition) => {
|
|
40
|
-
this.createPolygon({ definition });
|
|
41
|
-
});
|
|
42
|
-
this.polylinesValue.forEach((definition) => {
|
|
43
|
-
this.createPolyline({ definition });
|
|
44
|
-
});
|
|
45
|
-
this.circlesValue.forEach((definition) => {
|
|
46
|
-
this.createCircle({ definition });
|
|
47
|
-
});
|
|
48
|
-
this.rectanglesValue.forEach((definition) => {
|
|
49
|
-
this.createRectangle({ definition });
|
|
50
|
-
});
|
|
51
|
-
if (this.fitBoundsToMarkersValue) {
|
|
52
|
-
this.doFitBoundsToMarkers();
|
|
53
|
-
}
|
|
54
|
-
this.dispatchEvent("connect", {
|
|
55
|
-
map: this.map,
|
|
56
|
-
markers: [...this.markers.values()],
|
|
57
|
-
polygons: [...this.polygons.values()],
|
|
58
|
-
polylines: [...this.polylines.values()],
|
|
59
|
-
circles: [...this.circles.values()],
|
|
60
|
-
rectangles: [...this.rectangles.values()],
|
|
61
|
-
infoWindows: this.infoWindows,
|
|
62
|
-
extra
|
|
63
|
-
});
|
|
64
|
-
this.isConnected = true;
|
|
65
|
-
}
|
|
66
|
-
//region Public API
|
|
67
|
-
createInfoWindow({
|
|
68
|
-
definition,
|
|
69
|
-
element
|
|
70
|
-
}) {
|
|
71
|
-
this.dispatchEvent("info-window:before-create", { definition, element });
|
|
72
|
-
const infoWindow = this.doCreateInfoWindow({ definition, element });
|
|
73
|
-
this.dispatchEvent("info-window:after-create", { infoWindow, definition, element });
|
|
74
|
-
this.infoWindows.push(infoWindow);
|
|
75
|
-
return infoWindow;
|
|
76
|
-
}
|
|
77
|
-
markersValueChanged() {
|
|
78
|
-
if (!this.isConnected) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
this.onDrawChanged(this.markers, this.markersValue, this.createMarker, this.doRemoveMarker);
|
|
82
|
-
if (this.fitBoundsToMarkersValue) {
|
|
83
|
-
this.doFitBoundsToMarkers();
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
polygonsValueChanged() {
|
|
87
|
-
if (!this.isConnected) {
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
this.onDrawChanged(this.polygons, this.polygonsValue, this.createPolygon, this.doRemovePolygon);
|
|
91
|
-
}
|
|
92
|
-
polylinesValueChanged() {
|
|
93
|
-
if (!this.isConnected) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
this.onDrawChanged(this.polylines, this.polylinesValue, this.createPolyline, this.doRemovePolyline);
|
|
97
|
-
}
|
|
98
|
-
circlesValueChanged() {
|
|
99
|
-
if (!this.isConnected) {
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
this.onDrawChanged(this.circles, this.circlesValue, this.createCircle, this.doRemoveCircle);
|
|
103
|
-
}
|
|
104
|
-
rectanglesValueChanged() {
|
|
105
|
-
if (!this.isConnected) {
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
this.onDrawChanged(this.rectangles, this.rectanglesValue, this.createRectangle, this.doRemoveRectangle);
|
|
109
|
-
}
|
|
110
|
-
createDrawingFactory(type, draws, factory) {
|
|
111
|
-
const eventBefore = `${type}:before-create`;
|
|
112
|
-
const eventAfter = `${type}:after-create`;
|
|
113
|
-
return ({ definition }) => {
|
|
114
|
-
this.dispatchEvent(eventBefore, { definition });
|
|
115
|
-
if (typeof definition.rawOptions !== "undefined") {
|
|
116
|
-
console.warn(
|
|
117
|
-
`[Symfony UX Map] The event "${eventBefore}" added a deprecated "rawOptions" property to the definition, it will be removed in a next major version, replace it with "bridgeOptions" instead.`,
|
|
118
|
-
definition
|
|
119
|
-
);
|
|
120
|
-
}
|
|
121
|
-
const drawing = factory({ definition });
|
|
122
|
-
this.dispatchEvent(eventAfter, { [type]: drawing, definition });
|
|
123
|
-
draws.set(definition["@id"], drawing);
|
|
124
|
-
return drawing;
|
|
125
|
-
};
|
|
126
|
-
}
|
|
127
|
-
onDrawChanged(draws, newDrawDefinitions, factory, remover) {
|
|
128
|
-
const idsToRemove = new Set(draws.keys());
|
|
129
|
-
newDrawDefinitions.forEach((definition) => {
|
|
130
|
-
idsToRemove.delete(definition["@id"]);
|
|
131
|
-
});
|
|
132
|
-
idsToRemove.forEach((id) => {
|
|
133
|
-
const draw = draws.get(id);
|
|
134
|
-
remover(draw);
|
|
135
|
-
draws.delete(id);
|
|
136
|
-
});
|
|
137
|
-
newDrawDefinitions.forEach((definition) => {
|
|
138
|
-
if (!draws.has(definition["@id"])) {
|
|
139
|
-
factory({ definition });
|
|
140
|
-
}
|
|
141
|
-
});
|
|
142
|
-
}
|
|
143
|
-
//endregion
|
|
144
|
-
};
|
|
145
|
-
abstract_map_controller_default.values = {
|
|
146
|
-
providerOptions: Object,
|
|
147
|
-
center: Object,
|
|
148
|
-
zoom: Number,
|
|
149
|
-
minZoom: Number,
|
|
150
|
-
maxZoom: Number,
|
|
151
|
-
fitBoundsToMarkers: Boolean,
|
|
152
|
-
markers: Array,
|
|
153
|
-
polygons: Array,
|
|
154
|
-
polylines: Array,
|
|
155
|
-
circles: Array,
|
|
156
|
-
rectangles: Array,
|
|
157
|
-
options: Object,
|
|
158
|
-
extra: Object
|
|
159
|
-
};
|
|
160
|
-
|
|
161
|
-
// src/map_controller.ts
|
|
162
2
|
import "leaflet/dist/leaflet.min.css";
|
|
163
3
|
import * as L from "leaflet";
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
}
|
|
307
|
-
if (infoWindow) {
|
|
308
|
-
this.createInfoWindow({ definition: infoWindow, element: rectangle2 });
|
|
309
|
-
}
|
|
310
|
-
return rectangle2;
|
|
311
|
-
}
|
|
312
|
-
doRemoveRectangle(rectangle2) {
|
|
313
|
-
rectangle2.remove();
|
|
314
|
-
}
|
|
315
|
-
doCreateInfoWindow({
|
|
316
|
-
definition,
|
|
317
|
-
element
|
|
318
|
-
}) {
|
|
319
|
-
const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition;
|
|
320
|
-
element.bindPopup([headerContent, content].filter((x) => x).join("<br>"), { ...rawOptions, ...bridgeOptions });
|
|
321
|
-
if (opened) {
|
|
322
|
-
if (autoClose) {
|
|
323
|
-
this.closePopups();
|
|
324
|
-
}
|
|
325
|
-
setTimeout(() => element.openPopup(), 0);
|
|
326
|
-
}
|
|
327
|
-
const popup = element.getPopup();
|
|
328
|
-
if (!popup) {
|
|
329
|
-
throw new Error("Unable to get the Popup associated with the element.");
|
|
330
|
-
}
|
|
331
|
-
popup.on("click", () => {
|
|
332
|
-
if (autoClose) {
|
|
333
|
-
this.closePopups({ except: popup });
|
|
334
|
-
}
|
|
335
|
-
});
|
|
336
|
-
return popup;
|
|
337
|
-
}
|
|
338
|
-
doCreateIcon({ definition, element }) {
|
|
339
|
-
const { type, width, height } = definition;
|
|
340
|
-
let icon2;
|
|
341
|
-
if (type === IconTypes.Svg) {
|
|
342
|
-
icon2 = L.divIcon({
|
|
343
|
-
html: definition.html,
|
|
344
|
-
iconSize: [width, height],
|
|
345
|
-
className: ""
|
|
346
|
-
// Adding an empty class to the icon to avoid the default Leaflet styles
|
|
347
|
-
});
|
|
348
|
-
} else if (type === IconTypes.UxIcon) {
|
|
349
|
-
icon2 = L.divIcon({
|
|
350
|
-
html: definition._generated_html,
|
|
351
|
-
iconSize: [width, height],
|
|
352
|
-
className: ""
|
|
353
|
-
// Adding an empty class to the icon to avoid the default Leaflet styles
|
|
354
|
-
});
|
|
355
|
-
} else if (type === IconTypes.Url) {
|
|
356
|
-
icon2 = L.icon({
|
|
357
|
-
iconUrl: definition.url,
|
|
358
|
-
iconSize: [width, height],
|
|
359
|
-
className: ""
|
|
360
|
-
// Adding an empty class to the icon to avoid the default Leaflet styles
|
|
361
|
-
});
|
|
362
|
-
} else {
|
|
363
|
-
throw new Error(`Unsupported icon type: ${type}.`);
|
|
364
|
-
}
|
|
365
|
-
element.setIcon(icon2);
|
|
366
|
-
}
|
|
367
|
-
doFitBoundsToMarkers() {
|
|
368
|
-
if (this.markers.size === 0) {
|
|
369
|
-
return;
|
|
370
|
-
}
|
|
371
|
-
const bounds = [];
|
|
372
|
-
this.markers.forEach((marker2) => {
|
|
373
|
-
const position = marker2.getLatLng();
|
|
374
|
-
bounds.push([position.lat, position.lng]);
|
|
375
|
-
});
|
|
376
|
-
this.map.fitBounds(bounds);
|
|
377
|
-
}
|
|
378
|
-
closePopups(options = {}) {
|
|
379
|
-
this.infoWindows.forEach((popup) => {
|
|
380
|
-
if (options.except && popup === options.except) {
|
|
381
|
-
return;
|
|
382
|
-
}
|
|
383
|
-
popup.close();
|
|
384
|
-
});
|
|
385
|
-
}
|
|
4
|
+
const IconTypes = {
|
|
5
|
+
Url: "url",
|
|
6
|
+
Svg: "svg",
|
|
7
|
+
UxIcon: "ux-icon"
|
|
8
|
+
};
|
|
9
|
+
var _Class = class extends Controller {
|
|
10
|
+
constructor(..._args) {
|
|
11
|
+
super(..._args);
|
|
12
|
+
this.markers = /* @__PURE__ */ new Map();
|
|
13
|
+
this.polygons = /* @__PURE__ */ new Map();
|
|
14
|
+
this.polylines = /* @__PURE__ */ new Map();
|
|
15
|
+
this.circles = /* @__PURE__ */ new Map();
|
|
16
|
+
this.rectangles = /* @__PURE__ */ new Map();
|
|
17
|
+
this.infoWindows = [];
|
|
18
|
+
this.isConnected = false;
|
|
19
|
+
}
|
|
20
|
+
connect() {
|
|
21
|
+
const extra = this.hasExtraValue ? this.extraValue : {};
|
|
22
|
+
const mapDefinition = {
|
|
23
|
+
center: this.hasCenterValue ? this.centerValue : null,
|
|
24
|
+
zoom: this.hasZoomValue ? this.zoomValue : null,
|
|
25
|
+
minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
|
|
26
|
+
maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
|
|
27
|
+
options: this.optionsValue,
|
|
28
|
+
extra
|
|
29
|
+
};
|
|
30
|
+
this.dispatchEvent("pre-connect", mapDefinition);
|
|
31
|
+
this.createMarker = this.createDrawingFactory("marker", this.markers, this.doCreateMarker.bind(this));
|
|
32
|
+
this.createPolygon = this.createDrawingFactory("polygon", this.polygons, this.doCreatePolygon.bind(this));
|
|
33
|
+
this.createPolyline = this.createDrawingFactory("polyline", this.polylines, this.doCreatePolyline.bind(this));
|
|
34
|
+
this.createCircle = this.createDrawingFactory("circle", this.circles, this.doCreateCircle.bind(this));
|
|
35
|
+
this.createRectangle = this.createDrawingFactory("rectangle", this.rectangles, this.doCreateRectangle.bind(this));
|
|
36
|
+
this.map = this.doCreateMap({ definition: mapDefinition });
|
|
37
|
+
this.markersValue.forEach((definition) => {
|
|
38
|
+
this.createMarker({ definition });
|
|
39
|
+
});
|
|
40
|
+
this.polygonsValue.forEach((definition) => {
|
|
41
|
+
this.createPolygon({ definition });
|
|
42
|
+
});
|
|
43
|
+
this.polylinesValue.forEach((definition) => {
|
|
44
|
+
this.createPolyline({ definition });
|
|
45
|
+
});
|
|
46
|
+
this.circlesValue.forEach((definition) => {
|
|
47
|
+
this.createCircle({ definition });
|
|
48
|
+
});
|
|
49
|
+
this.rectanglesValue.forEach((definition) => {
|
|
50
|
+
this.createRectangle({ definition });
|
|
51
|
+
});
|
|
52
|
+
if (this.fitBoundsToMarkersValue) this.doFitBoundsToMarkers();
|
|
53
|
+
this.dispatchEvent("connect", {
|
|
54
|
+
map: this.map,
|
|
55
|
+
markers: [...this.markers.values()],
|
|
56
|
+
polygons: [...this.polygons.values()],
|
|
57
|
+
polylines: [...this.polylines.values()],
|
|
58
|
+
circles: [...this.circles.values()],
|
|
59
|
+
rectangles: [...this.rectangles.values()],
|
|
60
|
+
infoWindows: this.infoWindows,
|
|
61
|
+
extra
|
|
62
|
+
});
|
|
63
|
+
this.isConnected = true;
|
|
64
|
+
}
|
|
65
|
+
createInfoWindow({ definition, element }) {
|
|
66
|
+
this.dispatchEvent("info-window:before-create", {
|
|
67
|
+
definition,
|
|
68
|
+
element
|
|
69
|
+
});
|
|
70
|
+
const infoWindow = this.doCreateInfoWindow({
|
|
71
|
+
definition,
|
|
72
|
+
element
|
|
73
|
+
});
|
|
74
|
+
this.dispatchEvent("info-window:after-create", {
|
|
75
|
+
infoWindow,
|
|
76
|
+
definition,
|
|
77
|
+
element
|
|
78
|
+
});
|
|
79
|
+
this.infoWindows.push(infoWindow);
|
|
80
|
+
return infoWindow;
|
|
81
|
+
}
|
|
82
|
+
markersValueChanged() {
|
|
83
|
+
if (!this.isConnected) return;
|
|
84
|
+
this.onDrawChanged(this.markers, this.markersValue, this.createMarker, this.doRemoveMarker);
|
|
85
|
+
if (this.fitBoundsToMarkersValue) this.doFitBoundsToMarkers();
|
|
86
|
+
}
|
|
87
|
+
polygonsValueChanged() {
|
|
88
|
+
if (!this.isConnected) return;
|
|
89
|
+
this.onDrawChanged(this.polygons, this.polygonsValue, this.createPolygon, this.doRemovePolygon);
|
|
90
|
+
}
|
|
91
|
+
polylinesValueChanged() {
|
|
92
|
+
if (!this.isConnected) return;
|
|
93
|
+
this.onDrawChanged(this.polylines, this.polylinesValue, this.createPolyline, this.doRemovePolyline);
|
|
94
|
+
}
|
|
95
|
+
circlesValueChanged() {
|
|
96
|
+
if (!this.isConnected) return;
|
|
97
|
+
this.onDrawChanged(this.circles, this.circlesValue, this.createCircle, this.doRemoveCircle);
|
|
98
|
+
}
|
|
99
|
+
rectanglesValueChanged() {
|
|
100
|
+
if (!this.isConnected) return;
|
|
101
|
+
this.onDrawChanged(this.rectangles, this.rectanglesValue, this.createRectangle, this.doRemoveRectangle);
|
|
102
|
+
}
|
|
103
|
+
createDrawingFactory(type, draws, factory) {
|
|
104
|
+
const eventBefore = `${type}:before-create`;
|
|
105
|
+
const eventAfter = `${type}:after-create`;
|
|
106
|
+
return ({ definition }) => {
|
|
107
|
+
this.dispatchEvent(eventBefore, { definition });
|
|
108
|
+
if (typeof definition.rawOptions !== "undefined") console.warn(`[Symfony UX Map] The event "${eventBefore}" added a deprecated "rawOptions" property to the definition, it will be removed in a next major version, replace it with "bridgeOptions" instead.`, definition);
|
|
109
|
+
const drawing = factory({ definition });
|
|
110
|
+
this.dispatchEvent(eventAfter, {
|
|
111
|
+
[type]: drawing,
|
|
112
|
+
definition
|
|
113
|
+
});
|
|
114
|
+
draws.set(definition["@id"], drawing);
|
|
115
|
+
return drawing;
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
onDrawChanged(draws, newDrawDefinitions, factory, remover) {
|
|
119
|
+
const idsToRemove = new Set(draws.keys());
|
|
120
|
+
newDrawDefinitions.forEach((definition) => {
|
|
121
|
+
idsToRemove.delete(definition["@id"]);
|
|
122
|
+
});
|
|
123
|
+
idsToRemove.forEach((id) => {
|
|
124
|
+
remover(draws.get(id));
|
|
125
|
+
draws.delete(id);
|
|
126
|
+
});
|
|
127
|
+
newDrawDefinitions.forEach((definition) => {
|
|
128
|
+
if (!draws.has(definition["@id"])) factory({ definition });
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
_Class.values = {
|
|
133
|
+
providerOptions: Object,
|
|
134
|
+
center: Object,
|
|
135
|
+
zoom: Number,
|
|
136
|
+
minZoom: Number,
|
|
137
|
+
maxZoom: Number,
|
|
138
|
+
fitBoundsToMarkers: Boolean,
|
|
139
|
+
markers: Array,
|
|
140
|
+
polygons: Array,
|
|
141
|
+
polylines: Array,
|
|
142
|
+
circles: Array,
|
|
143
|
+
rectangles: Array,
|
|
144
|
+
options: Object,
|
|
145
|
+
extra: Object
|
|
386
146
|
};
|
|
387
|
-
|
|
388
|
-
|
|
147
|
+
var map_controller_default = class extends _Class {
|
|
148
|
+
connect() {
|
|
149
|
+
L.Marker.prototype.options.icon = L.divIcon({
|
|
150
|
+
html: "<svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" fill-rule=\"evenodd\" stroke-linecap=\"round\" clip-rule=\"evenodd\" viewBox=\"0 0 500 820\"><defs><linearGradient id=\"__sf_ux_map_gradient_marker_fill\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\" gradientTransform=\"matrix(0 -37.57 37.57 0 416.45 541)\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#126FC6\"/><stop offset=\"1\" stop-color=\"#4C9CD1\"/></linearGradient><linearGradient id=\"__sf_ux_map_gradient_marker_border\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\" gradientTransform=\"matrix(0 -19.05 19.05 0 414.48 522.49)\" gradientUnits=\"userSpaceOnUse\"><stop offset=\"0\" stop-color=\"#2E6C97\"/><stop offset=\"1\" stop-color=\"#3883B7\"/></linearGradient></defs><circle cx=\"252.31\" cy=\"266.24\" r=\"83.99\" fill=\"#fff\"/><path fill=\"url(#__sf_ux_map_gradient_marker_fill)\" stroke=\"url(#__sf_ux_map_gradient_marker_border)\" stroke-width=\"1.1\" d=\"M416.54 503.61c-6.57 0-12.04 5.7-12.04 11.87 0 2.78 1.56 6.3 2.7 8.74l9.3 17.88 9.26-17.88c1.13-2.43 2.74-5.79 2.74-8.74 0-6.18-5.38-11.87-11.96-11.87Zm0 7.16a4.69 4.69 0 1 1-.02 9.4 4.69 4.69 0 0 1 .02-9.4Z\" transform=\"translate(-7889.1 -9807.44) scale(19.54)\"/></svg>",
|
|
151
|
+
iconSize: [25, 41],
|
|
152
|
+
iconAnchor: [12.5, 41],
|
|
153
|
+
popupAnchor: [0, -41],
|
|
154
|
+
className: ""
|
|
155
|
+
});
|
|
156
|
+
super.connect();
|
|
157
|
+
}
|
|
158
|
+
centerValueChanged() {
|
|
159
|
+
if (this.map && this.hasCenterValue && this.centerValue && this.hasZoomValue && this.zoomValue) this.map.setView(this.centerValue, this.zoomValue);
|
|
160
|
+
}
|
|
161
|
+
zoomValueChanged() {
|
|
162
|
+
if (this.map && this.hasZoomValue && this.zoomValue) this.map.setZoom(this.zoomValue);
|
|
163
|
+
}
|
|
164
|
+
minZoomValueChanged() {
|
|
165
|
+
if (this.map && this.hasMinZoomValue && this.minZoomValue) this.map.setMinZoom(this.minZoomValue);
|
|
166
|
+
}
|
|
167
|
+
maxZoomValueChanged() {
|
|
168
|
+
if (this.map && this.hasMaxZoomValue && this.maxZoomValue) this.map.setMaxZoom(this.maxZoomValue);
|
|
169
|
+
}
|
|
170
|
+
dispatchEvent(name, payload = {}) {
|
|
171
|
+
payload.L = L;
|
|
172
|
+
this.dispatch(name, {
|
|
173
|
+
prefix: "ux:map",
|
|
174
|
+
detail: payload
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
doCreateMap({ definition }) {
|
|
178
|
+
const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
|
|
179
|
+
const map = L.map(this.element, {
|
|
180
|
+
center: center === null ? void 0 : center,
|
|
181
|
+
zoom: zoom === null ? void 0 : zoom,
|
|
182
|
+
minZoom: minZoom === null ? void 0 : minZoom,
|
|
183
|
+
maxZoom: maxZoom === null ? void 0 : maxZoom,
|
|
184
|
+
attributionControl: false,
|
|
185
|
+
zoomControl: false,
|
|
186
|
+
...options,
|
|
187
|
+
...bridgeOptions
|
|
188
|
+
});
|
|
189
|
+
if (options.tileLayer) L.tileLayer(options.tileLayer.url, {
|
|
190
|
+
attribution: options.tileLayer.attribution,
|
|
191
|
+
...options.tileLayer.options
|
|
192
|
+
}).addTo(map);
|
|
193
|
+
if (typeof options.attributionControlOptions !== "undefined") L.control.attribution({ ...options.attributionControlOptions }).addTo(map);
|
|
194
|
+
if (typeof options.zoomControlOptions !== "undefined") L.control.zoom({ ...options.zoomControlOptions }).addTo(map);
|
|
195
|
+
return map;
|
|
196
|
+
}
|
|
197
|
+
doCreateMarker({ definition }) {
|
|
198
|
+
const { "@id": _id, position, title, infoWindow, icon, rawOptions = {}, bridgeOptions = {} } = definition;
|
|
199
|
+
const marker = L.marker(position, {
|
|
200
|
+
title: title || void 0,
|
|
201
|
+
...rawOptions,
|
|
202
|
+
...bridgeOptions,
|
|
203
|
+
riseOnHover: true
|
|
204
|
+
}).addTo(this.map);
|
|
205
|
+
if (infoWindow) this.createInfoWindow({
|
|
206
|
+
definition: infoWindow,
|
|
207
|
+
element: marker
|
|
208
|
+
});
|
|
209
|
+
if (icon) {
|
|
210
|
+
if (Object.prototype.hasOwnProperty.call(bridgeOptions, "icon")) console.warn("[Symfony UX Map] Defining \"bridgeOptions.icon\" for a marker with a custom icon is not supported and will be ignored.");
|
|
211
|
+
else if (Object.prototype.hasOwnProperty.call(rawOptions, "icon")) console.warn("[Symfony UX Map] Defining \"rawOptions.icon\" for a marker with a custom icon is not supported and will be ignored.");
|
|
212
|
+
this.doCreateIcon({
|
|
213
|
+
definition: icon,
|
|
214
|
+
element: marker
|
|
215
|
+
});
|
|
216
|
+
}
|
|
217
|
+
return marker;
|
|
218
|
+
}
|
|
219
|
+
doRemoveMarker(marker) {
|
|
220
|
+
marker.remove();
|
|
221
|
+
}
|
|
222
|
+
doCreatePolygon({ definition }) {
|
|
223
|
+
const { "@id": _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
|
|
224
|
+
const polygon = L.polygon(points, {
|
|
225
|
+
...rawOptions,
|
|
226
|
+
...bridgeOptions
|
|
227
|
+
}).addTo(this.map);
|
|
228
|
+
/**
|
|
229
|
+
* @deprecated since Symfony UX Map 2.29
|
|
230
|
+
*/
|
|
231
|
+
if (title) polygon.bindPopup(title);
|
|
232
|
+
if (infoWindow) this.createInfoWindow({
|
|
233
|
+
definition: infoWindow,
|
|
234
|
+
element: polygon
|
|
235
|
+
});
|
|
236
|
+
return polygon;
|
|
237
|
+
}
|
|
238
|
+
doRemovePolygon(polygon) {
|
|
239
|
+
polygon.remove();
|
|
240
|
+
}
|
|
241
|
+
doCreatePolyline({ definition }) {
|
|
242
|
+
const { "@id": _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
|
|
243
|
+
const polyline = L.polyline(points, {
|
|
244
|
+
...rawOptions,
|
|
245
|
+
...bridgeOptions
|
|
246
|
+
}).addTo(this.map);
|
|
247
|
+
/**
|
|
248
|
+
* @deprecated since Symfony UX Map 2.29
|
|
249
|
+
*/
|
|
250
|
+
if (title) polyline.bindPopup(title);
|
|
251
|
+
if (infoWindow) this.createInfoWindow({
|
|
252
|
+
definition: infoWindow,
|
|
253
|
+
element: polyline
|
|
254
|
+
});
|
|
255
|
+
return polyline;
|
|
256
|
+
}
|
|
257
|
+
doRemovePolyline(polyline) {
|
|
258
|
+
polyline.remove();
|
|
259
|
+
}
|
|
260
|
+
doCreateCircle({ definition }) {
|
|
261
|
+
const { "@id": _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
|
|
262
|
+
const circle = L.circle(center, {
|
|
263
|
+
radius,
|
|
264
|
+
...rawOptions,
|
|
265
|
+
...bridgeOptions
|
|
266
|
+
}).addTo(this.map);
|
|
267
|
+
/**
|
|
268
|
+
* @deprecated since Symfony UX Map 2.29
|
|
269
|
+
*/
|
|
270
|
+
if (title) circle.bindPopup(title);
|
|
271
|
+
if (infoWindow) this.createInfoWindow({
|
|
272
|
+
definition: infoWindow,
|
|
273
|
+
element: circle
|
|
274
|
+
});
|
|
275
|
+
return circle;
|
|
276
|
+
}
|
|
277
|
+
doRemoveCircle(circle) {
|
|
278
|
+
circle.remove();
|
|
279
|
+
}
|
|
280
|
+
doCreateRectangle({ definition }) {
|
|
281
|
+
const { "@id": _id, southWest, northEast, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
|
|
282
|
+
const rectangle = L.rectangle([[southWest.lat, southWest.lng], [northEast.lat, northEast.lng]], {
|
|
283
|
+
...rawOptions,
|
|
284
|
+
...bridgeOptions
|
|
285
|
+
}).addTo(this.map);
|
|
286
|
+
/**
|
|
287
|
+
* @deprecated since Symfony UX Map 2.29
|
|
288
|
+
*/
|
|
289
|
+
if (title) rectangle.bindPopup(title);
|
|
290
|
+
if (infoWindow) this.createInfoWindow({
|
|
291
|
+
definition: infoWindow,
|
|
292
|
+
element: rectangle
|
|
293
|
+
});
|
|
294
|
+
return rectangle;
|
|
295
|
+
}
|
|
296
|
+
doRemoveRectangle(rectangle) {
|
|
297
|
+
rectangle.remove();
|
|
298
|
+
}
|
|
299
|
+
doCreateInfoWindow({ definition, element }) {
|
|
300
|
+
const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition;
|
|
301
|
+
element.bindPopup([headerContent, content].filter((x) => x).join("<br>"), {
|
|
302
|
+
...rawOptions,
|
|
303
|
+
...bridgeOptions
|
|
304
|
+
});
|
|
305
|
+
if (opened) {
|
|
306
|
+
if (autoClose) this.closePopups();
|
|
307
|
+
setTimeout(() => element.openPopup(), 0);
|
|
308
|
+
}
|
|
309
|
+
const popup = element.getPopup();
|
|
310
|
+
if (!popup) throw new Error("Unable to get the Popup associated with the element.");
|
|
311
|
+
popup.on("click", () => {
|
|
312
|
+
if (autoClose) this.closePopups({ except: popup });
|
|
313
|
+
});
|
|
314
|
+
return popup;
|
|
315
|
+
}
|
|
316
|
+
doCreateIcon({ definition, element }) {
|
|
317
|
+
const { type, width, height } = definition;
|
|
318
|
+
let icon;
|
|
319
|
+
if (type === IconTypes.Svg) icon = L.divIcon({
|
|
320
|
+
html: definition.html,
|
|
321
|
+
iconSize: [width, height],
|
|
322
|
+
className: ""
|
|
323
|
+
});
|
|
324
|
+
else if (type === IconTypes.UxIcon) icon = L.divIcon({
|
|
325
|
+
html: definition._generated_html,
|
|
326
|
+
iconSize: [width, height],
|
|
327
|
+
className: ""
|
|
328
|
+
});
|
|
329
|
+
else if (type === IconTypes.Url) icon = L.icon({
|
|
330
|
+
iconUrl: definition.url,
|
|
331
|
+
iconSize: [width, height],
|
|
332
|
+
className: ""
|
|
333
|
+
});
|
|
334
|
+
else throw new Error(`Unsupported icon type: ${type}.`);
|
|
335
|
+
element.setIcon(icon);
|
|
336
|
+
}
|
|
337
|
+
doFitBoundsToMarkers() {
|
|
338
|
+
if (this.markers.size === 0) return;
|
|
339
|
+
const bounds = [];
|
|
340
|
+
this.markers.forEach((marker) => {
|
|
341
|
+
const position = marker.getLatLng();
|
|
342
|
+
bounds.push([position.lat, position.lng]);
|
|
343
|
+
});
|
|
344
|
+
this.map.fitBounds(bounds);
|
|
345
|
+
}
|
|
346
|
+
closePopups(options = {}) {
|
|
347
|
+
this.infoWindows.forEach((popup) => {
|
|
348
|
+
if (options.except && popup === options.except) return;
|
|
349
|
+
popup.close();
|
|
350
|
+
});
|
|
351
|
+
}
|
|
389
352
|
};
|
|
353
|
+
export { map_controller_default as default };
|
package/package.json
CHANGED
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
"name": "@symfony/ux-leaflet-map",
|
|
3
3
|
"description": "Leaflet bridge for Symfony UX Map, integrate interactive maps in your Symfony applications",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "2.
|
|
5
|
+
"version": "2.33.0",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"symfony-ux",
|
|
8
8
|
"leaflet",
|
|
9
9
|
"map"
|
|
10
10
|
],
|
|
11
11
|
"homepage": "https://ux.symfony.com/map",
|
|
12
|
-
"repository": "https://github.com/symfony/ux
|
|
12
|
+
"repository": "https://github.com/symfony/ux",
|
|
13
13
|
"type": "module",
|
|
14
14
|
"files": [
|
|
15
15
|
"dist"
|
|
@@ -46,21 +46,16 @@
|
|
|
46
46
|
"@testing-library/jest-dom": "^6.6.3",
|
|
47
47
|
"@testing-library/user-event": "^14.6.1",
|
|
48
48
|
"@types/leaflet": "^1.9.12",
|
|
49
|
-
"@vitest/browser": "^3.2.4",
|
|
50
49
|
"jsdom": "^26.1.0",
|
|
51
50
|
"leaflet": "^1.9.4",
|
|
52
51
|
"tslib": "^2.8.1",
|
|
53
|
-
"
|
|
54
|
-
"typescript": "^5.8.3",
|
|
55
|
-
"vitest": "^3.2.4"
|
|
52
|
+
"typescript": "^5.8.3"
|
|
56
53
|
},
|
|
57
54
|
"scripts": {
|
|
58
|
-
"build": "
|
|
59
|
-
"watch": "
|
|
55
|
+
"build": "node ../../../../../../bin/build_package.ts .",
|
|
56
|
+
"watch": "node ../../../../../../bin/build_package.ts . --watch",
|
|
60
57
|
"test": "pnpm run test:browser",
|
|
61
58
|
"test:browser": "playwright test",
|
|
62
|
-
"test:browser:ui": "playwright test --ui"
|
|
63
|
-
"check": "biome check",
|
|
64
|
-
"ci": "biome ci"
|
|
59
|
+
"test:browser:ui": "playwright test --ui"
|
|
65
60
|
}
|
|
66
61
|
}
|