Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Color only the edge of a circle mapbox gl js

Tags:

mapbox-gl-js

I want to show the outline of a circle on an interactive map (no fill) however, the paint options in mapbox-gl-js seem limited to fill only. https://www.mapbox.com/mapbox-gl-style-spec/#layers-circle

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"]
}];

Am i missing something or is this just not possible?

like image 784
benj Avatar asked Feb 08 '23 05:02

benj


1 Answers

This is now possible, with circle-opacity.

E.g.:

"paint": {
    "circle-opacity": 0,
    "circle-stroke-width": 1,
    "circle-stroke-color": #000
}
like image 160
ericsoco Avatar answered May 16 '23 01:05

ericsoco