mapbox Mapbox Studio で作ったデータをJavascriptで受け取る

Javascript

Mapbox]]ではいろんなことができますが、[[Mapbox Studioで地図がカスタムできたり、地図上にマーカーやポリゴン、線が勝手に引けるのもMapboxの魅力の一つです。

ここでは、MapboxStudio マーカーを置くで作ったような、マーカーやポリゴンの情報を、ではMapbox GLを実装したWeb地図で、どのように取得するかを書いておきます。
（落とし穴もあったので…）

まず、ポリゴンやマーカーの位置情報は、基本的にDatasetsというものの中に入っています。

このわかりにくい、Mapbox API DocumentationのDatasetsを見てみましょう…。
https://www.mapbox.com/api-documentation/#datasets

まずですねー、

 "https://api.mapbox.com/datasets/v1/{username}?access_token=your-access-token"

でDatasetsのリストが取得できると書いてありますが、やってみると、Not foundになります…。

めげずに！！
datasetを指定して、取得する、というのをやってみます。

“https://api.mapbox.com/datasets/v1/{username}/{dataset_id}?access_token=your-access-token”

ここで、2つ目の罠が！
このdataset_idというのは、Mapbox Studioの中の、Datasetの画面の次の部分に書かれています。
最初、名前とかかと思ってたｗ

&ref(dataset_id.png);

すると、レスポンスがJSONで帰ってきます。
全体的なサンプルコードを掲載しておきます。

 function getDatasets(){
 	
 	var dataset_id = "hogehoge";
 	
        var url ="https://api.mapbox.com/datasets/v1/hogehogecompany/"　+　dataset_id + "?access_token=" + mapboxgl.accessToken;
 
        var xmlhttp = new XMLHttpRequest();	
 	
        xmlhttp.onreadystatechange = function() {
 		    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 		    	
 		        var result = JSON.parse(xmlhttp.responseText);
 		    
 		    }else{
 		    	
 		    	$("#result").text("指定のデータは存在しません");
 		    }
 	
 		}
 	
 	xmlhttp.open("GET", url, true);
 	xmlhttp.send();
      	
 }