Marker / map.addSource and marker colors

[petricf]

If i define

const marker = maplibregl.Marker ({color:"#ff0000"}).setLngLat (["lng","lat"]).addTo (map);

i get a red marker instead of the standard blue one which is automatically created.

But how to do it when using map.addSource:

map.addSource ('places', {
'data': {
'features': [
'type': 'Feature',
'geometry': {...},
'properties': {...}
....
map.addLayer ({'id':'places', 'source':places', ...)

I simply want to give different colors to the markers displayed. Do i really need to use custom image files ?

I tried to find hints on the docs but no success.

Any hints ?

[HarelM]

You'd need sdf sprite images to allow changing colors to map features.
Some tools support creating sprites from svg files. These can be defined as sdf, and later have the style color them.
I hope this answers your question.

[HarelM]

No, these files needs to be part of your style and sprite. maplibre knows how to read them, but you need to generate them, just like you would fit regular icons.
See here:
https://maplibre.org/maplibre-style-spec/sprite/

[petricf]

Thanks for the hint.

I am using a local installation of VersaTiles (https://versatiles.org). The provided frontend file contains (compressed with brotli)

.../assets/sprites/sprites.json.br
.../assets/sprites/sprites.png.br

The json file (decompressed) contains:

{
"icon-airfield": {"width":32,"height":32,"x":0,"y":0,"pixelRatio":1,"sdf":true},
"icon-airport": {"width":32,"height":32,"x":32,"y":0,"pixelRatio":1,"sdf":true},
"icon-alcohol_shop": {"width":32,"height":32,"x":0,"y":32,"pixelRatio":1,"sdf":true},
"icon-art_gallery": {"width":32,"height":32,"x":32,"y":32,"pixelRatio":1,"sdf":true},
"icon-artwork": {"width":32,"height":32,"x":64,"y":0,"pixelRatio":1,"sdf":true},
...
}

The sprites.png:

Is it this you are telling about ?

But where does the maplibregl:marker class get the sprite to mark a position ?
The marker sprite is not in the set above.

[HarelM]

The marker is a different entity, it gets the image from the css file as it is an html marker and not part of the canvas.

[petricf]

And the html-marker from the css file can not be used here, right ?

[HarelM]

I don't understand the question, but you'll need to figure this out on your own...