Skip to content

[Map] Allows Map options customization in ux:map:pre-connect event (e.g.: zoom, options, bridgeOptions...) #2861

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 23, 2025

Conversation

Kocal
Copy link
Member

@Kocal Kocal commented Jun 23, 2025

Q A
Bug fix? no
New feature? yes
Docs? yes
Issues Fix #...
License MIT

This feature allows users to override the options passed to L.Map() or new google.maps.Map() trough the ux:map:pre-connect event.

The configurable options are:

  • zoom
  • center
  • options
  • bridgeOptions, not injected by default, but can be defined on-the-fly

This is a blocking step for #2810, but also for one of my need when I wanted to persist the zoom/center in the URL, to share my map (https://hugo.alliau.me/places 😛) :

    _onMapPreConnect = (event) => {
        const { L } = event.detail;

        if (window.location.hash) {
            try {
                const state = Object.fromEntries(new URLSearchParams(window.location.hash.slice(1)));
                const zoom = Number(state.z);
                const center = state.center.split(",").map(Number);

                event.detail.zoom = zoom;
                event.detail.center = L.latLng(center[0], center[1]);
            } catch (e) {
                console.error("Invalid state in URL hash:", e);
            }
        }
    }

    _onMapConnect = (event) => {
        const { map } = event.detail;

        const updateState = () => {
            const center = map.getCenter();
            const zoom = map.getZoom();

            const state = {
                z: zoom,
                center: [center.lat.toFixed(5), center.lng.toFixed(5)],
            };

            window.history.replaceState(state, "", `#${new URLSearchParams(state).toString()}`);
        };

        map.addEventListener("zoom", () => updateState());
        map.addEventListener("move", () => updateState());
    };

@carsonbot carsonbot added Feature New Feature Map Status: Needs Review Needs to be reviewed labels Jun 23, 2025
Copy link
Contributor

github-actions bot commented Jun 23, 2025

📊 Packages dist files size difference

Thanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
Please review the changes and make sure they are expected.

FileBefore (Size / Gzip)After (Size / Gzip)
Map
abstract_map_controller.d.ts 7.2 kB / 1.37 kB 7.35 kB+2% 📈 / 1.38 kB0%
abstract_map_controller.js 5.31 kB / 1.35 kB 5.35 kB+1% 📈 / 1.35 kB+1% 📈
Map (Bridge Google)
map_controller.d.ts 3.38 kB / 917 B 3.36 kB-1% 📉 / 876 B-4% 📉
map_controller.js 14 kB / 3 kB 14.1 kB+1% 📈 / 3.01 kB0%
Map (Bridge Leaflet)
map_controller.d.ts 2.94 kB / 844 B 2.91 kB-1% 📉 / 806 B-5% 📉
map_controller.js 13.15 kB / 3.18 kB 13.24 kB+1% 📈 / 3.2 kB0%

@Kocal Kocal force-pushed the map-pre-connect-map-options-custom branch from cc88622 to d108248 Compare June 23, 2025 07:37
@Kocal Kocal force-pushed the map-pre-connect-map-options-custom branch from d108248 to afc7db6 Compare June 23, 2025 07:44
@Kocal Kocal merged commit efe1666 into symfony:2.x Jun 23, 2025
23 checks passed
@Kocal Kocal deleted the map-pre-connect-map-options-custom branch June 23, 2025 07:48
Kocal added a commit that referenced this pull request Jun 23, 2025
This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Map] Add `extra` data to `Map`

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes <!-- please update src/**/CHANGELOG.md files -->
| Docs?         | yes <!-- required for new features -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

Replace #2810

Like for `Marker` and cie, `extra` data can now be defined on the `Map` in order to pass extra data from your PHP code to your custom Stimulus Controller, through `ux:map:pre-connect` and `ux:map:connect` events.

Combo-ed with `bridgeOptions` from #2861, it means that you can fully customize the Map creation given extra data given your PHP code (e.g.: injecting some API keys):
```php
$map = new Map(extra: ['vector_layer_api_key' => 'bar']);
// or
$map->extra(['foo' => 'bar']);
```
```js
this.element.addEventListener('ux:map:pre-connect', (event) => {
    const { detail } = event;

    console.log(detail.extra); // {'foo': 'bar'}

    if (detail.extra.foo === 'bar') {
        detail.extra.bridgeOptions = { a_bridge_specific_option: 'foobar' };
    }
});
```

Commits
-------

0363d5d [Map] Add `extra` data to `Map`
b4b7f61 [Map] Reword PHPDoc about "extra" properties
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature New Feature Map Status: Needs Review Needs to be reviewed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants