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
- 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
- Ensure compatibility with PHP 8.5
- Ensure compatibility with PHP 8.5
## 2.29.0
- Add Symfony 8 support
- Add Symfony 8 support
## 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`,
because their shapes are too complex.
Instead, listen to the `ux:map:info-window:before-create` event to set the position manually.
```js
this.element.addEventListener('ux:map:info-window:before-create', (event) => {
const { google, element, definition } = event.detail;
@@ -35,21 +36,21 @@
## 2.25
- Downgrade PHP requirement from 8.3 to 8.1
- Downgrade PHP requirement from 8.3 to 8.1
## 2.22
- 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\GoogleRenderer` constructor
- 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\GoogleRenderer` constructor
## 2.20
### BC Breaks
- Renamed importmap entry `@symfony/ux-google-map/map-controller` to `@symfony/ux-google-map`,
you will need to update your importmap.
- Renamed importmap entry `@symfony/ux-google-map/map-controller` to `@symfony/ux-google-map`,
you will need to update your importmap.
## 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:
| Option | Description | Default |
|-------------|------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------|
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| `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 |
| `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
$map->options($googleOptions);
```
## Use cases
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.
Assuming you have a map with a custom controller:
```twig
{{ ux_map(map, {'data-controller': 'my-map' }) }}
```
You can create a Stimulus controller to customize the markers before they are created:
```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() {
this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);
}
@@ -137,22 +139,23 @@ export default class extends Controller
const { definition, google } = event.detail;
// 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`.
beachFlagImg.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
definition.bridgeOptions = {
content: beachFlagImg
}
beachFlagImg.src =
'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
definition.bridgeOptions = {
content: beachFlagImg,
};
// 2. To use a custom glyph for the marker
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`.
glyph: new URL('https://maps.gstatic.com/mapfiles/place_api/icons/v2/museum_pinlet.svg'),
glyphColor: "white",
glyphColor: 'white',
});
definition.bridgeOptions = {
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.).
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:
```shell
composer require 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
- [Documentation](https://github.com/symfony/ux/tree/2.x/src/Map/src/Bridge/Google)
- [Report issues](https://github.com/symfony/ux/issues) and
[send Pull Requests](https://github.com/symfony/ux/pulls)
in the [main Symfony UX repository](https://github.com/symfony/ux)
- [Documentation](https://github.com/symfony/ux/tree/2.x/src/Map/src/Bridge/Google)
- [Report issues](https://github.com/symfony/ux/issues) and
[send Pull Requests](https://github.com/symfony/ux/pulls)
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;
maxZoomValueChanged(): void;
protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
protected doCreateMap({ definition }: {
protected doCreateMap({ definition, }: {
definition: MapDefinition<MapOptions, google.maps.MapOptions>;
}): google.maps.Map;
protected doCreateMarker({ definition, }: {
@@ -26,7 +26,7 @@ declare class export_default extends AbstractMapController<MapOptions, google.ma
definition: PolylineDefinition<google.maps.PolylineOptions, google.maps.InfoWindowOptions>;
}): google.maps.Polyline;
protected doRemovePolyline(polyline: google.maps.Polyline): void;
protected doCreateCircle({ definition }: {
protected doCreateCircle({ definition, }: {
definition: CircleDefinition<google.maps.CircleOptions, google.maps.InfoWindowOptions>;
}): google.maps.Circle;
protected doRemoveCircle(circle: google.maps.Circle): void;
@@ -40,7 +40,7 @@ declare class export_default extends AbstractMapController<MapOptions, google.ma
}): google.maps.InfoWindow;
protected doFitBoundsToMarkers(): void;
private createTextOrElement;
protected doCreateIcon({ definition, element }: {
protected doCreateIcon({ definition, element, }: {
definition: Icon;
element: google.maps.marker.AdvancedMarkerElement;
}): 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.createPolyline = this.createDrawingFactory("polyline", this.polylines, this.doCreatePolyline.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.markersValue.forEach((definition) => {
this.createMarker({ definition });
@@ -230,7 +234,9 @@ var map_controller_default = class extends abstract_map_controller_default {
detail: payload
});
}
doCreateMap({ definition }) {
doCreateMap({
definition
}) {
const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
options.zoomControl = typeof options.zoomControlOptions !== "undefined";
options.mapTypeControl = typeof options.mapTypeControlOptions !== "undefined";
@@ -261,9 +267,13 @@ var map_controller_default = class extends abstract_map_controller_default {
}
if (icon) {
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")) {
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 });
}
@@ -314,7 +324,9 @@ var map_controller_default = class extends abstract_map_controller_default {
doRemovePolyline(polyline) {
polyline.setMap(null);
}
doCreateCircle({ definition }) {
doCreateCircle({
definition
}) {
const { "@id": _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
const circle = new _google.maps.Circle({
center,
@@ -416,7 +428,10 @@ var map_controller_default = class extends abstract_map_controller_default {
}
return content;
}
doCreateIcon({ definition, element }) {
doCreateIcon({
definition,
element
}) {
const { type, width, height } = definition;
if (type === IconTypes.Svg) {
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",
"test": "pnpm run test:browser",
"test:browser": "playwright test",
"test:browser:ui": "playwright test --ui",
"check": "biome check",
"ci": "biome ci"
"test:browser:ui": "playwright test --ui"
},
"symfony": {
"controllers": {

40
assets/src/map_controller.ts
View File

@@ -65,7 +65,10 @@ export default class extends AbstractMapController<
google.maps.RectangleOptions,
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;
@@ -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;
// 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 (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')) {
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 });
@@ -270,7 +281,11 @@ export default class extends AbstractMapController<
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 circle = new _google.maps.Circle({
@@ -336,7 +351,12 @@ export default class extends AbstractMapController<
element,
}: {
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 {
const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition;
@@ -421,7 +441,13 @@ export default class extends AbstractMapController<
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;
if (type === IconTypes.Svg) {