mirror of
https://github.com/symfony/ux-leaflet-map.git
synced 2026-03-23 16:42:19 +01:00
Drop Biome.js for oxfmt and oxlint
This commit is contained in:
28
CHANGELOG.md
28
CHANGELOG.md
@@ -2,40 +2,40 @@
|
||||
|
||||
## 2.31
|
||||
|
||||
- Display a warning when trying to define `bridgeOptions.icon` for a `Marker` that already has an `Icon`
|
||||
- Display a warning when trying to define `bridgeOptions.icon` 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
|
||||
|
||||
- Add `attributionControl` and `attributionControlOptions` to `LeafletOptions`,
|
||||
to configure [attribution control](https://leafletjs.com/reference.html#map-attributioncontrol) and its options
|
||||
- Add `zoomControl` and `zoomControlOptions` to `LeafletOptions`,
|
||||
to configure [zoom control](https://leafletjs.com/reference.html#map-zoomcontrol) and its options
|
||||
- Add `attributionControl` and `attributionControlOptions` to `LeafletOptions`,
|
||||
to configure [attribution control](https://leafletjs.com/reference.html#map-attributioncontrol) and its options
|
||||
- Add `zoomControl` and `zoomControlOptions` to `LeafletOptions`,
|
||||
to configure [zoom control](https://leafletjs.com/reference.html#map-zoomcontrol) and its options
|
||||
|
||||
## 2.26
|
||||
|
||||
- Using `new LeafletOptions(tileLayer: false)` will now disable the default `TileLayer`.
|
||||
Useful when using a custom tiles layer rendering engine not configurable with `L.tileLayer().addTo(map)` method
|
||||
(e.g.: [Esri/esri-leaflet-vector](https://github.com/Esri/esri-leaflet-vector))
|
||||
- Using `new LeafletOptions(tileLayer: false)` will now disable the default `TileLayer`.
|
||||
Useful when using a custom tiles layer rendering engine not configurable with `L.tileLayer().addTo(map)` method
|
||||
(e.g.: [Esri/esri-leaflet-vector](https://github.com/Esri/esri-leaflet-vector))
|
||||
|
||||
## 2.25
|
||||
|
||||
- Downgrade PHP requirement from 8.3 to 8.1
|
||||
- Downgrade PHP requirement from 8.3 to 8.1
|
||||
|
||||
## 2.20
|
||||
|
||||
### BC Breaks
|
||||
|
||||
- Renamed importmap entry `@symfony/ux-leaflet-map/map-controller` to `@symfony/ux-leaflet-map`,
|
||||
you will need to update your importmap.
|
||||
- Renamed importmap entry `@symfony/ux-leaflet-map/map-controller` to `@symfony/ux-leaflet-map`,
|
||||
you will need to update your importmap.
|
||||
|
||||
## 2.19
|
||||
|
||||
- Bridge added
|
||||
- Bridge added
|
||||
|
||||
35
README.md
35
README.md
@@ -72,17 +72,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);
|
||||
}
|
||||
@@ -99,19 +100,19 @@ export default class extends Controller
|
||||
|
||||
// Use a custom icon for the marker
|
||||
const redIcon = L.icon({
|
||||
// Note: instead of using a hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`.
|
||||
iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-red.png',
|
||||
shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
|
||||
iconSize: [38, 95], // size of the icon
|
||||
shadowSize: [50, 64], // size of the shadow
|
||||
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
|
||||
shadowAnchor: [4, 62], // the same for the shadow
|
||||
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
|
||||
})
|
||||
// Note: instead of using a hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`.
|
||||
iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-red.png',
|
||||
shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
|
||||
iconSize: [38, 95], // size of the icon
|
||||
shadowSize: [50, 64], // size of the shadow
|
||||
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
|
||||
shadowAnchor: [4, 62], // the same for the shadow
|
||||
popupAnchor: [-3, -76], // point from which the popup should open relative to the iconAnchor
|
||||
});
|
||||
|
||||
definition.bridgeOptions = {
|
||||
icon: redIcon,
|
||||
}
|
||||
icon: redIcon,
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -135,6 +136,7 @@ $leafletOptions = (new LeafletOptions())
|
||||
### Unable to find `leaflet/dist/leaflet.min.css` file when using Webpack Encore
|
||||
|
||||
When using Webpack Encore with the Leaflet bridge, you may encounter the following error:
|
||||
|
||||
```
|
||||
Module build failed: Module not found:
|
||||
"./node_modules/.pnpm/file+vendor+symfony+ux-leaflet-map+assets_@hotwired+stimulus@3.0.0_leaflet@1.9.4/node_modules/@symfony/ux-leaflet-map/dist/map_controller.js" contains a reference to the file "leaflet/dist/leaflet.min.css".
|
||||
@@ -152,10 +154,11 @@ The correct path is `leaflet/dist/leaflet.css`, but it is not possible to fix it
|
||||
with the Symfony AssetMapper component.
|
||||
|
||||
As a workaround, you can configure Webpack Encore to add an alias for the `leaflet/dist/leaflet.min.css` file:
|
||||
|
||||
```js
|
||||
Encore.addAliases({
|
||||
'leaflet/dist/leaflet.min.css': 'leaflet/dist/leaflet.css',
|
||||
})
|
||||
'leaflet/dist/leaflet.min.css': 'leaflet/dist/leaflet.css',
|
||||
});
|
||||
```
|
||||
|
||||
## Resources
|
||||
|
||||
@@ -6,9 +6,10 @@ JavaScript assets of the [symfony/ux-leaflet-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-leaflet-map](https://packagist.org/packages/symfony/ux-leaflet-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-leaflet-map](https://packagist.org/packages/symfony/ux-leaflet-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-leaflet-map](https://packagist.org/packages/symfony/ux-leaflet-map) PHP package version:
|
||||
|
||||
```shell
|
||||
composer require symfony/ux-leaflet-map:2.23.0
|
||||
npm add @symfony/ux-leaflet-map@2.23.0
|
||||
@@ -18,7 +19,7 @@ npm add @symfony/ux-leaflet-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
6
assets/dist/map_controller.d.ts
vendored
@@ -35,11 +35,11 @@ declare class export_default extends AbstractMapController<MapOptions, MapOption
|
||||
definition: MarkerDefinition<MarkerOptions, PopupOptions>;
|
||||
}): L.Marker;
|
||||
protected doRemoveMarker(marker: L.Marker): void;
|
||||
protected doCreatePolygon({ definition }: {
|
||||
protected doCreatePolygon({ definition, }: {
|
||||
definition: PolygonDefinition<PolylineOptions, PopupOptions>;
|
||||
}): L.Polygon;
|
||||
protected doRemovePolygon(polygon: L.Polygon): void;
|
||||
protected doCreatePolyline({ definition }: {
|
||||
protected doCreatePolyline({ definition, }: {
|
||||
definition: PolylineDefinition<PolylineOptions, PopupOptions>;
|
||||
}): L.Polyline;
|
||||
protected doRemovePolyline(polyline: L.Polyline): void;
|
||||
@@ -47,7 +47,7 @@ declare class export_default extends AbstractMapController<MapOptions, MapOption
|
||||
definition: CircleDefinition<CircleOptions, PopupOptions>;
|
||||
}): L.Circle;
|
||||
protected doRemoveCircle(circle: L.Circle): void;
|
||||
protected doCreateRectangle({ definition }: {
|
||||
protected doCreateRectangle({ definition, }: {
|
||||
definition: RectangleDefinition<PolylineOptions, PopupOptions>;
|
||||
}): L.Rectangle;
|
||||
protected doRemoveRectangle(rectangle: L.Rectangle): void;
|
||||
|
||||
26
assets/dist/map_controller.js
vendored
26
assets/dist/map_controller.js
vendored
@@ -31,7 +31,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 });
|
||||
@@ -239,9 +243,13 @@ var map_controller_default = class extends abstract_map_controller_default {
|
||||
}
|
||||
if (icon2) {
|
||||
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.');
|
||||
console.warn(
|
||||
'[Symfony UX Map] Defining "bridgeOptions.icon" for a marker with a custom icon is not supported and will be ignored.'
|
||||
);
|
||||
} 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.');
|
||||
console.warn(
|
||||
'[Symfony UX Map] Defining "rawOptions.icon" for a marker with a custom icon is not supported and will be ignored.'
|
||||
);
|
||||
}
|
||||
this.doCreateIcon({ definition: icon2, element: marker2 });
|
||||
}
|
||||
@@ -250,7 +258,9 @@ var map_controller_default = class extends abstract_map_controller_default {
|
||||
doRemoveMarker(marker2) {
|
||||
marker2.remove();
|
||||
}
|
||||
doCreatePolygon({ definition }) {
|
||||
doCreatePolygon({
|
||||
definition
|
||||
}) {
|
||||
const { "@id": _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
|
||||
const polygon2 = L.polygon(points, { ...rawOptions, ...bridgeOptions }).addTo(this.map);
|
||||
if (title) {
|
||||
@@ -264,7 +274,9 @@ var map_controller_default = class extends abstract_map_controller_default {
|
||||
doRemovePolygon(polygon2) {
|
||||
polygon2.remove();
|
||||
}
|
||||
doCreatePolyline({ definition }) {
|
||||
doCreatePolyline({
|
||||
definition
|
||||
}) {
|
||||
const { "@id": _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
|
||||
const polyline2 = L.polyline(points, { ...rawOptions, ...bridgeOptions }).addTo(this.map);
|
||||
if (title) {
|
||||
@@ -292,7 +304,9 @@ var map_controller_default = class extends abstract_map_controller_default {
|
||||
doRemoveCircle(circle2) {
|
||||
circle2.remove();
|
||||
}
|
||||
doCreateRectangle({ definition }) {
|
||||
doCreateRectangle({
|
||||
definition
|
||||
}) {
|
||||
const { "@id": _id, southWest, northEast, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
|
||||
const rectangle2 = L.rectangle(
|
||||
[
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -155,9 +155,13 @@ export default class extends AbstractMapController<
|
||||
|
||||
if (icon) {
|
||||
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.');
|
||||
console.warn(
|
||||
'[Symfony UX Map] Defining "bridgeOptions.icon" for a marker with a custom icon is not supported and will be ignored.'
|
||||
);
|
||||
} 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.');
|
||||
console.warn(
|
||||
'[Symfony UX Map] Defining "rawOptions.icon" for a marker with a custom icon is not supported and will be ignored.'
|
||||
);
|
||||
}
|
||||
|
||||
this.doCreateIcon({ definition: icon, element: marker });
|
||||
@@ -170,7 +174,11 @@ export default class extends AbstractMapController<
|
||||
marker.remove();
|
||||
}
|
||||
|
||||
protected doCreatePolygon({ definition }: { definition: PolygonDefinition<PolygonOptions, PopupOptions> }): L.Polygon {
|
||||
protected doCreatePolygon({
|
||||
definition,
|
||||
}: {
|
||||
definition: PolygonDefinition<PolygonOptions, PopupOptions>;
|
||||
}): L.Polygon {
|
||||
const { '@id': _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
|
||||
|
||||
const polygon = L.polygon(points, { ...rawOptions, ...bridgeOptions }).addTo(this.map);
|
||||
@@ -193,7 +201,11 @@ export default class extends AbstractMapController<
|
||||
polygon.remove();
|
||||
}
|
||||
|
||||
protected doCreatePolyline({ definition }: { definition: PolylineDefinition<PolylineOptions, PopupOptions> }): L.Polyline {
|
||||
protected doCreatePolyline({
|
||||
definition,
|
||||
}: {
|
||||
definition: PolylineDefinition<PolylineOptions, PopupOptions>;
|
||||
}): L.Polyline {
|
||||
const { '@id': _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
|
||||
|
||||
const polyline = L.polyline(points, { ...rawOptions, ...bridgeOptions }).addTo(this.map);
|
||||
@@ -239,7 +251,11 @@ export default class extends AbstractMapController<
|
||||
circle.remove();
|
||||
}
|
||||
|
||||
protected doCreateRectangle({ definition }: { definition: RectangleDefinition<RectangleOptions, PopupOptions> }): L.Rectangle {
|
||||
protected doCreateRectangle({
|
||||
definition,
|
||||
}: {
|
||||
definition: RectangleDefinition<RectangleOptions, PopupOptions>;
|
||||
}): L.Rectangle {
|
||||
const { '@id': _id, southWest, northEast, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
|
||||
|
||||
const rectangle = L.rectangle(
|
||||
|
||||
Reference in New Issue
Block a user