[Map] Add "extra" data for markers and infowindows #2040
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Kocal
force-pushed
the
feat/ux-map-extra-data
branch
2 times, most recently
from
d66ce7b to
c56e9eb
Compare
Kocal
force-pushed
the
feat/ux-map-extra-data
branch
from
c56e9eb to
c118875
Compare
|
Thanks to your description I understand the need for this. Also, I like the |
kbond
added a commit
that referenced
this pull request
Aug 12, 2024
…ject provider's SDK (`L` or `google`) to dispatched events (Kocal) This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Map] Add support for `libraries` for Google Bridge, inject provider's SDK (`L` or `google`) to dispatched events | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes <!-- please update src/**/CHANGELOG.md files --> | Issues | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT <!-- Replace this notice by a description of your feature/bugfix. This will help reviewers and should be a good start for the documentation. Additionally (see https://symfony.com/releases): - Always add tests and ensure they pass. - For new features, provide some code snippets to help understand usage. - Features and deprecations must be submitted against branch main. - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry - Never break backward compatibility (see https://symfony.com/bc). --> Follows #2040. This PR gives the developper access to `L` (if using Leaflet) or `google` (if using Google Maps) in dispatched events, so the developper can **fully and freely** customize the map, their markers (before and after creation), and info windows (before and after creation). I've added some use cases/examples in respective documentation, but tell me if a better place fits! Also, please no quick merge this time (even if I like that :D), I really wants some reviews for this PR! cc `@javiereguiluz` 🙏🏻 # Code and screenshots On my personal project, I have a map with a lot of markers. Before UX Map, I was using Google Maps because I've found the "glyph" feature really sexy, but I was not able to use it anymore... until now! ## With Google Maps Code: ```js import {Controller} from "`@hotwired`/stimulus"; export default class extends Controller { connect() { this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate); } disconnect() { this.element.removeEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate); } _onMarkerBeforeCreate(event) { const { definition, google } = event.detail; const pinElement = new google.maps.marker.PinElement({ glyph: new URL(String(definition.extra['icon_mask_uri'])), // I've filled `extra` parameter from `new Marker()` (PHP) with the icon mask URL glyphColor: "white", }); definition.rawOptions = { content: pinElement.element, } } } ``` Screenshot: <img width="470" alt="Capture d’écran 2024-08-09 à 22 58 19" src="https://github.com/user-attachments/assets/ace5a033-a423-45c5-bd67-0da68dd188c1"> ## With Leaflet A dumb example taken from the website: Code: ```js import {Controller} from "`@hotwired`/stimulus"; export default class extends Controller { connect() { this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate); } disconnect() { this.element.removeEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate); } _onMarkerBeforeCreate(event) { const { definition, L } = event.detail; const redIcon = L.icon({ 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.rawOptions = { icon: redIcon, } } } ``` Screenshot: <img width="495" alt="Capture d’écran 2024-08-09 à 23 19 23" src="https://github.com/user-attachments/assets/e771c133-794a-4693-bfbb-5a3118f5f7f5"> Commits ------- 2dbb169 [Map] Add support for `libraries` for Google Bridge, inject provider's SDK (`L` or `google`) to dispatched events
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Actually when creating Marker and InfoWindow with Symfony UX Map, you can only pass:
position,title, andinfoWindowheaderContent,content,position,openedandautoCloseThis is great, but too strict.
Adding a new property
extra, defined by the developper and only used by the developper (in specific Stimulus events), is IMHO a good way to open for more extensibility.Note that the new example in the documentation is not complete yet, a 2nd PR will appears soon to customize the Marker Icon :)