search

maplibre / maplibre-gl-js

MapLibre GL JS - Interactive vector tile maps in the browser
https://maplibre.org/maplibre-gl-js/docs/
Other
6.3k stars 687 forks source link

Symbols/cirlces box-shadows? #1326

Open Strongleong opened 2 years ago

Strongleong commented 2 years ago

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:

drwestco commented 2 years ago

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.

Strongleong commented 2 years ago

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

drwestco commented 2 years ago

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

Strongleong commented 2 years ago

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