[Map] Create Map component

src/Map/.gitattributes

@@ -0,0 +1,7 @@
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/.symfony.bundle.yaml export-ignore
+/phpunit.xml.dist export-ignore
+/assets/src export-ignore
+/assets/test export-ignore
+/tests export-ignore

src/Map/.gitignore

@@ -0,0 +1,4 @@
+vendor
+composer.lock
+.php_cs.cache
+.phpunit.result.cache

src/Map/.symfony.bundle.yaml

@@ -0,0 +1,3 @@
+branches: ["2.x"]
+maintained_branches: ["2.x"]
+doc_dir: "doc"

src/Map/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## 2.19.0
+
+-   Component added

src/Map/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2023-present Fabien Potencier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

src/Map/README.md

@@ -0,0 +1,16 @@
+# Symfony UX Map
+
+**EXPERIMENTAL** This component is currently experimental and is
+likely to change, or even change drastically.
+
+Symfony UX Map integrates [Symfony Translation](https://symfony.com/doc/current/translation.html) for JavaScript.
+
+**This repository is a READ-ONLY sub-tree split**. See
+https://github.com/symfony/ux to create issues or submit pull requests.
+
+## Resources
+
+-   [Documentation](https://symfony.com/bundles/ux-map/current/index.html)
+-   [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)

src/Map/assets/dist/google_maps_controller.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="google.maps" />
+import { Controller } from '@hotwired/stimulus';
+type MarkerId = number;
+export default class extends Controller<HTMLElement> {
+    static values: {
+        view: ObjectConstructor;
+    };
+    viewValue: {
+        mapId: string | null;
+        center: null | {
+            lat: number;
+            lng: number;
+        };
+        zoom: number;
+        gestureHandling: string;
+        backgroundColor: string;
+        disableDoubleClickZoom: boolean;
+        zoomControl: boolean;
+        zoomControlOptions: google.maps.ZoomControlOptions;
+        mapTypeControl: boolean;
+        mapTypeControlOptions: google.maps.MapTypeControlOptions;
+        streetViewControl: boolean;
+        streetViewControlOptions: google.maps.StreetViewControlOptions;
+        fullscreenControl: boolean;
+        fullscreenControlOptions: google.maps.FullscreenControlOptions;
+        markers: Array<{
+            _id: MarkerId;
+            position: {
+                lat: number;
+                lng: number;
+            };
+            title: string | null;
+        }>;
+        infoWindows: Array<{
+            headerContent: string | null;
+            content: string | null;
+            position: {
+                lat: number;
+                lng: number;
+            };
+            opened: boolean;
+            _markerId: MarkerId | null;
+            autoClose: boolean;
+        }>;
+        fitBoundsToMarkers: boolean;
+    };
+    private loader;
+    private map;
+    private markers;
+    private infoWindows;
+    initialize(): void;
+    connect(): Promise<void>;
+    private createTextOrElement;
+    private closeInfoWindowsExcept;
+    private dispatchEvent;
+}
+export {};

src/Map/assets/dist/google_maps_controller.js

@@ -0,0 +1,134 @@
+import { Controller } from '@hotwired/stimulus';
+import { Loader } from '@googlemaps/js-api-loader';
+
+class default_1 extends Controller {
+    constructor() {
+        super(...arguments);
+        this.markers = new Map();
+        this.infoWindows = [];
+    }
+    initialize() {
+        var _a;
+        const providerConfig = (_a = window.__symfony_ux_maps.providers) === null || _a === void 0 ? void 0 : _a.google_maps;
+        if (!providerConfig) {
+            throw new Error('Google Maps provider configuration is missing, did you forget to call `{{ ux_map_script_tags() }}`?');
+        }
+        const loaderOptions = {
+            apiKey: providerConfig.key,
+        };
+        this.dispatchEvent('init', {
+            loaderOptions,
+        });
+        this.loader = new Loader(loaderOptions);
+    }
+    async connect() {
+        const { Map: GoogleMap, InfoWindow } = await this.loader.importLibrary('maps');
+        const mapOptions = {
+            gestureHandling: this.viewValue.gestureHandling,
+            backgroundColor: this.viewValue.backgroundColor,
+            disableDoubleClickZoom: this.viewValue.disableDoubleClickZoom,
+            zoomControl: this.viewValue.zoomControl,
+            zoomControlOptions: this.viewValue.zoomControlOptions,
+            mapTypeControl: this.viewValue.mapTypeControl,
+            mapTypeControlOptions: this.viewValue.mapTypeControlOptions,
+            streetViewControl: this.viewValue.streetViewControl,
+            streetViewControlOptions: this.viewValue.streetViewControlOptions,
+            fullscreenControl: this.viewValue.fullscreenControl,
+            fullscreenControlOptions: this.viewValue.fullscreenControlOptions,
+        };
+        if (this.viewValue.mapId) {
+            mapOptions.mapId = this.viewValue.mapId;
+        }
+        if (this.viewValue.center) {
+            mapOptions.center = this.viewValue.center;
+        }
+        if (this.viewValue.zoom) {
+            mapOptions.zoom = this.viewValue.zoom;
+        }
+        this.dispatchEvent('pre-connect', {
+            mapOptions,
+        });
+        this.map = new GoogleMap(this.element, mapOptions);
+        if (this.viewValue.markers) {
+            const { AdvancedMarkerElement } = await this.loader.importLibrary('marker');
+            this.viewValue.markers.forEach((markerConfiguration) => {
+                const marker = new AdvancedMarkerElement({
+                    position: markerConfiguration.position,
+                    title: markerConfiguration.title,
+                    map: this.map,
+                });
+                this.markers.set(markerConfiguration._id, marker);
+            });
+            if (this.viewValue.fitBoundsToMarkers) {
+                const bounds = new google.maps.LatLngBounds();
+                this.markers.forEach((marker) => {
+                    if (!marker.position) {
+                        return;
+                    }
+                    bounds.extend(marker.position);
+                });
+                this.map.fitBounds(bounds);
+            }
+        }
+        this.viewValue.infoWindows.forEach((infoWindowConfiguration) => {
+            const marker = infoWindowConfiguration._markerId
+                ? this.markers.get(infoWindowConfiguration._markerId)
+                : undefined;
+            const infoWindow = new InfoWindow({
+                headerContent: this.createTextOrElement(infoWindowConfiguration.headerContent),
+                content: this.createTextOrElement(infoWindowConfiguration.content),
+                position: infoWindowConfiguration.position,
+            });
+            this.infoWindows.push(infoWindow);
+            if (infoWindowConfiguration.opened) {
+                infoWindow.open({
+                    map: this.map,
+                    shouldFocus: false,
+                    anchor: marker,
+                });
+            }
+            if (marker) {
+                marker.addListener('click', () => {
+                    if (infoWindowConfiguration.autoClose) {
+                        this.closeInfoWindowsExcept(infoWindow);
+                    }
+                    infoWindow.open({
+                        map: this.map,
+                        anchor: marker,
+                    });
+                });
+            }
+        });
+        this.dispatchEvent('connect', {
+            map: this.map,
+            markers: this.markers,
+            infoWindows: this.infoWindows,
+        });
+    }
+    createTextOrElement(content) {
+        if (!content) {
+            return null;
+        }
+        if (content.includes('<')) {
+            const div = document.createElement('div');
+            div.innerHTML = content;
+            return div;
+        }
+        return content;
+    }
+    closeInfoWindowsExcept(infoWindow) {
+        this.infoWindows.forEach((otherInfoWindow) => {
+            if (otherInfoWindow !== infoWindow) {
+                otherInfoWindow.close();
+            }
+        });
+    }
+    dispatchEvent(name, payload) {
+        this.dispatch(name, { detail: payload, prefix: 'google-maps' });
+    }
+}
+default_1.values = {
+    view: Object,
+};
+
+export { default_1 as default };

src/Map/assets/dist/leaflet_controller.d.ts

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus';
+import 'leaflet/dist/leaflet.min.css';
+import type { MarkerOptions } from 'leaflet';
+type MarkerId = number;
+export default class extends Controller<HTMLElement> {
+    static values: {
+        view: ObjectConstructor;
+    };
+    viewValue: {
+        center: null | {
+            lat: number;
+            lng: number;
+        };
+        zoom: number | null;
+        tileLayer: {
+            url: string;
+            attribution: string;
+        } & Record<string, unknown>;
+        fitBoundsToMarkers: boolean;
+        markers: Array<{
+            _id: MarkerId;
+            position: {
+                lat: number;
+                lng: number;
+            };
+        } & MarkerOptions>;
+        popups: Array<{
+            _markerId: MarkerId | null;
+            content: string;
+            position: {
+                lat: number;
+                lng: number;
+            };
+            opened: boolean;
+            autoClose: boolean;
+        }>;
+    };
+    private map;
+    private markers;
+    private popups;
+    connect(): void;
+    private setupTileLayer;
+    private dispatchEvent;
+}
+export {};