8

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?

3 Answers 3

12

This is now possible, with circle-opacity.

E.g.:

"paint": {
    "circle-opacity": 0,
    "circle-stroke-width": 1,
    "circle-stroke-color": #000
}
1
  • this was able to work for me, but could not run at the same time when adding other "paint" details. Have you run into this problem before?
    – jpf5046
    Commented Nov 11, 2020 at 21:12
1

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.