CODEWITHSUNDEEP
mapbox-gl-js
benj
benj

Reputation: 133

Color only the edge of a circle 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?

Upvotes: 8

Views: 6023

Answers (3)

jpf5046
jpf5046

Reputation: 797

I'm having trouble running custom color 'match' and having opacity controls running simultaneously.

I can get both working, but not at the same time. See code below.

var coorAddresses = [ [ -75.7040473, 45.418067,"Medium" ], [-75.7040473, 45.418067, "Medium"], [-79.32930440000001, 43.7730495, "Unknown"]]


$.getJSON(coodAddresses, function(data) {
                  for(var itemIndex in data) {
                    // push new feature to the collection
                    featureCollection.push({
                                        "type": "Feature",
                                        "geometry": {
                                                    "type": "Point",
                                                    "coordinates": [data[itemIndex][0], data[itemIndex][1]]
                                                    },
                                        "properties": {
                                                      "size_by": data[itemIndex][2],
                                                      "color_by": data[itemIndex][2]

                                                    },
                                            });
                                           }
                                        });

map.on('load', function () {
                map.addLayer({
                  "id": "points",
                  "type": "circle",
                  "source": {
                  "type": "geojson",
                    "data": {
                      "type": "FeatureCollection",
                      "features": featureCollection
                    }
                  },
                  "paint": {
                    "circle-color": [
                          'match',
                          ['get', 'size_by'],
                          'Easy',
                          '#e4f400',
                          'Medium',
                          '#f48a00',
                          'Unknown',
                          '#6af400',
                          /* other */ '#00e4f4'
                          ],
                    "circle-radius": [
                          'match',
                          ['get', 'size_by'],
                          'Easy',
                          4,
                          'Medium',
                          7,
                          'Unknown',
                          2,
                          /* other */ 1000
                        ],

                      // "circle-opacity": 0, // color does not show if i uncomment these lines
                      // "circle-stroke-width": 1,  // do not get desired 'hollow' circle unless these lines run
                }});

Trying to troubleshoot.

Upvotes: 1

ericsoco
ericsoco

Reputation: 26253

This is now possible, with circle-opacity.

E.g.:

"paint": {
    "circle-opacity": 0,
    "circle-stroke-width": 1,
    "circle-stroke-color": #000
}

Upvotes: 12

benj
benj

Reputation: 133

Not currently possible. Current top workaround appears to be layering two circles of slightly different sizes.

https://github.com/mapbox/mapbox-gl-js/issues/1713 https://github.com/mapbox/mapbox-gl-style-spec/issues/379

Upvotes: 0

Related Questions