Mapbox circle

by cs09g

HTML

<script src="//api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css">
<div id="map"></div>

CSS

#map {
  width: 500px;
  height: 500px;
  background: black;
}

JavaScript

var mapOptions = {
			  container: 'map',
			  center: [10, 52],
        zoom: 12,
  style: 'mapbox://styles/mapbox/streets-v9',
			};
			console.log('map options:', mapOptions)
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
			var map = new mapboxgl.Map(mapOptions);

			map.on('load', function() {
			  map.addControl(new mapboxgl.NavigationControl())

			  var GeoJSON = {
			    "type": "FeatureCollection",
			    "features": [{
			      "type": "Feature",
			      "geometry": {
			        "type": "Point",
			        "coordinates": [10, 52]
			      }
			    }]
			  }

			  if (typeof map.getSource('search_radius_circle') == 'undefined') {
			    map.addSource("search_radius_circle", {
			      type: "geojson",
			      data: GeoJSON
			    })
			  } else {
			    map.getSource('search_radius_circle').setData(GeoJSON)
			  }

			  var circle = {
			    "id": "search_radius_circle",
			    "type": "circle",
			    'source': 'search_radius_circle',
			    "paint": {
			      "circle-radius": {
			        stops: [
			          [0, 0],
			          [20, 75000]
			        ],
			        base: 2
			      },
			      'circle-opacity': 0.6,
			      'circle-color': 'rgb(156, 188, 91)',
			    }
			  }
			  console.log(circle)
			  map.addLayer(circle)
			})