maplibre-gl-js icon indicating copy to clipboard operation
maplibre-gl-js copied to clipboard

Published 20 hours ago • verified publisher icon maplibre

Symbols/cirlces box-shadows?

Open Strongleong opened this issue 2 years ago • 4 comments

Hello! I am wandering will be there ability to make shadows icons/text/circles/etc? I can make circle shadow by draw 2 circles where one of them with blur and opacity, but it is kinda suck. And I can't make it work with symbol icon (sdf). I am try this with halo-blur and halo-opacity, but it just do not work out.

P.S. Sorry for bad English :sweat_smile:

Strongleong avatar Jul 01 '22 02:07 Strongleong

The icon-halo-* properties should be applicable here, but looks like they don't work as expected. With a circular SDF icon, the halo is either always a single pixel border, or fills the entire bounds of the icon.

icon-halo-width: 5 image

icon-halo-width: 6 image

When we want to add shadows to icons, we bake them directly into the images. This also lets us have offset drop shadows, where the halo remains centered around the icon.

drwestco avatar Jul 14 '22 17:07 drwestco

Yes, I meant exactly that problem with sdf. And I can,t bake shadow to image because sdf restricted to only one color at a time

Strongleong avatar Jul 14 '22 21:07 Strongleong

Yeah, it only works for full color images. Having a set of icon-shadow properties on the style layer would be a nice feature.

drwestco avatar Jul 14 '22 23:07 drwestco

And about icon-halo/circle-stroke. It is not good solution, because I am currently want shadow and halo/stroke.

Strongleong avatar Jul 14 '22 23:07 Strongleong