シリーズ化しました (更新:2023/2/9)
① 環境構築 ~ 地図の表示
② 地図のスタイルの変更
③ 円のプロット・ラベルの表示
④ 軌跡の可視化 - 基本編
⑤ 軌跡の可視化 - アニメーション編
⑥ 軌跡の可視化 - Space Time Cube編
概要
TypeScriptとmapbox-gl-jsを使って地図を表示する方法のメモです。
デモ
開発環境
- macOS Monterey 12.0
- vscode v1.72.0
- npm v8.15.0
- typescript v4.1.3
事前準備
mapboxアカウントの作成
アクセストークンの取得
開発
mapbox gl js のインストール
npm i -D mapbox-gl @types/mapbox-gl
コード
main.ts
import mapboxgl from 'mapbox-gl';
mapboxgl.accessToken = /* your token */;
window.addEventListener('load', () => {
const map: mapboxgl.Map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [139.7670516, 39],
zoom: 5
});
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<title>Document</title>
</head>
<body>
<div id="map"></div>
</body>
</html>
style.css
body {
margin: 0;
padding: 0;
}
#map {
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden;
}
.mapboxgl-control-container {
display: none;
}