mapboxを使って、簡単なルート検索と避難所マップを作る。

mapboxとは

Mapboxは、地図や位置情報に関連するデータを提供するためのプラットフォームです。
開発者がWebサイトやモバイルアプリケーションにカスタマイズ可能なインタラクティブマップを組み込むためのツールやAPIを提供しています。

今回の記事はWebでの組み込みを想定しています。

料金などは公式サイトをご確認ください。

1. 基本の操作

地図表示

HTML

<div id="map"></div>

JS

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

mapboxgl.accessToken = 'Access tokens', //アクセストークンは管理画面から取得

const map = new mapboxgl.Map({
  container: 'map',
  center: [139.7683016334902, 35.683571330189196],  //初期表示の座標[経度,緯度]
  zoom: 15,  //ズームレベル
  style: 'mapbox://styles/mapbox/streets-v12', //地図のスタイル
  language: 'ja', //言語設定
});

コントローラーをつける

JS

//コントローラー - デフォルトではズームボタンとコンパスが表示される
map.addControl(new mapboxgl.NavigationControl());
//フルスクリーンボタン
map.addControl(new mapboxgl.FullscreenControl());

option	value	説明
showCompass	true false	コンパスの表示設定。 defaultはtrue
showZoom	true false	ズームインボタンとズームアウトボタンの表示設定。 defaultはtrue
visualizePitch	true false	コンパスのX軸を回転させてピッチを視覚化・ defaultはfalse

マーカーをつける

JS

//マーカー
const marker = new mapboxgl.Marker()
  .setLngLat([139.7683016334902, 35.683571330189196]) //マーカーの座標
  .addTo(map);

マーカーのデザインを変更する

1. 色変更

JS

//マーカー
const marker = new mapboxgl.Marker({
  color: '#FF0000', //マーカーの色
})
.setLngLat([139.7683016334902, 35.683571330189196]) //マーカーの座標
.addTo(map);

2. 任意のHTML要素をマーカーに指定

HTML

<div id="map" class="map"></div>
<!-- マーカー -->
<div id="marker" class="marker">😃</div>

JS

const marker = new mapboxgl.Marker({
  element: document.querySelector('#marker'), //マーカーの要素を指定
})
.setLngLat([139.7683016334902, 35.683571330189196]) //マーカーの座標
.addTo(map);

2. ルート検索機能

簡単に実装するならプラグインのmapbox-gl-directionsを使用。
ただしカスタマイズに制限があったり、一部使用できないAPIがあります。

npm install @mapbox/mapbox-gl-directions

HTML

<div id="map" class="map"></div>

JS

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';
import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css';

mapboxgl.accessToken = 'Access tokens', //アクセストークンは管理画面から取得

const map = new mapboxgl.Map({
  container: 'map',
  center: [139.7683016334902, 35.683571330189196],  //初期表示の座標[経度,緯度]
  zoom: 15,  //ズームレベル
  style: 'mapbox://styles/mapbox/streets-v12', //地図のスタイル
  language: 'ja', //言語設定
});

// コントローラー
map.addControl(new mapboxgl.NavigationControl()); //ズームボタン、コンパス
map.addControl(new mapboxgl.FullscreenControl()); //フルスクリーンボタン

// ルート検索機能
map.addControl(
  new MapboxDirections({
    accessToken: mapboxgl.accessToken,
    language: 'ja', //言語設定
  }),
  'top-left' //表示位置
);

言語設定をしても入力欄などは英語のまま。
日本語には対応できないため、デザインにこだわりたい方や機能を充実させたい場合はMapbox Directions APIを使って自作したほうがいいでしょう。

3.避難所マップ

避難所のデータをダウンロード。
使用許諾条件があるので、確認して使用してください。

ダウンロードしたZipファイルを「Resources」>「Tilesets」>「New tileset」からアップロード。

アップロード可能なフォーマットやファイルサイズの制限はこちらに。

「Styles」>「New style」で新しいスタイルを作成。

「Untitled」を編集して、スタイルの名前をつけておきます。

「+」マークから新規レイヤーを追加。
「Source」から先ほどアップしたデータを選択。

レイヤーを選択すると、スタイルの調整ができる。
今回はデフォルトで用意されているアイコンに変更しました。

スタイルが調整できたら、「Publish」ボタンをクリック。
スタイルを公開する。

管理画面から作成したスタイルのURLをコピーし、コードに貼り付ける。

JS

const map = new mapboxgl.Map({
  container: 'map-hazard',
  center: [139.7683016334902, 35.683571330189196], //初期表示の中心座標[経度,緯度]
  zoom: 15, //ズームレベル
  style: 'スタイルのURL', //地図のスタイル
  language: 'ja', //言語設定
});

反映まで少し時間がかかりますがこれで完成です。

最後に

最近mapboxを触り始めましたがなかなかに好印象。
プラグインも今回紹介したルート検索以外にも色々あるので試していきたい。