npm - @symfony/ux-leaflet-map - Versions diffs - 2.26.1 → 2.28.1 - Mend

@symfony/ux-leaflet-map 2.26.1 → 2.28.1

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.

Files changed (3) hide show

package/dist/map_controller.d.ts +37 -17
package/dist/map_controller.js +371 -249
package/package.json +19 -10

package/dist/map_controller.d.ts CHANGED Viewed

@@ -1,46 +1,66 @@
-import AbstractMapController from '@symfony/ux-map';
-import type { Icon, InfoWindowWithoutPositionDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition } from '@symfony/ux-map';
-import 'leaflet/dist/leaflet.min.css';
+import AbstractMapController, { MapDefinition, MarkerDefinition, PolygonDefinition, PolylineDefinition, CircleDefinition, RectangleDefinition, InfoWindowDefinition, Icon } from '@symfony/ux-map';
 import * as L from 'leaflet';
-import type { MapOptions as LeafletMapOptions, MarkerOptions, PolylineOptions as PolygonOptions, PolylineOptions, PopupOptions } from 'leaflet';
-type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
+import { MapOptions as MapOptions$1, ControlPosition, MarkerOptions, PopupOptions, PolylineOptions, CircleOptions } from 'leaflet';
+type MapOptions = Pick<MapOptions$1, 'attributionControl' | 'zoomControl'> & {
+    attributionControlOptions?: {
+        position: ControlPosition;
+        prefix: string | false;
+    };
+    zoomControlOptions?: {
+        position: ControlPosition;
+        zoomInText: string;
+        zoomInTitle: string;
+        zoomOutText: string;
+        zoomOutTitle: string;
+    };
     tileLayer: {
         url: string;
         attribution: string;
         options: Record<string, unknown>;
     } | false;
 };
-export default class extends AbstractMapController<MapOptions, L.Map, MarkerOptions, L.Marker, PopupOptions, L.Popup, PolygonOptions, L.Polygon, PolylineOptions, L.Polyline> {
+declare class export_default extends AbstractMapController<MapOptions, MapOptions$1, L.Map, MarkerOptions, L.Marker, PopupOptions, L.Popup, PolylineOptions, L.Polygon, PolylineOptions, L.Polyline, CircleOptions, L.Circle, PolylineOptions, L.Rectangle> {
     map: L.Map;
     connect(): void;
     centerValueChanged(): void;
     zoomValueChanged(): void;
+    minZoomValueChanged(): void;
+    maxZoomValueChanged(): void;
     protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
-    protected doCreateMap({ center, zoom, options, }: {
-        center: Point | null;
-        zoom: number | null;
-        options: MapOptions;
+    protected doCreateMap({ definition }: {
+        definition: MapDefinition<MapOptions, MapOptions$1>;
     }): L.Map;
     protected doCreateMarker({ definition }: {
         definition: MarkerDefinition<MarkerOptions, PopupOptions>;
     }): L.Marker;
     protected doRemoveMarker(marker: L.Marker): void;
-    protected doCreatePolygon({ definition, }: {
-        definition: PolygonDefinition<PolygonOptions, PopupOptions>;
+    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;
+    protected doCreateCircle({ definition }: {
+        definition: CircleDefinition<CircleOptions, PopupOptions>;
+    }): L.Circle;
+    protected doRemoveCircle(circle: L.Circle): void;
+    protected doCreateRectangle({ definition }: {
+        definition: RectangleDefinition<PolylineOptions, PopupOptions>;
+    }): L.Rectangle;
+    protected doRemoveRectangle(rectangle: L.Rectangle): void;
     protected doCreateInfoWindow({ definition, element, }: {
-        definition: InfoWindowWithoutPositionDefinition<PopupOptions>;
-        element: L.Marker | L.Polygon | L.Polyline;
+        definition: Omit<InfoWindowDefinition<PopupOptions>, 'position'>;
+        element: L.Marker | L.Polygon | L.Polyline | L.Circle | L.Rectangle;
     }): L.Popup;
-    protected doCreateIcon({ definition, element, }: {
+    protected doCreateIcon({ definition, element }: {
         definition: Icon;
         element: L.Marker;
     }): void;
     protected doFitBoundsToMarkers(): void;
+    private closePopups;
 }
-export {};
+export { export_default as default };

package/dist/map_controller.js CHANGED Viewed

@@ -1,252 +1,374 @@
-import { Controller } from '@hotwired/stimulus';
-import 'leaflet/dist/leaflet.min.css';
-import * as L from 'leaflet';
-const IconTypes = {
-    Url: 'url',
-    Svg: 'svg',
-    UxIcon: 'ux-icon',
+// ../../../../assets/dist/abstract_map_controller.js
+import { Controller } from "@hotwired/stimulus";
+var IconTypes = {
+  Url: "url",
+  Svg: "svg",
+  UxIcon: "ux-icon"
 };
-class default_1 extends Controller {
-    constructor() {
-        super(...arguments);
-        this.markers = new Map();
-        this.polygons = new Map();
-        this.polylines = new Map();
-        this.infoWindows = [];
-        this.isConnected = false;
-    }
-    connect() {
-        const options = this.optionsValue;
-        this.dispatchEvent('pre-connect', { options });
-        this.createMarker = this.createDrawingFactory('marker', this.markers, this.doCreateMarker.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.map = this.doCreateMap({
-            center: this.hasCenterValue ? this.centerValue : null,
-            zoom: this.hasZoomValue ? this.zoomValue : null,
-            options,
-        });
-        this.markersValue.forEach((definition) => this.createMarker({ definition }));
-        this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
-        this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
-        if (this.fitBoundsToMarkersValue) {
-            this.doFitBoundsToMarkers();
-        }
-        this.dispatchEvent('connect', {
-            map: this.map,
-            markers: [...this.markers.values()],
-            polygons: [...this.polygons.values()],
-            polylines: [...this.polylines.values()],
-            infoWindows: this.infoWindows,
-        });
-        this.isConnected = true;
-    }
-    createInfoWindow({ definition, element, }) {
-        this.dispatchEvent('info-window:before-create', { definition, element });
-        const infoWindow = this.doCreateInfoWindow({ definition, element });
-        this.dispatchEvent('info-window:after-create', { infoWindow, definition, element });
-        this.infoWindows.push(infoWindow);
-        return infoWindow;
-    }
-    markersValueChanged() {
-        if (!this.isConnected) {
-            return;
-        }
-        this.onDrawChanged(this.markers, this.markersValue, this.createMarker, this.doRemoveMarker);
-        if (this.fitBoundsToMarkersValue) {
-            this.doFitBoundsToMarkers();
-        }
-    }
-    polygonsValueChanged() {
-        if (!this.isConnected) {
-            return;
-        }
-        this.onDrawChanged(this.polygons, this.polygonsValue, this.createPolygon, this.doRemovePolygon);
-    }
-    polylinesValueChanged() {
-        if (!this.isConnected) {
-            return;
-        }
-        this.onDrawChanged(this.polylines, this.polylinesValue, this.createPolyline, this.doRemovePolyline);
-    }
-    createDrawingFactory(type, draws, factory) {
-        const eventBefore = `${type}:before-create`;
-        const eventAfter = `${type}:after-create`;
-        return ({ definition }) => {
-            this.dispatchEvent(eventBefore, { definition });
-            const drawing = factory({ definition });
-            this.dispatchEvent(eventAfter, { [type]: drawing, definition });
-            draws.set(definition['@id'], drawing);
-            return drawing;
-        };
-    }
-    onDrawChanged(draws, newDrawDefinitions, factory, remover) {
-        const idsToRemove = new Set(draws.keys());
-        newDrawDefinitions.forEach((definition) => {
-            idsToRemove.delete(definition['@id']);
-        });
-        idsToRemove.forEach((id) => {
-            const draw = draws.get(id);
-            remover(draw);
-            draws.delete(id);
-        });
-        newDrawDefinitions.forEach((definition) => {
-            if (!draws.has(definition['@id'])) {
-                factory({ definition });
-            }
-        });
-    }
-}
-default_1.values = {
-    providerOptions: Object,
-    center: Object,
-    zoom: Number,
-    fitBoundsToMarkers: Boolean,
-    markers: Array,
-    polygons: Array,
-    polylines: Array,
-    options: Object,
+var abstract_map_controller_default = class extends Controller {
+  constructor() {
+    super(...arguments);
+    this.markers = /* @__PURE__ */ new Map();
+    this.polygons = /* @__PURE__ */ new Map();
+    this.polylines = /* @__PURE__ */ new Map();
+    this.circles = /* @__PURE__ */ new Map();
+    this.rectangles = /* @__PURE__ */ new Map();
+    this.infoWindows = [];
+    this.isConnected = false;
+  }
+  connect() {
+    const extra = this.hasExtraValue ? this.extraValue : {};
+    const mapDefinition = {
+      center: this.hasCenterValue ? this.centerValue : null,
+      zoom: this.hasZoomValue ? this.zoomValue : null,
+      minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
+      maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
+      options: this.optionsValue,
+      extra
+    };
+    this.dispatchEvent("pre-connect", mapDefinition);
+    this.createMarker = this.createDrawingFactory("marker", this.markers, this.doCreateMarker.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.createCircle = this.createDrawingFactory("circle", this.circles, this.doCreateCircle.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 }));
+    this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
+    this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
+    this.circlesValue.forEach((definition) => this.createCircle({ definition }));
+    this.rectanglesValue.forEach((definition) => this.createRectangle({ definition }));
+    if (this.fitBoundsToMarkersValue) {
+      this.doFitBoundsToMarkers();
+    }
+    this.dispatchEvent("connect", {
+      map: this.map,
+      markers: [...this.markers.values()],
+      polygons: [...this.polygons.values()],
+      polylines: [...this.polylines.values()],
+      circles: [...this.circles.values()],
+      rectangles: [...this.rectangles.values()],
+      infoWindows: this.infoWindows,
+      extra
+    });
+    this.isConnected = true;
+  }
+  //region Public API
+  createInfoWindow({
+    definition,
+    element
+  }) {
+    this.dispatchEvent("info-window:before-create", { definition, element });
+    const infoWindow = this.doCreateInfoWindow({ definition, element });
+    this.dispatchEvent("info-window:after-create", { infoWindow, definition, element });
+    this.infoWindows.push(infoWindow);
+    return infoWindow;
+  }
+  markersValueChanged() {
+    if (!this.isConnected) {
+      return;
+    }
+    this.onDrawChanged(this.markers, this.markersValue, this.createMarker, this.doRemoveMarker);
+    if (this.fitBoundsToMarkersValue) {
+      this.doFitBoundsToMarkers();
+    }
+  }
+  polygonsValueChanged() {
+    if (!this.isConnected) {
+      return;
+    }
+    this.onDrawChanged(this.polygons, this.polygonsValue, this.createPolygon, this.doRemovePolygon);
+  }
+  polylinesValueChanged() {
+    if (!this.isConnected) {
+      return;
+    }
+    this.onDrawChanged(this.polylines, this.polylinesValue, this.createPolyline, this.doRemovePolyline);
+  }
+  circlesValueChanged() {
+    if (!this.isConnected) {
+      return;
+    }
+    this.onDrawChanged(this.circles, this.circlesValue, this.createCircle, this.doRemoveCircle);
+  }
+  rectanglesValueChanged() {
+    if (!this.isConnected) {
+      return;
+    }
+    this.onDrawChanged(this.rectangles, this.rectanglesValue, this.createRectangle, this.doRemoveRectangle);
+  }
+  createDrawingFactory(type, draws, factory) {
+    const eventBefore = `${type}:before-create`;
+    const eventAfter = `${type}:after-create`;
+    return ({ definition }) => {
+      this.dispatchEvent(eventBefore, { definition });
+      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
+        );
+      }
+      const drawing = factory({ definition });
+      this.dispatchEvent(eventAfter, { [type]: drawing, definition });
+      draws.set(definition["@id"], drawing);
+      return drawing;
+    };
+  }
+  onDrawChanged(draws, newDrawDefinitions, factory, remover) {
+    const idsToRemove = new Set(draws.keys());
+    newDrawDefinitions.forEach((definition) => {
+      idsToRemove.delete(definition["@id"]);
+    });
+    idsToRemove.forEach((id) => {
+      const draw = draws.get(id);
+      remover(draw);
+      draws.delete(id);
+    });
+    newDrawDefinitions.forEach((definition) => {
+      if (!draws.has(definition["@id"])) {
+        factory({ definition });
+      }
+    });
+  }
+  //endregion
+};
+abstract_map_controller_default.values = {
+  providerOptions: Object,
+  center: Object,
+  zoom: Number,
+  minZoom: Number,
+  maxZoom: Number,
+  fitBoundsToMarkers: Boolean,
+  markers: Array,
+  polygons: Array,
+  polylines: Array,
+  circles: Array,
+  rectangles: Array,
+  options: Object,
+  extra: Object
 };
-class map_controller extends default_1 {
-    connect() {
-        L.Marker.prototype.options.icon = L.divIcon({
-            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>',
-            iconSize: [25, 41],
-            iconAnchor: [12.5, 41],
-            popupAnchor: [0, -41],
-            className: '',
-        });
-        super.connect();
-    }
-    centerValueChanged() {
-        if (this.map && this.hasCenterValue && this.centerValue && this.hasZoomValue && this.zoomValue) {
-            this.map.setView(this.centerValue, this.zoomValue);
-        }
-    }
-    zoomValueChanged() {
-        if (this.map && this.hasZoomValue && this.zoomValue) {
-            this.map.setZoom(this.zoomValue);
-        }
-    }
-    dispatchEvent(name, payload = {}) {
-        this.dispatch(name, {
-            prefix: 'ux:map',
-            detail: {
-                ...payload,
-                L,
-            },
-        });
-    }
-    doCreateMap({ center, zoom, options, }) {
-        const map = L.map(this.element, {
-            ...options,
-            center: center === null ? undefined : center,
-            zoom: zoom === null ? undefined : zoom,
-        });
-        if (options.tileLayer) {
-            L.tileLayer(options.tileLayer.url, {
-                attribution: options.tileLayer.attribution,
-                ...options.tileLayer.options,
-            }).addTo(map);
-        }
-        return map;
-    }
-    doCreateMarker({ definition }) {
-        const { '@id': _id, position, title, infoWindow, icon, extra, rawOptions = {}, ...otherOptions } = definition;
-        const marker = L.marker(position, { title: title || undefined, ...otherOptions, ...rawOptions }).addTo(this.map);
-        if (infoWindow) {
-            this.createInfoWindow({ definition: infoWindow, element: marker });
-        }
-        if (icon) {
-            this.doCreateIcon({ definition: icon, element: marker });
-        }
-        return marker;
-    }
-    doRemoveMarker(marker) {
-        marker.remove();
-    }
-    doCreatePolygon({ definition, }) {
-        const { '@id': _id, points, title, infoWindow, rawOptions = {} } = definition;
-        const polygon = L.polygon(points, { ...rawOptions }).addTo(this.map);
-        if (title) {
-            polygon.bindPopup(title);
-        }
-        if (infoWindow) {
-            this.createInfoWindow({ definition: infoWindow, element: polygon });
-        }
-        return polygon;
-    }
-    doRemovePolygon(polygon) {
-        polygon.remove();
-    }
-    doCreatePolyline({ definition, }) {
-        const { '@id': _id, points, title, infoWindow, rawOptions = {} } = definition;
-        const polyline = L.polyline(points, { ...rawOptions }).addTo(this.map);
-        if (title) {
-            polyline.bindPopup(title);
-        }
-        if (infoWindow) {
-            this.createInfoWindow({ definition: infoWindow, element: polyline });
-        }
-        return polyline;
-    }
-    doRemovePolyline(polyline) {
-        polyline.remove();
-    }
-    doCreateInfoWindow({ definition, element, }) {
-        const { headerContent, content, rawOptions = {}, ...otherOptions } = definition;
-        element.bindPopup([headerContent, content].filter((x) => x).join('<br>'), { ...otherOptions, ...rawOptions });
-        if (definition.opened) {
-            element.openPopup();
-        }
-        const popup = element.getPopup();
-        if (!popup) {
-            throw new Error('Unable to get the Popup associated with the element.');
-        }
-        return popup;
-    }
-    doCreateIcon({ definition, element, }) {
-        const { type, width, height } = definition;
-        let icon;
-        if (type === IconTypes.Svg) {
-            icon = L.divIcon({
-                html: definition.html,
-                iconSize: [width, height],
-                className: '',
-            });
-        }
-        else if (type === IconTypes.UxIcon) {
-            icon = L.divIcon({
-                html: definition._generated_html,
-                iconSize: [width, height],
-                className: '',
-            });
-        }
-        else if (type === IconTypes.Url) {
-            icon = L.icon({
-                iconUrl: definition.url,
-                iconSize: [width, height],
-                className: '',
-            });
-        }
-        else {
-            throw new Error(`Unsupported icon type: ${type}.`);
-        }
-        element.setIcon(icon);
-    }
-    doFitBoundsToMarkers() {
-        if (this.markers.size === 0) {
-            return;
-        }
-        const bounds = [];
-        this.markers.forEach((marker) => {
-            const position = marker.getLatLng();
-            bounds.push([position.lat, position.lng]);
-        });
-        this.map.fitBounds(bounds);
-    }
-}
-export { map_controller as default };
+// src/map_controller.ts
+import "leaflet/dist/leaflet.min.css";
+import * as L from "leaflet";
+var map_controller_default = class extends abstract_map_controller_default {
+  connect() {
+    L.Marker.prototype.options.icon = L.divIcon({
+      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>',
+      iconSize: [25, 41],
+      iconAnchor: [12.5, 41],
+      popupAnchor: [0, -41],
+      className: ""
+      // Adding an empty class to the icon to avoid the default Leaflet styles
+    });
+    super.connect();
+  }
+  centerValueChanged() {
+    if (this.map && this.hasCenterValue && this.centerValue && this.hasZoomValue && this.zoomValue) {
+      this.map.setView(this.centerValue, this.zoomValue);
+    }
+  }
+  zoomValueChanged() {
+    if (this.map && this.hasZoomValue && this.zoomValue) {
+      this.map.setZoom(this.zoomValue);
+    }
+  }
+  minZoomValueChanged() {
+    if (this.map && this.hasMinZoomValue && this.minZoomValue) {
+      this.map.setMinZoom(this.minZoomValue);
+    }
+  }
+  maxZoomValueChanged() {
+    if (this.map && this.hasMaxZoomValue && this.maxZoomValue) {
+      this.map.setMaxZoom(this.maxZoomValue);
+    }
+  }
+  dispatchEvent(name, payload = {}) {
+    payload.L = L;
+    this.dispatch(name, {
+      prefix: "ux:map",
+      detail: payload
+    });
+  }
+  doCreateMap({ definition }) {
+    const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
+    const map2 = L.map(this.element, {
+      center: center === null ? void 0 : center,
+      zoom: zoom === null ? void 0 : zoom,
+      minZoom: minZoom === null ? void 0 : minZoom,
+      maxZoom: maxZoom === null ? void 0 : maxZoom,
+      attributionControl: false,
+      zoomControl: false,
+      ...options,
+      ...bridgeOptions
+    });
+    if (options.tileLayer) {
+      L.tileLayer(options.tileLayer.url, {
+        attribution: options.tileLayer.attribution,
+        ...options.tileLayer.options
+      }).addTo(map2);
+    }
+    if (typeof options.attributionControlOptions !== "undefined") {
+      L.control.attribution({ ...options.attributionControlOptions }).addTo(map2);
+    }
+    if (typeof options.zoomControlOptions !== "undefined") {
+      L.control.zoom({ ...options.zoomControlOptions }).addTo(map2);
+    }
+    return map2;
+  }
+  doCreateMarker({ definition }) {
+    const { "@id": _id, position, title, infoWindow, icon: icon2, rawOptions = {}, bridgeOptions = {} } = definition;
+    const marker2 = L.marker(position, {
+      title: title || void 0,
+      ...rawOptions,
+      ...bridgeOptions,
+      riseOnHover: true
+    }).addTo(this.map);
+    if (infoWindow) {
+      this.createInfoWindow({ definition: infoWindow, element: marker2 });
+    }
+    if (icon2) {
+      this.doCreateIcon({ definition: icon2, element: marker2 });
+    }
+    return marker2;
+  }
+  doRemoveMarker(marker2) {
+    marker2.remove();
+  }
+  doCreatePolygon({ definition }) {
+    const { "@id": _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
+    const polygon2 = L.polygon(points, { ...rawOptions, ...bridgeOptions }).addTo(this.map);
+    if (title) {
+      polygon2.bindPopup(title);
+    }
+    if (infoWindow) {
+      this.createInfoWindow({ definition: infoWindow, element: polygon2 });
+    }
+    return polygon2;
+  }
+  doRemovePolygon(polygon2) {
+    polygon2.remove();
+  }
+  doCreatePolyline({ definition }) {
+    const { "@id": _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
+    const polyline2 = L.polyline(points, { ...rawOptions, ...bridgeOptions }).addTo(this.map);
+    if (title) {
+      polyline2.bindPopup(title);
+    }
+    if (infoWindow) {
+      this.createInfoWindow({ definition: infoWindow, element: polyline2 });
+    }
+    return polyline2;
+  }
+  doRemovePolyline(polyline2) {
+    polyline2.remove();
+  }
+  doCreateCircle({ definition }) {
+    const { "@id": _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
+    const circle2 = L.circle(center, { radius, ...rawOptions, ...bridgeOptions }).addTo(this.map);
+    if (title) {
+      circle2.bindPopup(title);
+    }
+    if (infoWindow) {
+      this.createInfoWindow({ definition: infoWindow, element: circle2 });
+    }
+    return circle2;
+  }
+  doRemoveCircle(circle2) {
+    circle2.remove();
+  }
+  doCreateRectangle({ definition }) {
+    const { "@id": _id, southWest, northEast, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
+    const rectangle2 = L.rectangle(
+      [
+        [southWest.lat, southWest.lng],
+        [northEast.lat, northEast.lng]
+      ],
+      { ...rawOptions, ...bridgeOptions }
+    ).addTo(this.map);
+    if (title) {
+      rectangle2.bindPopup(title);
+    }
+    if (infoWindow) {
+      this.createInfoWindow({ definition: infoWindow, element: rectangle2 });
+    }
+    return rectangle2;
+  }
+  doRemoveRectangle(rectangle2) {
+    rectangle2.remove();
+  }
+  doCreateInfoWindow({
+    definition,
+    element
+  }) {
+    const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition;
+    element.bindPopup([headerContent, content].filter((x) => x).join("<br>"), { ...rawOptions, ...bridgeOptions });
+    if (opened) {
+      if (autoClose) {
+        this.closePopups();
+      }
+      element.openPopup();
+    }
+    const popup = element.getPopup();
+    if (!popup) {
+      throw new Error("Unable to get the Popup associated with the element.");
+    }
+    popup.on("click", () => {
+      if (autoClose) {
+        this.closePopups({ except: popup });
+      }
+    });
+    return popup;
+  }
+  doCreateIcon({ definition, element }) {
+    const { type, width, height } = definition;
+    let icon2;
+    if (type === IconTypes.Svg) {
+      icon2 = L.divIcon({
+        html: definition.html,
+        iconSize: [width, height],
+        className: ""
+        // Adding an empty class to the icon to avoid the default Leaflet styles
+      });
+    } else if (type === IconTypes.UxIcon) {
+      icon2 = L.divIcon({
+        html: definition._generated_html,
+        iconSize: [width, height],
+        className: ""
+        // Adding an empty class to the icon to avoid the default Leaflet styles
+      });
+    } else if (type === IconTypes.Url) {
+      icon2 = L.icon({
+        iconUrl: definition.url,
+        iconSize: [width, height],
+        className: ""
+        // Adding an empty class to the icon to avoid the default Leaflet styles
+      });
+    } else {
+      throw new Error(`Unsupported icon type: ${type}.`);
+    }
+    element.setIcon(icon2);
+  }
+  doFitBoundsToMarkers() {
+    if (this.markers.size === 0) {
+      return;
+    }
+    const bounds = [];
+    this.markers.forEach((marker2) => {
+      const position = marker2.getLatLng();
+      bounds.push([position.lat, position.lng]);
+    });
+    this.map.fitBounds(bounds);
+  }
+  closePopups(options = {}) {
+    this.infoWindows.forEach((popup) => {
+      if (options.except && popup === options.except) {
+        return;
+      }
+      popup.close();
+    });
+  }
+};
+export {
+  map_controller_default as default
+};

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@symfony/ux-leaflet-map",
   "description": "Leaflet bridge for Symfony UX Map, integrate interactive maps in your Symfony applications",
   "license": "MIT",
-  "version": "2.26.1",
+  "version": "2.28.1",
   "keywords": [
     "symfony-ux",
     "leaflet",
@@ -16,13 +16,6 @@
   ],
   "main": "dist/map_controller.js",
   "types": "dist/map_controller.d.ts",
-  "scripts": {
-    "build": "node ../../../../../../bin/build_package.js .",
-    "watch": "node ../../../../../../bin/build_package.js . --watch",
-    "test": "../../../../../../bin/test_package.sh .",
-    "check": "biome check",
-    "ci": "biome ci"
-  },
   "symfony": {
     "controllers": {
       "map": {
@@ -49,8 +42,24 @@
   },
   "devDependencies": {
     "@hotwired/stimulus": "^3.0.0",
-    "@symfony/ux-map": "2.26.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
     "@types/leaflet": "^1.9.12",
-    "leaflet": "^1.9.4"
+    "@vitest/browser": "^3.2.4",
+    "jsdom": "^26.1.0",
+    "leaflet": "^1.9.4",
+    "tslib": "^2.8.1",
+    "tsx": "^4.20.3",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "@symfony/ux-map": "2.28.1"
+  },
+  "scripts": {
+    "build": "tsx ../../../../../../bin/build_package.ts .",
+    "watch": "tsx ../../../../../../bin/build_package.ts . --watch",
+    "test": "../../../../../../bin/test_package.sh .",
+    "check": "biome check",
+    "ci": "biome ci"
   }
 }