Help getting mapbox display radius around a point

App Building
1

Hi,
I'm trying to display 1 location point (which is meant to be an IP address latitude and longitude).
Additionally to this point I have two additional data points, ip_to_address_distance and ip_to_phone_distance, they are integers that inform the distance in miles from de IP Address.

I would like two radius to be displayed on the map, one for each dataset.

I have the following GeoJSON code but It is not working, nothing gets displayed on the map.

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-98.6403, 20.0156]
},
"properties": {
"name": "IP",
"emoji": ":globe_with_meridians:" // Emoji for IP
}
}
],
"circleLayers": [
{
"id": "ipToAddressDistance",
"type": "circle",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-98.6403, 20.0156]
},
"properties": {
"distance": 10 // Distance in miles for ip_to_address_distance
}
}
]
}
},
"paint": {
"circle-radius": {
"base": 1.75,
"stops": [[12, 2], [22, 180]]
},
"circle-color": "rgba(0, 128, 255, 0.4)", // Blue color for ip_to_address_distance
"circle-stroke-width": 0.5,
"circle-stroke-color": "#007FFF"
}
},
{
"id": "ipToPhoneDistance",
"type": "circle",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-98.6403, 20.0156]
},
"properties": {
"distance": 5 // Distance in miles for ip_to_phone_distance
}
}
]
}
},
"paint": {
"circle-radius": {
"base": 1.75,
"stops": [[12, 2], [22, 180]]
},
"circle-color": "rgba(255, 0, 0, 0.4)", // Red color for ip_to_phone_distance
"circle-stroke-width": 0.5,
"circle-stroke-color": "#FF0000"
}
}
]
}

How would you solve this?
Thank you

2

Hi @salvador3101

I used the below resources to get a map with a point marker & 2 circle layers. Our mapbox component can be a bit tricky to use for complex maps, so I often recommend using the custom component so that you can more closely follow the mapbox docs.

-https://community.retool.com/t/map-showing-customer-locations/14300

-Matching concept: https://community.retool.com/t/geojson-in-mapbox-component-for-points/23568/2

My current idea is a bit hacky where I actually have two points that both use the same emoji marker & both have the same location. Then, I have one circle assigned to each point. There could certainly be other ways to solve this, but I hope it helps! :crossed_fingers: