Turf hexagon and circle

Turf circle radius is hexagon side length

HTML

<script src="	https://npmcdn.com/@turf/turf/turf.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />

<div id='map'></div>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:10%; bottom:10%; width:80%; left: 10%;}

JavaScript

// Access token from http://jsfiddle.net/01b97w0L/
mapboxgl.accessToken = 'pk.eyJ1IjoiY2NoYW5nc2EiLCJhIjoiY2lqeXU3dGo1MjY1ZXZibHp5cHF2a3Q1ZyJ9.8q-mw77HsgkdqrUHdi-XUg';


/* var center = [-75.343, 39.984]; */
var center1 = [-84.38845644, 33.81469546];
var center2 = [-84.38630049, 33.81366127];
var radius = 0.0994194;
var options = {steps: 6, units: 'kilometers', properties: {foo: 'bar'}};

var hexagon1 = turf.transformRotate(turf.circle(center1, radius, { steps: 6 }), 30);
var circle1 = turf.circle(center1, radius);
var hexagon2 = turf.transformRotate(turf.circle(center2, radius, { steps: 6 }), 30);
var circle2 = turf.circle(center2, radius);

//addToMap
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center:  center1, 
    zoom: 16,
});

map.on('style.load', function() { 
  map.addSource('red-hexagon', {
  	type: 'geojson',
    data: turf.featureCollection([hexagon1])
  });
  map.addLayer({
  	'id': 'red-hexagon',
    'type': 'fill',
    'source': 'red-hexagon',
    'paint': {
    	'fill-color': 'red'
    }
  });
 	map.addSource('blue-hexagon', {
  	type: 'geojson',
    data: turf.featureCollection([hexagon2])
  });
  map.addLayer({
  	'id': 'blue-hexagon',
    'type': 'fill',
    'source': 'blue-hexagon',
    'paint': {
    	'fill-color': 'blue'
    }
  });
  
  map.addSource('black-circle', {
  	type: 'geojson',
    data: turf.featureCollection([circle1])
  });
  map.addLayer({
  	'id': 'black-circle',
    'type': 'fill',
    'source': 'black-circle',
    'paint': {
    	'fill-color': 'black',
      'fill-opacity': 0.5,
    }
  });
  
});