YOLP to Mapbox
全てのドキュメントYOLP to MapboxYOLPJavaScriptマップAPIからMapbox GL JSへの移行ガイド

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/v2.5.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.5.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では経度と緯度の順で表記されていますので、ご了承ください。
/* 地図を表示 */
const map = new mapboxgl.Map({
  /* 地図を表示させる要素のid */
  container: 'map',
  /* 地図styleID。YOLPではLayerSetIdに相当する。*/
  style: 'mapbox://styles/mapbox/streets-v11',
  /* 地図の初期緯度経度[lng,lat] */
  center: [-74.5, 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/v2.5.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.5.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';
    /* 地図を表示 */
    const 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ドキュメンテーション: 番シンプルな地図の表示

const ymap = new Y.Map('map');
ymap.drawMap(new Y.LatLng(35.66572, 139.731), 17, Y.LayerSetId.NORMAL);

Mapbox GL JS

Mapboxドキュメンテーション: マップナビゲーションコントロールの表示

/* 地図を表示 */
const 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ドキュメンテーション: 文字を表示

const marker = new Y.Marker(
  new Y.LatLng(35.64997652994234, 139.72116702175174)
);
ymap.addFeature(marker);

Mapbox GL JS

Mapboxドキュメンテーション: Mapbox GL JSにカスタムマーカーを追加

const marker = new mapboxgl.Marker()
  .setLngLat([139.72116702175174, 35.64997652994234])
  .addTo(map);

markerクリックで吹き出しの表示

移行日数: 1

‍YOLP JS API

YOLPドキュメンテーション: bindInfoWindowFeature

const 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にカスタムマーカーを追加

const popup = new mapboxgl.Popup().setHTML('<h3>clicked</h3>');

const marker = new mapboxgl.Marker()
  .setLngLat([139.72116702175174, 35.64997652994234])
  .setPopup(popup)
  .addTo(map);

ズームボタンの表示

移行日数: 0.25

‍YOLP JS API

YOLPドキュメンテーション: 操作オプションの設定

const 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ドキュメンテーション: 操作オプションの設定

const control = new Y.ScaleControl();
ymap.addControl(control);

Mapbox GL JS

Mapboxドキュメンテーション: ScaleControl

const scale = new mapboxgl.ScaleControl({
  maxWidth: 80,
  unit: 'metric'
});
map.addControl(scale);

指定の緯度経度に地図を移動

‍移行日数: 0.25

‍YOLP JS API

YOLPドキュメンテーション: panToMap

const ll = new Y.LatLng(35.68138372459195, 139.76608415039746);
map.panTo(ll, true);

Mapbox GL JS

Mapboxドキュメンテーション: map.panTo

const ll = new mapboxgl.LngLat(139.76608415039746, 35.68138372459195);
map.panTo(ll);

複数のマーカーをGeoJSONを利用して表示

Mapboxドキュメンテーション: Mapbox GL JSにカスタムマーカーを追加

const 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'
      }
    }
  ]
};

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-96, 37.8],
  zoom: 3
});

// GeoJSON内のfeatureの緯度経度にマーカーを描画
for (const feature of geojson.features) {
  // マーカーの作成
  // elにクリックイベントを独自でリスナーを付けるのも可能(例：el.addEventListener('click',callback))
  // マーカーの描画
  const marker = new mapboxgl.Marker()
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);
}