How to add box shadow to a circle type in mapbox gl?

user_8336127 0
Viewed 909

I have the following styles:

   var styles = [{
    "id": 'points',
    "interactive": true,
    "type": "circle",
    "source": "geojson",
    "paint": {
        "circle-radius": 5,
        "circle-color": "#000
    },
    "filter": ["in", "$type", "Point"]
}, {
    "type": "line",
    "source": "geojson",
    "layout": {
      "line-cap": "round",
      "line-join": "round"
    },
    "paint": {
      "line-color": "#000",
      "line-width": 2.5
    },
    "filter": ["in", "$type", "LineString"]
}];

I need to add box shadow value of "0 9px 2px 0 rgba(0,0,0,0.20)" to the circles to give them a shadow effect.Is there any way I can do it?

mapbox-gl-js mapbox reactjs javascript
1 Answers

you can add another layer and make shadow with bigger radius and set blur.

some thing like this:

{
    "id": "points_shadow",
    "interactive": true,
    "type": "circle",
    "source": "geojson",
    "paint": {
        "circle-radius": 10,
        "circle-color": "#000",
        "circle-blur": 0.4
    },
    "filter": ["in", "$type", "Point"]
}

or you should use 3D coordinates and style them with fill-extrusion

hope it works for you.

user_124259010
Related