symfony/archived-ux-google-map
1
0
Fork 0
mirror of https://github.com/symfony/ux-google-map.git synced 2026-03-23 23:42:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Drop Biome.js for oxfmt and oxlint

Browse Source
This commit is contained in:
Hugo Alliaume
2026-02-03 22:43:43 +01:00
parent 0dfa4c8265
commit f9d191d902
7 changed files with 90 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
CHANGELOG.md
View File

@@ -2,23 +2,24 @@
## 2.31 ## 2.31
- Display a warning when trying to define `bridgeOptions.content` for a `Marker` that already has an `Icon` - Display a warning when trying to define `bridgeOptions.content` for a `Marker` that already has an `Icon`
## 2.30 ## 2.30
- Ensure compatibility with PHP 8.5 - Ensure compatibility with PHP 8.5
## 2.29.0 ## 2.29.0
- Add Symfony 8 support - Add Symfony 8 support
## 2.27 ## 2.27
- Fix `InfoWindow` compatibility with new `Circle` and `Rectangle` supported elements. - Fix `InfoWindow` compatibility with new `Circle` and `Rectangle` supported elements.
This fix led to a refactoring that can impact the `InfoWindow` position when used with `Polygon` or `Polyline`, This fix led to a refactoring that can impact the `InfoWindow` position when used with `Polygon` or `Polyline`,
because their shapes are too complex. because their shapes are too complex.
Instead, listen to the `ux:map:info-window:before-create` event to set the position manually. Instead, listen to the `ux:map:info-window:before-create` event to set the position manually.
```js ```js
this.element.addEventListener('ux:map:info-window:before-create', (event) => { this.element.addEventListener('ux:map:info-window:before-create', (event) => {
const { google, element, definition } = event.detail; const { google, element, definition } = event.detail;
@@ -35,21 +36,21 @@
## 2.25 ## 2.25
- Downgrade PHP requirement from 8.3 to 8.1 - Downgrade PHP requirement from 8.3 to 8.1
## 2.22 ## 2.22
- Add support for configuring a default Map ID - Add support for configuring a default Map ID
- Add argument `$defaultMapId` to `Symfony\UX\Map\Bridge\Google\Renderer\GoogleRendererFactory` constructor - Add argument `$defaultMapId` to `Symfony\UX\Map\Bridge\Google\Renderer\GoogleRendererFactory` constructor
- Add argument `$defaultMapId` to `Symfony\UX\Map\Bridge\Google\Renderer\GoogleRenderer` constructor - Add argument `$defaultMapId` to `Symfony\UX\Map\Bridge\Google\Renderer\GoogleRenderer` constructor
## 2.20 ## 2.20
### BC Breaks ### BC Breaks
- Renamed importmap entry `@symfony/ux-google-map/map-controller` to `@symfony/ux-google-map`, - Renamed importmap entry `@symfony/ux-google-map/map-controller` to `@symfony/ux-google-map`,
you will need to update your importmap. you will need to update your importmap.
## 2.19 ## 2.19
- Bridge added - Bridge added

25
README.md
View File

@@ -35,7 +35,7 @@ UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?libraries[]=geometry&libraries[]
Available options: Available options:
| Option | Description | Default | | Option | Description | Default |
|-------------|------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------| | ----------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| `id` | The id of the script tag | `__googleMapsScriptId` | | `id` | The id of the script tag | `__googleMapsScriptId` |
| `language` | Force language, see [list of supported languages](https://developers.google.com/maps/faq#languagesupport) specified in the browser | The user's preferred language | | `language` | Force language, see [list of supported languages](https://developers.google.com/maps/faq#languagesupport) specified in the browser | The user's preferred language |
| `region` | Unicode region subtag identifiers compatible with [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1) | | | `region` | Unicode region subtag identifiers compatible with [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1) | |
@@ -102,6 +102,7 @@ $googleOptions = (new GoogleOptions())
// Add the custom options to the map // Add the custom options to the map
$map->options($googleOptions); $map->options($googleOptions);
``` ```
## Use cases ## Use cases
Below are some common or advanced use cases when using a map. Below are some common or advanced use cases when using a map.
@@ -111,17 +112,18 @@ Below are some common or advanced use cases when using a map.
A common use case is to customize the marker. You can listen to the `ux:map:marker:before-create` event to customize the marker before it is created. A common use case is to customize the marker. You can listen to the `ux:map:marker:before-create` event to customize the marker before it is created.
Assuming you have a map with a custom controller: Assuming you have a map with a custom controller:
```twig ```twig
{{ ux_map(map, {'data-controller': 'my-map' }) }} {{ ux_map(map, {'data-controller': 'my-map' }) }}
``` ```
You can create a Stimulus controller to customize the markers before they are created: You can create a Stimulus controller to customize the markers before they are created:
```js ```js
// assets/controllers/my_map_controller.js // assets/controllers/my_map_controller.js
import {Controller} from "@hotwired/stimulus"; import { Controller } from '@hotwired/stimulus';
export default class extends Controller export default class extends Controller {
{
connect() { connect() {
this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate); this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);
} }
@@ -137,22 +139,23 @@ export default class extends Controller
const { definition, google } = event.detail; const { definition, google } = event.detail;
// 1. To use a custom image for the marker // 1. To use a custom image for the marker
const beachFlagImg = document.createElement("img"); const beachFlagImg = document.createElement('img');
// Note: instead of using a hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`. // Note: instead of using a hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`.
beachFlagImg.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"; beachFlagImg.src =
definition.bridgeOptions = { 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
content: beachFlagImg definition.bridgeOptions = {
} content: beachFlagImg,
};
// 2. To use a custom glyph for the marker // 2. To use a custom glyph for the marker
const pinElement = new google.maps.marker.PinElement({ const pinElement = new google.maps.marker.PinElement({
// Note: instead of using a hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`. // Note: instead of using a hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`.
glyph: new URL('https://maps.gstatic.com/mapfiles/place_api/icons/v2/museum_pinlet.svg'), glyph: new URL('https://maps.gstatic.com/mapfiles/place_api/icons/v2/museum_pinlet.svg'),
glyphColor: "white", glyphColor: 'white',
}); });
definition.bridgeOptions = { definition.bridgeOptions = {
content: pinElement.element, content: pinElement.element,
} };
} }
} }
``` ```

11
assets/README.md
View File

@@ -6,9 +6,10 @@ JavaScript assets of the [symfony/ux-google-map](https://packagist.org/packages/
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.). 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.).
We **strongly recommend not installing this package directly**, but instead install the PHP package [symfony/ux-google-map](https://packagist.org/packages/symfony/ux-google-map) in your Symfony application with [Flex](https://github.com/symfony/flex) enabled. We **strongly recommend not installing this package directly**, but instead install the PHP package [symfony/ux-google-map](https://packagist.org/packages/symfony/ux-google-map) in your Symfony application with [Flex](https://github.com/symfony/flex) enabled.
If you still want to install this package directly, please make sure its version exactly matches [symfony/ux-google-map](https://packagist.org/packages/symfony/ux-google-map) PHP package version: If you still want to install this package directly, please make sure its version exactly matches [symfony/ux-google-map](https://packagist.org/packages/symfony/ux-google-map) PHP package version:
```shell ```shell
composer require symfony/ux-google-map:2.23.0 composer require symfony/ux-google-map:2.23.0
npm add @symfony/ux-google-map@2.23.0 npm add @symfony/ux-google-map@2.23.0
@@ -18,7 +19,7 @@ npm add @symfony/ux-google-map@2.23.0
## Resources ## Resources
- [Documentation](https://github.com/symfony/ux/tree/2.x/src/Map/src/Bridge/Google) - [Documentation](https://github.com/symfony/ux/tree/2.x/src/Map/src/Bridge/Google)
- [Report issues](https://github.com/symfony/ux/issues) and - [Report issues](https://github.com/symfony/ux/issues) and
[send Pull Requests](https://github.com/symfony/ux/pulls) [send Pull Requests](https://github.com/symfony/ux/pulls)
in the [main Symfony UX repository](https://github.com/symfony/ux) in the [main Symfony UX repository](https://github.com/symfony/ux)

6
assets/dist/map_controller.d.ts vendored
View File

@@ -11,7 +11,7 @@ declare class export_default extends AbstractMapController<MapOptions, google.ma
minZoomValueChanged(): void; minZoomValueChanged(): void;
maxZoomValueChanged(): void; maxZoomValueChanged(): void;
protected dispatchEvent(name: string, payload?: Record<string, unknown>): void; protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
protected doCreateMap({ definition }: { protected doCreateMap({ definition, }: {
definition: MapDefinition<MapOptions, google.maps.MapOptions>; definition: MapDefinition<MapOptions, google.maps.MapOptions>;
}): google.maps.Map; }): google.maps.Map;
protected doCreateMarker({ definition, }: { protected doCreateMarker({ definition, }: {
@@ -26,7 +26,7 @@ declare class export_default extends AbstractMapController<MapOptions, google.ma
definition: PolylineDefinition<google.maps.PolylineOptions, google.maps.InfoWindowOptions>; definition: PolylineDefinition<google.maps.PolylineOptions, google.maps.InfoWindowOptions>;
}): google.maps.Polyline; }): google.maps.Polyline;
protected doRemovePolyline(polyline: google.maps.Polyline): void; protected doRemovePolyline(polyline: google.maps.Polyline): void;
protected doCreateCircle({ definition }: { protected doCreateCircle({ definition, }: {
definition: CircleDefinition<google.maps.CircleOptions, google.maps.InfoWindowOptions>; definition: CircleDefinition<google.maps.CircleOptions, google.maps.InfoWindowOptions>;
}): google.maps.Circle; }): google.maps.Circle;
protected doRemoveCircle(circle: google.maps.Circle): void; protected doRemoveCircle(circle: google.maps.Circle): void;
@@ -40,7 +40,7 @@ declare class export_default extends AbstractMapController<MapOptions, google.ma
}): google.maps.InfoWindow; }): google.maps.InfoWindow;
protected doFitBoundsToMarkers(): void; protected doFitBoundsToMarkers(): void;
private createTextOrElement; private createTextOrElement;
protected doCreateIcon({ definition, element }: { protected doCreateIcon({ definition, element, }: {
definition: Icon; definition: Icon;
element: google.maps.marker.AdvancedMarkerElement; element: google.maps.marker.AdvancedMarkerElement;
}): void; }): void;

27
assets/dist/map_controller.js vendored
View File

@@ -34,7 +34,11 @@ var abstract_map_controller_default = class extends Controller {
this.createPolygon = this.createDrawingFactory("polygon", this.polygons, this.doCreatePolygon.bind(this)); this.createPolygon = this.createDrawingFactory("polygon", this.polygons, this.doCreatePolygon.bind(this));
this.createPolyline = this.createDrawingFactory("polyline", this.polylines, this.doCreatePolyline.bind(this)); this.createPolyline = this.createDrawingFactory("polyline", this.polylines, this.doCreatePolyline.bind(this));
this.createCircle = this.createDrawingFactory("circle", this.circles, this.doCreateCircle.bind(this)); this.createCircle = this.createDrawingFactory("circle", this.circles, this.doCreateCircle.bind(this));
this.createRectangle = this.createDrawingFactory("rectangle", this.rectangles, this.doCreateRectangle.bind(this)); this.createRectangle = this.createDrawingFactory(
"rectangle",
this.rectangles,
this.doCreateRectangle.bind(this)
);
this.map = this.doCreateMap({ definition: mapDefinition }); this.map = this.doCreateMap({ definition: mapDefinition });
this.markersValue.forEach((definition) => { this.markersValue.forEach((definition) => {
this.createMarker({ definition }); this.createMarker({ definition });
@@ -230,7 +234,9 @@ var map_controller_default = class extends abstract_map_controller_default {
detail: payload detail: payload
}); });
} }
doCreateMap({ definition }) { doCreateMap({
definition
}) {
const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition; const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
options.zoomControl = typeof options.zoomControlOptions !== "undefined"; options.zoomControl = typeof options.zoomControlOptions !== "undefined";
options.mapTypeControl = typeof options.mapTypeControlOptions !== "undefined"; options.mapTypeControl = typeof options.mapTypeControlOptions !== "undefined";
@@ -261,9 +267,13 @@ var map_controller_default = class extends abstract_map_controller_default {
} }
if (icon) { if (icon) {
if (Object.prototype.hasOwnProperty.call(bridgeOptions, "content")) { if (Object.prototype.hasOwnProperty.call(bridgeOptions, "content")) {
console.warn('[Symfony UX Map] Defining "bridgeOptions.content" for a marker with a custom icon is not supported and will be ignored.'); console.warn(
'[Symfony UX Map] Defining "bridgeOptions.content" for a marker with a custom icon is not supported and will be ignored.'
);
} else if (Object.prototype.hasOwnProperty.call(rawOptions, "content")) { } else if (Object.prototype.hasOwnProperty.call(rawOptions, "content")) {
console.warn('[Symfony UX Map] Defining "rawOptions.content" for a marker with a custom icon is not supported and will be ignored.'); console.warn(
'[Symfony UX Map] Defining "rawOptions.content" for a marker with a custom icon is not supported and will be ignored.'
);
} }
this.doCreateIcon({ definition: icon, element: marker }); this.doCreateIcon({ definition: icon, element: marker });
} }
@@ -314,7 +324,9 @@ var map_controller_default = class extends abstract_map_controller_default {
doRemovePolyline(polyline) { doRemovePolyline(polyline) {
polyline.setMap(null); polyline.setMap(null);
} }
doCreateCircle({ definition }) { doCreateCircle({
definition
}) {
const { "@id": _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition; const { "@id": _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
const circle = new _google.maps.Circle({ const circle = new _google.maps.Circle({
center, center,
@@ -416,7 +428,10 @@ var map_controller_default = class extends abstract_map_controller_default {
} }
return content; return content;
} }
doCreateIcon({ definition, element }) { doCreateIcon({
definition,
element
}) {
const { type, width, height } = definition; const { type, width, height } = definition;
if (type === IconTypes.Svg) { if (type === IconTypes.Svg) {
element.content = parser.parseFromString(definition.html, "image/svg+xml").documentElement; element.content = parser.parseFromString(definition.html, "image/svg+xml").documentElement;

4
assets/package.json
View File

@@ -21,9 +21,7 @@
"watch": "tsx ../../../../../../bin/build_package.ts . --watch", "watch": "tsx ../../../../../../bin/build_package.ts . --watch",
"test": "pnpm run test:browser", "test": "pnpm run test:browser",
"test:browser": "playwright test", "test:browser": "playwright test",
"test:browser:ui": "playwright test --ui", "test:browser:ui": "playwright test --ui"
"check": "biome check",
"ci": "biome ci"
}, },
"symfony": { "symfony": {
"controllers": { "controllers": {

40
assets/src/map_controller.ts
View File

@@ -65,7 +65,10 @@ export default class extends AbstractMapController<
google.maps.RectangleOptions, google.maps.RectangleOptions,
google.maps.Rectangle google.maps.Rectangle
> { > {
declare providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'>; declare providerOptionsValue: Pick<
LoaderOptions,
'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'
>;
declare map: google.maps.Map; declare map: google.maps.Map;
@@ -151,7 +154,11 @@ export default class extends AbstractMapController<
}); });
} }
protected doCreateMap({ definition }: { definition: MapDefinition<MapOptions, google.maps.MapOptions> }): google.maps.Map { protected doCreateMap({
definition,
}: {
definition: MapDefinition<MapOptions, google.maps.MapOptions>;
}): google.maps.Map {
const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition; const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
// We assume the following control options are enabled if their options are set // We assume the following control options are enabled if their options are set
@@ -191,9 +198,13 @@ export default class extends AbstractMapController<
if (icon) { if (icon) {
if (Object.prototype.hasOwnProperty.call(bridgeOptions, 'content')) { if (Object.prototype.hasOwnProperty.call(bridgeOptions, 'content')) {
console.warn('[Symfony UX Map] Defining "bridgeOptions.content" for a marker with a custom icon is not supported and will be ignored.'); console.warn(
'[Symfony UX Map] Defining "bridgeOptions.content" for a marker with a custom icon is not supported and will be ignored.'
);
} else if (Object.prototype.hasOwnProperty.call(rawOptions, 'content')) { } else if (Object.prototype.hasOwnProperty.call(rawOptions, 'content')) {
console.warn('[Symfony UX Map] Defining "rawOptions.content" for a marker with a custom icon is not supported and will be ignored.'); console.warn(
'[Symfony UX Map] Defining "rawOptions.content" for a marker with a custom icon is not supported and will be ignored.'
);
} }
this.doCreateIcon({ definition: icon, element: marker }); this.doCreateIcon({ definition: icon, element: marker });
@@ -270,7 +281,11 @@ export default class extends AbstractMapController<
polyline.setMap(null); polyline.setMap(null);
} }
protected doCreateCircle({ definition }: { definition: CircleDefinition<google.maps.CircleOptions, google.maps.InfoWindowOptions> }): google.maps.Circle { protected doCreateCircle({
definition,
}: {
definition: CircleDefinition<google.maps.CircleOptions, google.maps.InfoWindowOptions>;
}): google.maps.Circle {
const { '@id': _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition; const { '@id': _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
const circle = new _google.maps.Circle({ const circle = new _google.maps.Circle({
@@ -336,7 +351,12 @@ export default class extends AbstractMapController<
element, element,
}: { }: {
definition: Omit<InfoWindowDefinition<google.maps.InfoWindowOptions>, 'position'>; definition: Omit<InfoWindowDefinition<google.maps.InfoWindowOptions>, 'position'>;
element: google.maps.marker.AdvancedMarkerElement | google.maps.Polygon | google.maps.Polyline | google.maps.Circle | google.maps.Rectangle; element:
| google.maps.marker.AdvancedMarkerElement
| google.maps.Polygon
| google.maps.Polyline
| google.maps.Circle
| google.maps.Rectangle;
}): google.maps.InfoWindow { }): google.maps.InfoWindow {
const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition; const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition;
@@ -421,7 +441,13 @@ export default class extends AbstractMapController<
return content; return content;
} }
protected doCreateIcon({ definition, element }: { definition: Icon; element: google.maps.marker.AdvancedMarkerElement }): void { protected doCreateIcon({
definition,
element,
}: {
definition: Icon;
element: google.maps.marker.AdvancedMarkerElement;
}): void {
const { type, width, height } = definition; const { type, width, height } = definition;
if (type === IconTypes.Svg) { if (type === IconTypes.Svg) {