シリーズ化しました (更新: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;
}

概要

デモ

開発環境

事前準備

mapboxアカウントの作成

アクセストークンの取得

開発

mapbox gl js のインストール

コード

main.ts

index.html

style.css

参考