YOLPJavaScriptマップAPIからMapbox GL JSへの移行ガイド
ここではYahoo! Open Local Platform(YOLP)で提供されてるJavaScriptマップAPIをMapbox製のMapbox GL JSへ移行するために簡単なチュートリアルと実装の比較を紹介します。このガイドは、読者がJavaScriptマップAPIおよびHTML, CSS,やJavaScriptなどのフロントエンドWeb開発を理解している事を前提とします。YOLPのJavaScriptマップAPIを使用してない場合はMapboxドキュメンテーションから始める事をお勧めします。
Mapbox GL JSの簡単な実装
ここではMapbox GL JSを使いベーシックスタイルの地図をHTMLで表示するステップをご紹介します。スタイルはMapboxが提供するデザインから選ぶかMapbox Studioでスタイルのカスタマイズが可能です。
- 地図を表示させるコンテナをdivタグとして
body
内に配置する。
<div id='map'></div>
head
内でmapbox-gl.js
とmapbox-gl.css
を読み込む。
<script src='https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
- Mapboxアカウントページで取得したアクセストークンを
mapboxgl.accessToken
に設定する。YOLPで使われているアプリケーションIDはMapboxのアクセストークンとしては使えませんのでご了承ください。
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
- 1.で配置した地図のコンテナを全画面で表示するため、スタイルを設定する。
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
- 必要なパラメータ
container
,style
,center
,zoom
を指定しmapboxgl.Map
インスタンスを生成する。YOLPでの座標の表現は緯度と経度の順になっていますが、Mapboxでは経度と緯度の順で表記されていますので、ご了承ください。
/* 地図を表示 */
var map = new mapboxgl.Map({
/* 地図を表示させる要素のid */
container: 'map',
/* 地図styleID。YOLPではLayerSetIdに相当する。*/
style: 'mapbox://styles/mapbox/streets-v11',
/* 地図の初期緯度経度[lng,lat] */
center: [-74.50, 40],
/* 地図の初期ズームレベル */
zoom: 9
});
上記のステップを終えると完成です。
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
/* アクセストークンの設定 */
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
/* 地図を表示 */
var map = new mapboxgl.Map({
/* 地図を表示させる要素のid */
container: 'map',
/* 地図styleID。YOLPではLayerSetIdに相当する。*/
style: 'mapbox://styles/mapbox/streets-v11',
/* 地図の初期緯度経度[lng,lat] */
center: [-74.50, 40],
/* 地図の初期ズームレベル */
zoom: 9
});
</script>
</body>
</html>
YOLPと実装の比較
ここはYOLPとMapboxをコードレベルの実装で比較します。YOLPで導入済みの機能が下記に記載れていない場合は、Mapbox GL JSの例をご参照ください。
地図の表示
移行日数: 0.5
YOLP JS API
YOLPドキュメンテーション: 番シンプルな地図の表示
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
Mapbox GL JS
Mapboxドキュメンテーション: マップナビゲーションコントロールの表示
/* 地図を表示 */
var map = new mapboxgl.Map({
/* 地図を表示させる要素のid */
container: 'map',
/* 地図styleID。YOLPではLayerSetIdに相当する。*/
style: 'mapbox://styles/mapbox/streets-v11',
/* 地図の初期緯度経度[lng,lat] */
center: [139.72116702175174, 35.64997652994234],
/* 地図の初期ズームレベル */
zoom: 9
});
/* 上述したベーステンプレートを参照 */
マーカーの表示
移行日数: 1
YOLP JS API
YOLPドキュメンテーション: 文字を表示
var marker = new Y.Marker(new Y.LatLng(35.64997652994234,139.72116702175174));
ymap.addFeature(marker);
Mapbox GL JS
Mapboxドキュメンテーション: Mapbox GL JSにカスタムマーカーを追加
var marker = new mapboxgl.Marker()
.setLngLat([139.72116702175174, 35.64997652994234])
.addTo(map);
markerクリックで吹き出しの表示
移行日数: 1
YOLP JS API
YOLPドキュメンテーション: bindInfoWindowFeature
var marker = new Y.Marker(new Y.LatLng(35.64997652994234,139.72116702175174));
marker.bindInfoWindow('<h3>clicked</h3>');
ymap.addFeature(marker);
Mapbox GL JS
Mapboxドキュメンテーション: Mapbox GL JSにカスタムマーカーを追加
var popup = new mapboxgl.Popup()
.setHTML('<h3>clicked</h3>')
var marker = new mapboxgl.Marker()
.setLngLat([139.72116702175174, 35.64997652994234])
.setPopup(popup)
.addTo(map);
ズームボタンの表示
移行日数: 0.25
YOLP JS API
YOLPドキュメンテーション: 操作オプションの設定
var control = new Y.ZoomControl();
ymap.addControl(control);
Mapbox GL JS
Mapboxドキュメンテーション: NavigationControl
Mapbox GL JSの例: マップナビゲーションコントロールの表示
map.addControl(new mapboxgl.NavigationControl());
スケールコントロールの表示
移行日数: 0.25
YOLP JS API
YOLPドキュメンテーション: 操作オプションの設定
var control = new Y.ScaleControl();
ymap.addControl(control);
Mapbox GL JS
Mapboxドキュメンテーション: ScaleControl
var scale = new mapboxgl.ScaleControl({
maxWidth: 80,
unit: 'metric'
});
map.addControl(scale);
指定の緯度経度に地図を移動
移行日数: 0.25
YOLP JS API
YOLPドキュメンテーション: panToMap
var ll = new Y.LatLng(35.68138372459195, 139.76608415039746)
map.panTo(ll, true);
Mapbox GL JS
Mapboxドキュメンテーション: map.panTo
var ll = new mapboxgl.LngLat(139.76608415039746, 35.68138372459195);
map.panTo(ll);
複数のマーカーをGeoJSONを利用して表示
Mapboxドキュメンテーション: Mapbox GL JSにカスタムマーカーを追加
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.032, 38.913]
},
"properties": {
"title": "Mapbox",
"description": "Washington, D.C."
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox",
"description": "San Francisco, California"
}
}]
};
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
// GeoJSON内のfeatureの緯度経度にマーカーを描画
geojson.features.forEach(function(marker) {
// マーカーの作成
// elにクリックイベントを独自でリスナーを付けるのも可能(例:el.addEventListener('click',callback))
// マーカーの描画
var marker = new mapboxgl.Marker()
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});