javascriptを用いた動的webサイトで自前のapiを叩きたい

APIを自作して，地図の緯度経度をデータベースから読み書きできるようにしました．MapBoxというサービスを用いて，そのデータをGeoJsonで取ってきてポイント表示したいです．
以下のurlのサンプルを活用しています．
MapBoxのPoint描画サンプルページ
このサンプルのjavascript部分のマップ描画手前にapiからgetしてgeojsonを格納する処理を書き，動かしてみました．
しかし，思うようにいきません．どうやらAPIをマップの処理の手前で叩くと何故かMapの処理がされなくなってしまうようです．
webページの作成等は今まで一切触れた事がなく，通常のアプリケーションの感覚で作ってみたら動かなくて困惑しています．
どのように調べたら解決策が出てくるかもまるで検討がつきません．これ以降さらにapiを活用してmap上のポイントを追加したり，削除したりするより動的な処理をさせようとしているので初歩でつまづいて困っています．こういった場合の対処法，技術，調べ方，方針等webアプリケーション制作に詳しい方にアドバイスいただけると幸いです．

[追記]
一応文中にサンプルのjavascript内のマップロード前にapi叩いただけだと書きましたが，どうやらわかりづらかったようなのでコードを貼っておきます．見ての通りただ本当にapiの処理を入れただけです．

WebMapPoint.html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>GeoJSONポイントの描画</title>
6<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
7<link href="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css" rel="stylesheet">
8<script src="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js"></script>
9<style>
10body { margin: 0; padding: 0; }
11#map { position: absolute; top: 0; bottom: 0; width: 100%; }
12</style>
13</head>
14<body>
15<div id="map"></div>
16<script src="MapLoad.js" charset="UTF-8">
17</script>
18
19</body>
20</html>

MapLoad.js
1//ここのコメントアウトを外してapiへのアクセスを試みると動かなくなる．
2/*
3let apiURL = "http://localhost:7071/api/mapPoint";//apiのURL
4
5//apiリクエストの作成
6var request = new XMLHttpRequest();
7request.open("GET", apiURL, true);
8request.responseType = "json";
9
10//apiからPOINT情報をGETで全て取得する
11request.onload = function () {
12  var data = this.response;
13}
14request.send();
15
16var jsondata = [
17  {
18    "type": "geojson",
19    "data": data
20  }
21]
22*/
23
24// TO MAKE THE MAP APPEAR YOU MUST
25// ADD YOUR ACCESS TOKEN FROM
26// https://account.mapbox.com
27mapboxgl.accessToken = "<トークン>";
28const map = new mapboxgl.Map({
29  container: "map",
30  style: "mapbox://styles/mapbox/light-v10",
31  center: [-96, 37.8],
32  zoom: 2
33});
34
35//let jsonObject=JSON.stringify(jsondata);
36
37map.on("load", () => {
38  // Add an image to use as a custom marker
39  map.loadImage(
40    "https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png",
41    (error, image) => {
42      if (error) throw error;
43      map.addImage("custom-marker", image);
44      // Add a GeoJSON source with 2 points
45      map.addSource("points",
46      {
47        "type": "geojson",
48        "data": { 
49          "type": "FeatureCollection", 
50          "features": [
51            { 
52              "type": "Feature",
53              "geometry": { 
54                "type": "Point", 
55                "coordinates": [36.28649301434915, -112.09412822905652] 
56              },
57              "properties": { 
58                "id": 1, 
59                "name": "Grand Canyon National Park", 
60                "address": "Arizona, United States", 
61                "phone": "+19286387888", 
62                "url": "http://www.nps.gov/grca/" 
63              }
64            }
65          ]
66        }
67      });
68
69      // Add a symbol layer
70      map.addLayer({
71        "id": "points",
72        "type": "symbol",
73        "source": "points",
74        "layout": {
75          "icon-image": "custom-marker",
76          // get the title name from the source"s "title" property
77          "text-field": ["get", "name"],
78          "text-font": [
79            "Open Sans Semibold",
80            "Arial Unicode MS Bold"
81          ],
82          "text-offset": [0, 1.25],
83          "text-anchor": "top"
84        }
85      });
86    }
87  );
88});

hoshi-takanori

2021/08/15 02:00

お書きになったコードを貼ってくれないとアドバイスのしようがありません。

退会済みユーザー

2021/08/15 02:25

コードを追加しました．本当にただapiの処理を入れただけです．他にやりようがあるのかも知らないので．ですが，どうやらapiの処理を入れるとこれ以降の処理が一切無視されるようです．mapBox特有なのかは分かりません．私自身初めて触りました．

hoshi-takanori

2021/08/15 02:30

request.onload の中にある data を jsondata の定義に使いたいということでしょうか。 request.onload は非同期で呼ばれるので、jsondata を初期化する段階ではまだ結果が得られません。

退会済みユーザー

2021/08/15 03:29

その通りです．しかし考えてみれがdataはonload内で定義されているのでこれじゃどの道動きませんよね．fetchというものがあると分かり試してみました．しかしmapの定義の部分を丸々関数に入れてその関数にfetchのthen()で値を渡してみる形式にしたのですがやはりmapが表示されることはありませんでした．．．お手上げです．

hoshi-takanori

2021/08/15 03:46

API を呼び出すという処理自体が本質的に非同期処理なので、XMLHttpRequest でも fetch でも同じことです。 API の結果が返るまでどうするか (空欄にするなり、ダミーの内容を表示するなり) と、結果が返って来た時にどうやって表示を更新するかを考える必要があります。