Drawing a circle with the radius in miles/meters with Mapbox GL JS
<p>I'm in the process of converting a map from using <strong>mapbox.js</strong> to <strong>mapbox-gl.js</strong>, and am having trouble drawing a circle that uses miles or meters for its radius instead of pixels.  This particular circle is used to show the area for distance in any direction from a central point.</p>

<p>Previously I was able to use the following, which was then added to a layer group:</p>

<pre><code>// 500 miles = 804672 meters
L.circle(L.latLng(41.0804, -85.1392), 804672, {
    stroke: false,
    fill: true,
    fillOpacity: 0.6,
    fillColor: "#5b94c6",
    className: "circle_500"
});
</code></pre>

<p>The only <a href="https://www.mapbox.com/mapbox-gl-style-spec/#layers-circle" rel="noreferrer">documentation</a> I've found to do this in Mapbox GL is the following:</p>

<pre><code>map.addSource("source_circle_500", {
    "type": "geojson",
    "data": {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-85.1392, 41.0804]
            }
        }]
    }
});

map.addLayer({
    "id": "circle500",
    "type": "circle",
    "source": "source_circle_500",
    "layout": {
        "visibility": "none"
    },
    "paint": {
        "circle-radius": 804672,
        "circle-color": "#5b94c6",
        "circle-opacity": 0.6
    }
});
</code></pre>

<p>But this renders the circle in pixels, which does not scale with zoom.  Is there currently a way with Mapbox GL to render a layer with a circle (or multiple) that's based on distance and scales with zoom?</p>

<p>I am currently using v0.19.0 of Mapbox GL.</p>