Scale radius of circle based on range of string - Mapbox

Question

I'm trying to dynamically set the radius of circles plotted with a dataset that has three columns: Latitude / Longitude / # of Sessions. Data imports fine and all the locations plot correctly with the # of sessions as the label.

Here's the scenario:

The radius should be based on the number of sessions, so a lat/lon pair with 5 sessions is 1px, a lat/long pair with 5,000 sessions is 10px, etc.

Is there a way to have this dynamically set in a dataset? I can create layer "bands" myself by adding multiple instances of the dataset and filtering to 1-10, 11-100, etc., but it'd be great to set a "min" radius and a "max" radius and have it auto-scale based on available data.

Is there a way to do this in Mapbox?

Answer 1

Assuming I understand this right - basically you have some type of data based off of the session # you'd like to draw a bigger or smaller circle on that lat, long pairing.

What you can do is originally import the data followed by taking the # of sessions and physically creating a set to render on the map (some type of array or something). You can use mapbox markers to render these icons or circle and physically assign them a size.

Prior to this you will have to pre-determine a function to take the # of sessions and map them to a physical radius value - say 1000 sessions = a radius of 10 and 50,000 sessions = a radius of 500.

For example in an ios app I created this is my code, using - https://github.com/mapbox/react-native-mapbox-gl

markersArray = markersArray.concat({
                      coordinates:[bList[i].latitude, bList[i].longitude],
                      'type': 'point',
                      title: bList[i].bname,
                      subtitle: bList[i].data,
                      id: bList[i].o_ID.toString(),
                      startTime: bList[i].startTime,
                      endTime: bList[i].endTime,
                      annotationImage: {
                        url: (bList[i].type === 'drink') ? (drinkUrl) : (foodUrl),
                        height: 30,
                        width: 30
                      },
                      rightCalloutAccessory: {
                        url: 'image!info-icon',
                        height: 20,
                        width: 20
                      }
                    });