[Map] Adding polygons to google and leaflet + info window #2162

rrr63 · 2024-09-14T09:19:36Z

Q	A
Bug fix?	no
New feature?	yes
Issues
License	MIT

Hello,

In my job i use to work a lot with maps, so i would love to work with symfony ux in next projects.
But i have to work with polygons, so i tried to implement it to the ux-map.

I added polygons on the Map component, and made it work on both bridge : google and leaflet.
I added a window popup on click also, the current version of window popup worked only with markers.
I had to rename createInfoWindow to createInfoWindowMarker. With that i could add a createInfoWindowPolygon.
The only difference with the infoWindow from marker is that his anchor will be the event cursor position, because the area of the polygon could be very large and we want a window on the click position.

You can try by adding a simple polygon on your map :

      ->addPolygon(new Polygon(
                points: [
                    new Point(45.7402741, 3.191185),
                    new Point(45.7314078, 3.1903267),
                    new Point(45.7307488, 3.208952),
                    new Point(45.7402741, 3.2112694)
                ],
                rawOptions:[
                    'fillColor' => 'green',
                    'color' => 'green',
                ],
                infoWindow: new InfoWindow(
                    headerContent: '<b>Polygon</b>',


                    content: 'I am a polygon'
                )
            ))

Here a full example that works with leaflet and google that show some of french regions via an api call

$polygons = json_decode(file_get_contents('api_url'), true);
        $polygons = $polygons['features'];
        
        $googleOptions = (new GoogleOptions())
            ->mapId('mapId')
        ;
    
        $map = (new Map('default', $googleOptions))
            ->center(new Point(45.8079318, 3))
            ->zoom(10)
            ;
    
        foreach ($polygons as $polygon) {
            $points = [];
            $title = $polygon['properties']['nom'];
            foreach ($polygon['geometry']['coordinates'][0] as $point) {
                if (count($point) == 2) {
                    $points[] = new Point($point[1], $point[0]);
                }
            }
    
            $map->addPolygon(new Polygon(
                points: $points,
                rawOptions:[
                    'fillColor' => 'red',
                    'color' => 'red',
                ],
                infoWindow: new InfoWindow(
                    headerContent: '<b>'.$title.'</b>',
                    content: 'The French region of '.$title.'.'
                )
            ));
        }

I added tests for polygons and polygon info window
I hope I did it right, i listen for any suggestions or edits in the PR

smnandre · 2024-09-14T15:08:32Z

Thank you very much for this PR @rrr63 👍

I think @Kocal will lead the review here :)

Kocal

Thank you for working on this @rrr63!

It's not far from perfect, but I do have a few comments.

Also, don't forget to update Map's CHANGELOG.md files, thanks :)

src/Map/assets/src/abstract_map_controller.ts

Kocal · 2024-09-15T06:40:56Z

src/Map/assets/test/abstract_map_controller.test.ts

+        const polygon = { polygon: 'polygon', title: definition.title };
+
+        if (definition.infoWindow) {
+            this.createInfoWindowPolygon({ definition: definition.infoWindow, polygon });


Suggested change

this.createInfoWindowPolygon({ definition: definition.infoWindow, polygon });

this.createInfoWindow({ definition: definition.infoWindow, polygon });

src/Map/assets/test/abstract_map_controller.test.ts

src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts

src/Map/src/Polygon.php

rrr63 · 2024-09-15T16:55:14Z

@Kocal Thank for your comments, i fixed it.
You are right ! It will not break any apps because of info-window:before-create & info-window:after-create.
And it seems more accessible for future additions

rrr63 · 2024-09-15T16:57:51Z

However, I wonder because a test did not pass on the Autocomplete component by just changing the Map's changelog ...

rrr63 · 2024-09-16T07:38:15Z

Weird, it works by adding the changelog : Polygons added but didnt work with Adding polygons ... :)

Kocal

Minor comments, and I think it will be good for me!
I will try to find some time to try what you did :)

Kocal · 2024-09-16T19:53:02Z

src/Map/src/Bridge/Google/assets/src/map_controller.ts

+        const latLngs = points.map((point) => ({ lat: point.lat, lng: point.lng }));
+
+        const polygon = new _google.maps.Polygon({
+            ...rawOptions,
+            paths: latLngs,


points is already a list of { lat: number; lng: number }, so it should be enough no?

Suggested change

const latLngs = points.map((point) => ({ lat: point.lat, lng: point.lng }));

const polygon = new _google.maps.Polygon({

...rawOptions,

paths: latLngs,

const polygon = new _google.maps.Polygon({

...rawOptions,

paths: points,

src/Map/src/Bridge/Google/assets/src/map_controller.ts

src/Map/src/Polygon.php

Kocal · 2024-09-18T08:19:35Z

I've just merged #2117, you will need to rebase your PR and add polygons support to ux_map() and <twig:ux:map> aswell, thanks 🙏🏻

Feel free to ask help if needed

rrr63 · 2024-09-18T14:50:22Z

Hello @Kocal
Any tips on how could i resolved this conflicts ?
Do i have to do it locally or on github ?

Thanks

smnandre · 2024-09-18T22:08:29Z

Locally after a rebase on 2.x

You need to rebase / fix the conflcits / force-push here :)

Now it's a bit hard to review 90 files 😅

smnandre · 2024-09-18T22:08:42Z

I'll add then a couple of comments, regarding argument order and default values :)

rrr63 · 2024-09-19T05:11:49Z

Oh so sorry,

Do you think it will be easier for you if I create a new PR?

Kocal · 2024-09-19T07:04:43Z

I will see what I can do

Kocal · 2024-09-19T07:11:44Z

It should be fine, the PR is back to ~10 commits and ~20 files

rrr63 · 2024-09-19T15:57:38Z

It should be fine, the PR is back to ~10 commits and ~20 files

Thanks!!!

smnandre · 2024-09-21T01:25:42Z

I like it very much ! Would you agree, afterwards, to help me prepare a demo using polygons on the website ?

rrr63 · 2024-09-21T07:31:11Z

Yes I could, with pleasure :)

src/Map/assets/src/abstract_map_controller.ts

Kocal

Final reviews 🙏🏻

Kocal · 2024-09-22T12:24:01Z

src/Map/assets/src/abstract_map_controller.ts

    protected abstract doCreateInfoWindow({
        definition,
-        marker,
+        element,
    }: {
-        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
-        marker: Marker;
+        definition:
+            | MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow']
+            | PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
+        element: Marker | Polygon;
    }): InfoWindow;


Can be improved to:

protected abstract doCreateInfoWindow({ definition, element, }: { definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow']; element: Marker; } | { definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow']; element: Polygon; }): InfoWindow;

Ok, thanks for this review !

Kocal · 2024-09-22T12:26:10Z

src/Map/src/Bridge/Google/assets/src/map_controller.ts

-                anchor: marker,
+        if (element instanceof google.maps.marker.AdvancedMarkerElement) {
+            element.addListener('click', () => {
+                if (definition.autoClose) this.closeInfoWindowsExcept(infoWindow);


Not a fan of one-lined condition + code, as it can easily introduce mistakes, please prefer keeping this form:

Suggested change

if (definition.autoClose) this.closeInfoWindowsExcept(infoWindow);

if (definition.autoClose) {

this.closeInfoWindowsExcept(infoWindow);

}

Note: I will see if Biome can prevent this

Kocal · 2024-09-22T12:26:41Z

src/Map/src/Bridge/Google/assets/src/map_controller.ts

-                anchor: marker,
+        } else if (element instanceof google.maps.Polygon) {
+            element.addListener('click', (event: any) => {
+                if (definition.autoClose) this.closeInfoWindowsExcept(infoWindow);


Not a fan of one-lined condition + code, as it can easily introduce mistakes, please prefer keeping this form:

Suggested change

if (definition.autoClose) this.closeInfoWindowsExcept(infoWindow);

if (definition.autoClose) {

this.closeInfoWindowsExcept(infoWindow);

}

Note: I will see if Biome can prevent this

Kocal · 2024-09-24T05:52:18Z

I'm taking care of the rest, rebasing and fixing conflicts, testing the feature on my side, and merge :)

Kocal · 2024-09-24T06:09:21Z

Working as expected:

I've also added some documentation and squashed everything.
I'm merging after CI becomes green

Kocal · 2024-09-24T06:15:13Z

It took time, but here we go, this is in now. Thank you very much @rrr63.

rrr63 · 2024-09-24T06:33:20Z

Thanks to you, @Kocal and @smnandre for your reviews

…nt, ...) (Kocal) This PR was squashed before being merged into the 2.x branch. Discussion ---------- [DX] Add per-package Yarn scripts (build, watch, test, lint, ...) | Q | A | ------------- | --- | Bug fix? | no | New feature? | no  | Issues | Fix #...  | License | MIT  When working in UX Map, it was very painful to build or watch modifications on `.ts` files, I had investigate how the building process worked, and had to run Rollup like this, which is far from ideal (not documented and not obvious): ``` ./node_modules/.bin/rollup -c --environment INPUT_FILE:src/Map/assets/src/abstract_map_controller.ts -w ./node_modules/.bin/rollup -c --environment INPUT_FILE:src/Map/src/Bridge/Google/assets/src/map_controller.ts -w ./node_modules/.bin/rollup -c --environment INPUT_FILE:src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts -w ``` And I also felt sorry for `@rrr63` when he worked on adding Polygons on Map (#2162)... This PR improves the way developers will work on UX, and makes their lives easier. **Before**: - `yarn build` compiled the assets from ALL packages, it was not possible to build packages from only one package (which is useful if you work on a single package) - no `yarn watch` - `yarn test` runned tests from ALL packages, like `yarn build`, it was not possible to run tests for only one package **Now:** - at the project root, `build`/`test`/`lint`/`format`/`check-lint`/`check-format` scripts will run on all assets **from all packages**. And it will be faster than before, when processing was sequential, but now it's parallelized. - at a package root (ex: `src/Map/assets`), `build`/`test`/`lint`/`format`/`check-lint`/`check-format` scripts will run on all assets **from this package only** - `build` and `watch` scripts handles both TypeScript and CSS files in a single command This is a first step to what we spoke about with `@smnandre` to write a contribution guide. It is now much more easier and friendlier to tell a developer to run `yarn watch` inside a package root, instead of telling it to run `./node_modules/.bin/rollup -c --environment INPUT_FILE:src/Map/src/Bridge/Google/assets/src/map_controller.ts -w` (and more, if you have multiple files). <img width="1210" alt="image" src="https://github.com/user-attachments/assets/f40d4efc-439d-4f83-a0f8-611b1a64b334"> Commits ------- b8dc5fd Ignore `var` folder in Biome.js 8397b52 [DX] Rework testing process, add `test` script to packages package.json bc1d63c [DX] Reconfigure lint/format tasks to not run the command for each workspace, since Biome is super fast (also include bin and test JS files) 1873b3e [DX] Rework building process, and add build/watch scripts to packages package.json 5517388 [DX] Add lint/format/check-lint/check-format scripts to packages package.json

carsonbot added Feature New Feature Map Status: Needs Review Needs to be reviewed labels Sep 14, 2024

smnandre requested a review from Kocal September 14, 2024 15:08

Kocal reviewed Sep 15, 2024

View reviewed changes

Kocal reviewed Sep 16, 2024

View reviewed changes

Kocal force-pushed the ux-map branch from 43cb9d5 to 150771d Compare September 19, 2024 07:08

Kocal force-pushed the ux-map branch from 150771d to 1683967 Compare September 19, 2024 07:12

smnandre reviewed Sep 21, 2024

View reviewed changes

src/Map/assets/src/abstract_map_controller.ts Outdated Show resolved Hide resolved

Kocal reviewed Sep 22, 2024

View reviewed changes

[Map] Add support for Polygons

2f63db7

Kocal force-pushed the ux-map branch from 8f3aa45 to 2f63db7 Compare September 24, 2024 06:08

Kocal merged commit 01a1fa0 into symfony:2.x Sep 24, 2024
60 checks passed

Kocal mentioned this pull request Nov 2, 2024

[DX] Add per-package Yarn scripts (build, watch, test, lint, ...) #2326

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Map] Adding polygons to google and leaflet + info window #2162

[Map] Adding polygons to google and leaflet + info window #2162

rrr63 commented Sep 14, 2024

smnandre commented Sep 14, 2024

Kocal left a comment

Kocal Sep 15, 2024

rrr63 commented Sep 15, 2024

rrr63 commented Sep 15, 2024

rrr63 commented Sep 16, 2024

Kocal left a comment •

edited

Loading

Kocal Sep 16, 2024

Kocal commented Sep 18, 2024

rrr63 commented Sep 18, 2024

smnandre commented Sep 18, 2024 •

edited

Loading

smnandre commented Sep 18, 2024 •

edited

Loading

rrr63 commented Sep 19, 2024

Kocal commented Sep 19, 2024

Kocal commented Sep 19, 2024

rrr63 commented Sep 19, 2024

smnandre commented Sep 21, 2024

rrr63 commented Sep 21, 2024

Kocal left a comment

Kocal Sep 22, 2024

rrr63 Sep 22, 2024

Kocal Sep 22, 2024

Kocal Sep 22, 2024

Kocal commented Sep 24, 2024 •

edited

Loading

Kocal commented Sep 24, 2024 •

edited

Loading

Kocal commented Sep 24, 2024

rrr63 commented Sep 24, 2024

	this.createInfoWindowPolygon({ definition: definition.infoWindow, polygon });
	this.createInfoWindow({ definition: definition.infoWindow, polygon });

[Map] Adding polygons to google and leaflet + info window #2162

[Map] Adding polygons to google and leaflet + info window #2162

Conversation

rrr63 commented Sep 14, 2024

smnandre commented Sep 14, 2024

Kocal left a comment

Choose a reason for hiding this comment

Kocal Sep 15, 2024

Choose a reason for hiding this comment

rrr63 commented Sep 15, 2024

rrr63 commented Sep 15, 2024

rrr63 commented Sep 16, 2024

Kocal left a comment • edited Loading

Choose a reason for hiding this comment

Kocal Sep 16, 2024

Choose a reason for hiding this comment

Kocal commented Sep 18, 2024

rrr63 commented Sep 18, 2024

smnandre commented Sep 18, 2024 • edited Loading

smnandre commented Sep 18, 2024 • edited Loading

rrr63 commented Sep 19, 2024

Kocal commented Sep 19, 2024

Kocal commented Sep 19, 2024

rrr63 commented Sep 19, 2024

smnandre commented Sep 21, 2024

rrr63 commented Sep 21, 2024

Kocal left a comment

Choose a reason for hiding this comment

Kocal Sep 22, 2024

Choose a reason for hiding this comment

rrr63 Sep 22, 2024

Choose a reason for hiding this comment

Kocal Sep 22, 2024

Choose a reason for hiding this comment

Kocal Sep 22, 2024

Choose a reason for hiding this comment

Kocal commented Sep 24, 2024 • edited Loading

Kocal commented Sep 24, 2024 • edited Loading

Kocal commented Sep 24, 2024

rrr63 commented Sep 24, 2024

Kocal left a comment •

edited

Loading

smnandre commented Sep 18, 2024 •

edited

Loading

smnandre commented Sep 18, 2024 •

edited

Loading

Kocal commented Sep 24, 2024 •

edited

Loading

Kocal commented Sep 24, 2024 •

edited

Loading