はじめに
この記事は#30DayMapChallenge2022 8日目の記事です。
テーマはOpenStreetMapです。
MapLibre GL JSを使ってOpenStreetMapのラスタータイルとベクトルタイルを表示してみます。
OpenStreetMapとは
自由に利用でき、なおかつ編集機能のある世界地図を作るプロジェクト
地球上のあらゆる地域がストリート単位の精度で描かれている
画像とベクトルデータセットはオープンデータベースライセンス (ODbL) 1.0のもと再利用可能
ラスタータイル表示
ラスタータイルを表示してみます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<meta name="description" content="サンプルです">
<link href="style.css" rel="stylesheet">
<!-- MapLibre -->
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
<div id="map"></div>
<script src="main.js"></script>
</body>
</html>
style.css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
main.js
var map = new maplibregl.Map({
container: 'map',
style: {
version: 8,
sources: {
rtile: {
type: 'raster',
tiles: [
'https://tile.openstreetmap.jp/{z}/{x}/{y}.png',
],
tileSize: 256,
attribution:
'<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
},
},
layers: [
{
id: 'raster-tiles',
type: 'raster',
source: 'rtile',
minzoom: 0,
maxzoom: 22,
},
],
},
center: [139.68786, 35.68355], // 中心座標
zoom: 13, // ズームレベル
});
OpenStreetMap（ラスタータイル）を表示できました！
ベクトルタイル表示
ベクトルタイルを表示してみます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<meta name="description" content="サンプルです">
<link href="style.css" rel="stylesheet">
<!-- MapLibre -->
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
<div id="map"></div>
<script src="main.js"></script>
</body>
</html>
style.css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
main.js
var map = new maplibregl.Map({
container: 'map',
style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
center: [139.68786, 35.68355], // 中心座標
zoom: 13, // ズームレベル
});
OpenStreetMap（ベクトルタイル）を表示できました！
参考文献