javascript - マップがマップボックスにロードされた後に円を描く

Question

マップの読み込み後に円を描きたい。たとえば、ユーザーがボタンをクリックすると、マップ上に円が作成されます。

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
    }
  });

これはコードですが、これらのコードを map.onload() 関数の外に置くと、エラーが発生します

キャッチされないエラー: スタイルは、Ze.addLayer (style.js:756) の Ze._checkLoaded (style.js:433) で Map.addLayer (map.js:1912) で map.js:211 にロードされていません。

私が欲しいのは、マップの読み込み後に円を作成することです。