title: Drawing a circle with the radius in miles/meters with Mapbox GL JS
body: <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>