I am trying to add a radius circle using Layer to MapboxGL using React, however, I can't figure out how to have it fit to the bounds of the canvas. In other words, I need to add a static layer inside of the canvas that keeps the same dimensions when the zoom level changes.
let Obj = {
"circle-radius": {
stops: [
[0, 0],
[10, 220]
],
base: 2
},
"circle-color": "rgba(29,161,242,.2)",
"circle-stroke-color": "rgba(29,161,242,.2)",
"circle-opacity": 1,
"circle-stroke-opacity": 1,
"circle-stroke-width": 1
};
<Layer
type="circle"
id="circle"
paint={Obj}
coordinates={[location.lng, location.lat]}
>
<Feature coordinates={[location.lng, location.lat]} />
</Layer>;
Imagine this is our radius circle, if I were to zoom out 100km, the circle will still be this size even though the map distance has changed and the map area is larger:
