Draw circle after map is loading in mapbox

Question

I want to draw circle after map is loading. For example, when user click a button, it creates a circle on the map.

var center = turf.point(droneLocation);
var radius = 0.5;
var options = {
   steps: 80,
   units: 'kilometers'
 };

 var circle = turf.circle(center, radius, options);

 map.addLayer({
   "id": "circle-fill",
   "type": "fill",
   "source": {
     "type": "geojson",
     "data": circle
  },
  "paint": {
      "fill-color": "green",
      "fill-opacity": 0.3
    }
  });

This is the code but when I put these codes outside of the map.onload() function, it gives error

Uncaught Error: Style is not done loading at Ze._checkLoaded (style.js:433) at Ze.addLayer (style.js:756) at Map.addLayer (map.js:1912) at map.js:211

What I want is the create circle after map is loading.