シリーズ一覧 (更新:2023/2/9)
① 環境構築 ~ 地図の表示
② 地図のスタイルの変更
③ 円のプロット・ラベルの表示
④ 軌跡の可視化 - 基本編
⑤ 軌跡の可視化 - アニメーション編
⑥ 軌跡の可視化 - Space Time Cube編
概要
Mapboxではさまざまな地図のスタイルを提供しています。ここではインタラクティブにスタイルを変更するプログラムを紹介します。
スタイルの適用
マップスタイルは、mapboxgl.Mapクラスのコンストラクタ、およびsetStyleメソッドによって適用可能です。
- コンストラクタでの指定
new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [139.7670516, 39],
zoom: 5
});
- setStyleメソッドでの指定
map.setStyle('mapbox://styles/mapbox/streets-v11');
スタイルの種類(一部)
- streets-v11 : 要素に対し多彩な色分けをしたスタイル。汎用的。
- dark-v11 : 低い明度と低い彩度によって色分けをしたスタイル。縮小すると球体になる。
- dark-v10 : 低い明度と低い彩度によって色分けをしたスタイル。
- light-v11 : 高い明度と低い彩度によって色分けをしたスタイル。縮小すると球体になる。
- light-v10 : 高い明度と低い彩度によって色分けをしたスタイル。縮小すると球体になる。
- satellite-v9 : 衛生写真をマッピングしたスタイル。
コード
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
});
map.on('load', () => {
const $mapStyleSelect: HTMLSelectElement = <HTMLSelectElement>document.querySelector('#map-style');
$mapStyleSelect.addEventListener('input', () => {
const idx: number = $mapStyleSelect.options.selectedIndex
const $selectedOption: HTMLOptionElement = <HTMLOptionElement>$mapStyleSelect.options[idx];
const mapStyle: string = $selectedOption.value;
map.setStyle(`mapbox://styles/mapbox/${mapStyle}`);
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<title>Mapbox-gl-js Typescript Sample - Tomoya Onki</title>
</head>
<body>
<div id="map"></div>
<div id="controller">
<select id="map-style">
<option value="streets-v11">streets-v11</option>
<option value="dark-v11">dark-v11</option>
<option value="dark-v10">dark-v10</option>
<option value="light-v11">light-v11</option>
<option value="light-v10">light-v10</option>
<option value="satellite-v9">satellite-v9</option>
</select>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
}
#map {
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden;
}
.mapboxgl-control-container {
display: none;
}
#controller {
position: fixed;
top: 20px;
left: 20px;
width: auto;
height: auto;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.7);
border-radius: 10px;
}
select {
text-align: center;
padding: 2px 5px;
}