YOLP to Mapbox

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でスタイルのカスタマイズが可能です。

  1. 地図を表示させるコンテナをdivタグとしてbody内に配置する。
<div id='map'></div>
  1. 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' />
  1. Mapboxアカウントページで取得したアクセストークンをmapboxgl.accessTokenに設定する。YOLPで使われているアプリケーションIDはMapboxのアクセストークンとしては使えませんのでご了承ください。
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
  1. 1.で配置した地図のコンテナを全画面で表示するため、スタイルを設定する。
<style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
  1. 必要なパラメータ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);
});