[UX Map] Allow to customize the marker icon

[javiereguiluz]

These days I'm moving a custom-made Leaflet map to UX Maps. So far everything is great. But I'm missing the option to customize the marker icon.

I know it's possible with a custom Stimulus controller. But, don't you think that this is a common enough feature? If you agree, we could add a new Icon class to configure the Marker icon.

This is the real JS code that I was using in the map, to show which attributes could be useful:

const icon = new L.Icon({
    iconUrl: 'https://cdn.jsdelivr.net/npm/leaflet-color-markers@0.1.0/img/marker-icon-2x-blue.png',
    shadowUrl: 'https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41],
});

L.marker(position, { icon: icon }).bindPopup(description).addTo(map);

[BrentRobert]

I came here to make this issue 😀.
The examples give the option for a 'icon_mask_url'; but it seems to work only for Google Maps.

[smnandre]

Why not offering a plug-and-play set of markers / color palette ?

My feeling is this is typically the kind of small things that offer great DX in the end (simple solutions for standard needs)

(not exclusive with the image url idea of course)

[smnandre]

So i played a bit with both providers... so there is plenty of things we can do (for both)

1 - Image URL

new Icon(url: 'https://example.com/my-image.png',  /* other options ... */ )

2 - Asset URL

But users will probably need to use "local" assets, so i suggest we accept the logical path of the file (exactly like the {{ asset() }} in Twig

Something like

new Icon(asset: '/images/icons/my-image.png',  /*  ... */ );

//  will be transformed in a full (versionned) url: 
// --> /assets/images/icons/my-image-sdf87.png

Or we could state that if you pass a relative / root relative url, it is an asset ?

new Icon(url: '/images/icons/my-image.png'  /*  = this url is an asset URL ? */ )

3 - SVG/HTML content

Then, both accept SVG and/or HTML in some form. This would allow very custom code directly in the template next to the map.. but i think i will probably have less value via PHP construction.

<div id="super-red-marker">
     {#  image, svg, custom classes... #} 
</div>

{{ ux_map({
     markers: [
        { lat: ..., lng: ..., icon: { selector: '#super-red-marker' } }
    ]
)}

4 - UX Icon integration 🥳

The coolest thing to me would be to integrate the UX Icon component, offering the same amazing DX

new Icon(name: 'bi:marker-solid'  /*  ...  */ )

{{ ux_map({
     markers: [
        { lat: ..., lng: ..., icon: { name: 'bi-marker-solid', color: '#4b57e' } }
    ]
)}

---

I'd love to get your feedback on all this :)

(cc @Kocal )

[smnandre]

@BrentRobert @javiereguiluz any direction / suggestion / preference regarding DX ?

[javiereguiluz]

@smnandre I like a lot your proposal in #2109 (comment)

I don't really have additional comments or suggestions. I like it all. Thanks!

[Kocal]

@smnandre I will take a look today of what you proposed!

[BrentRobert]

@BrentRobert @javiereguiluz any direction / suggestion / preference regarding DX ?

All 4 options look good to me.
Additionally I think it's a good idea to have a 'global' icon override and a marker specific one.

[Kocal]

I like your proposals @smnandre, they are simple to use and I believe they can resolve 80% of people use cases.

Do we only want to support url and name options? What about specific provider options like shadowUrl, iconSize (...) for Leaflet? Or those kind of specific things will be done in ux:map:marker:before-create event?

When I used Google Maps on my website (before UX Map), I used glyph to customise the marker content, it's a specific feature that doesn't exist with Leaflet AFAIK:

with the following code:

const pinElement = new PinElement({,
    glyph: new URL(place.iconMaskUri), // https://example.com/glyph-cinema.svg
    glyphColor: "white",
});

const marker = new AdvancedMarkerElement({
    map,
    content: pinElement.element, // magic happens here
    position: new google.maps.LatLng(...),
});

We agree we don't want to natively support this, right? :)

[smnandre]

I think we should (at least what will be used in all providers: size, offset, etc).. let's work on the simpliest DX possible for basic case that yet allow advanced users.

And think both map created fully in PHP or in template directly :)

So how do you see it @Kocal ? A simple step 1 to start, and then other ones ?

[Kocal]

I think we can go for 1 and 2, then 3, and finally 4, wdyt?

[smnandre]

Yes, and i think we should move on first (or in the same time) on the Twig function... because assets will often be used directly from Twig.

When you have time (nothing urgent here 😅 ) ... can have a look at my answers on the other PR ?