mapboxに外部geojsonを読み込む方法がわからない

このページを参考にGeoJSONポイントの描画
geojsonファイルを外部から読み込む方法を知りたかったのですが、地図は表示されるのですが、geojsonは読み込まれていないように見えます。

ファイル構成は
index.htmlとtest.geojson
を同じ階層に置いています。

沢山のポイントを読み込みたく、

他にcsvから読み込む方法なども見たのですが
geojsonとcsvを使う方法とどちらの方がいいのかも教えていただけると助かります。

index.html

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<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
8<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
9
10<style>
11	body { margin: 0; padding: 0; }
12	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
13</style>
14</head>
15<body>
16<div id="map"></div>
17<script>
18	mapboxgl.accessToken = 'pk.eyJ1IjoiYXVhdWEiLCJhIjoiY2tkaXg4ank0MDlhdzJybGNyaDNwbXcxYyJ9.dyux8RNwhLOp8FNJutFZPg';
19    var map = new mapboxgl.Map({
20        container: 'map',
21        style: 'mapbox://styles/mapbox/light-v10',
22        center: [-96, 37.8],
23        zoom: 3
24    });
25		map.on('load', function() {
26			map.addSource('geojson_test02',{
27				type:'geojson',
28				data:'test.geojson',
29			});
30			map.addLayer({
31				'id': 'geojson_test02',
32				'type': 'symbol',
33				'source': 'geojson_test02',
34				'layout': {
35							// get the icon name from the source's "icon" property
36							// concatenate the name to get an icon from the style's sprite sheet
37							'icon-image': ['concat', ['get', 'icon'], '-15'],
38							// get the title name from the source's "title" property
39							'text-field': ['get', 'title'],
40							'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
41							'text-offset': [0, 0.6],
42							'text-anchor': 'top'
43						}
44			});
45		});
46</script>
47</body>
48</html>

外部geojson(test.geojson)

test.geojson
1{
2  'type': 'FeatureCollection',
3  'features': [
4    {
5    // feature for Mapbox DC
6    'type': 'Feature',
7    'geometry': {
8      'type': 'Point',
9      'coordinates': [
10      -77.03238901390978,
11      38.913188059745586
12      ]
13    },
14    'properties': {
15      'title': 'Mapbox DC',
16      'icon': 'monument'
17    }
18    },
19    {
20    // feature for Mapbox SF
21    'type': 'Feature',
22    'geometry': {
23      'type': 'Point',
24      'coordinates': [-122.414, 37.776]
25    },
26    'properties': {
27      'title': 'Mapbox SF',
28      'icon': 'harbor'
29    }
30    }
31  ]
32}

行動規範の内容に同意します

回答1件

test.geojson　ファイルで、エラーが発生しています。

先頭の例です。

json
1{
2  "type": "FeatureCollection",
3  "features": [
4    {

投稿2020/10/20 02:48

herobo

総合スコア153

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

mapboxに外部geojsonを読み込む方法がわからない

関連した質問