[UX Map] Use color attribute on a Polygon with leaflet bridge

[michelcourtade]

Hi all,

I'm trying to use the color options on a polygon for Leaflet with Ux Map but it does'nt seem to work.
I want to display Polygons on a map with different colors depending on the type of the Polygon (Polygon represent a different zones in my app)
Here is what I'm trying to do (I'm on a foreach loop) :

$mapSite->addPolygon(new Polygon(
                            points: $points,
                            infoWindow: new InfoWindow(
                                content: $feature['properties']['name'],
                            ),
                            extra: [
                                'color' => 'red',
                            ]
                        ));

The result is that the color is not used on the map in my polygon and all polygons have the same original color.
Is there something I'm missing ?

Thanks !

[Kocal]

Hi, the purpose to the extra data (extra property) is to pass some Map/Map elements related data from PHP to a custom Stimulus controller. In your case, you want to pass the color red for a specific Polygon.

You must use extra data aside low-level options as mentioned in the documentation: https://symfony.com/bundles/ux-map/current/index.html#advanced-low-level-options

Combining with extra data, it should looks like this:

        _onPolygonBeforeCreate(event) {
            const { color } = event.detail.definition.extra;

            if (!color) { 
                return;
            }

            // When using Google Maps, to configure a `google.maps.Polygon`
            event.detail.definition.bridgeOptions = {
                strokeColor: color,
                // ...
            };

            // When using Leaflet, to configure a `L.Polygon`
            event.detail.definition.bridgeOptions = {
                color: color,
                // ...
            };
        }