Mapbox-gl-js: Unable to set dynamic radius for layer of type 'circle' and add text?

[AbrahamArun]

    // Source geojson
    map.addSource("symbols", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {
                      "radius": 20,
                      "title": "title1"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            -91.395263671875,
                            -0.9145729757782163

                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": {
                      "radius": 20,
                      "title": "title2"
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            -90.32958984375,
                            -0.6344474832838974
                        ]
                    }
                }
            ]
        }
    });
    // Style
    map.addLayer({

      "id": "style-1",
      "type": "circle",
      "source": "symbols",

      "paint": {
        "circle-radius": "{radius}",
        "circle-color": "#1DC5B3",
        "circle-opacity": 0.4,
        "text-size": 12
      },

      "layout": {
        "text-field": "{title}",
        "text-offset": [0, 0.6],
        "text-anchor": "top"
      },

      "interactive" : true,
      "minzoom" : 0,
      "maxzoom": 22
    }); 

In the above example, the layer does not take the radius from the geojson properties, and adding text does not seem to work either along in this layer type.

I am trying to draw circles of different radii and text overlaying it. If this is not the right approach, can someone suggest me an alternative? It was another reason why I raised this issue.

[mourner]

We're still working on data-driven styling, a feature that would enable using any properties in any layout/paint fields, but it's a challenge to implement and requires a lot of changes to the underlying architecture. Meanwhile check out this workaround http://anand.codes/2015/09/21/interative-data-driven-styles-with-mapbox-gl-js/

Also, for overlaying text, you should use a different layer with type=symbol.

[juanpujol]

Is there any update on this? Is it possible to use dynamic radius in meters? Like in L.circle I can't find any way to implement this with mapbox-gl.

Thanks.

[cBrou]

It still seems to be an issue. Why is it closed?

[jfirebaugh]

Here are some references for this feature:

• https://www.mapbox.com/help/gl-dds-ref/
• https://www.mapbox.com/blog/data-driven-styling/
• https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/

If you believe there is a bug in the implementation, please open a new issue, using the issue template to provide details -- in particular, what you tried, what you expected to happen, and what happened instead.

[cBrou]

Thanks for the reply - the ref don't seem to be using geojson properties. Isn't the format for that supposed to be in brackets (i.e. '{title}') ?

I still can't seem to have the circle type read geojson properties from my source - I'll keep looking for a work around. Thanks.

[mollymerp]

@cBrou the syntax for data-driven styles is not "{propertyName}". That syntax is only used for text-field and icon-image in symbol layers. The examples liked above are indeed written to work with either geojson properties or vector tile properties objects.

 'circle-radius': {
                property: 'propertyName',
                type: 'categorical', // (or 'identity', 'exponential', etc.) https://www.mapbox.com/mapbox-gl-style-spec/#function-type
                stops: [ // if you use the 'identity' function type, you do do not need 'stops'
                    ['propertyValue1', 0],
                    ['propertyValue2', 50],
                   // ...
                ]
            }

[hijiangtao]

Hi, I may wonder is there any progress on the data-driving styling of geojson type data (other than vector)? Thanks a lot. There is not enough information in mapboxgl API docs for me to decide if I can use it. :-)

[anandthakker]

@hijiangtao There's information about data-driven styling, and several examples, on this page: https://www.mapbox.com/help/how-map-design-works/#data-driven-styles - if that doesn't answer your question, please feel free to open a new issue in this repository, using the issue template to provide details.