はじめに
以前ご紹介したleafle同様、独自に地図を構築できるMapbox GL JSの基本的な使い方のご紹介です
今回はWebpack+Typescript+scssで作成します
パッケージインストール
まずは必要なパッケージをインストールします
npm install mapbox-gl --save
npm install @types/mapbox-gl css-loader mini-css-extract-plugin node-sass sass-loader style-loader ts-loader typescript webpack webpack-cli --save-dev
ファイル構成
┣ dist
┃ ┣ index.js <-- webpackでビルドします
┃ ┗ style.css <-- webpackでビルドします
┣ src
┃
┣ index.ts
┃
┗ style.scss
┣ index.html
┣ package.json
┣ tsconfig.json
┗ webpack.config.js
tsconfig.json
tsconfig.jsonはデフォルトのままです
npx tsc init
webpack.conig.json
srcフォルダ内のindex.tsとstyle.scssをそれぞれdistフォルダ内のindex.jsとstyle.cssにまとめます
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development",
entry: {
index: "./src/index.ts",
},
output: {
path: `${__dirname}/dist`,
filename: "[name].js"
},
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader"
},
{
test: /\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins:[
// cssの出力先を指定する
new MiniCssExtractPlugin({ filename: 'style.css' }),
],
resolve: {
extensions: [".ts"]
}
};
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mapbox GL JSサンプル</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link href="./dist/style.css" rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<script src="./dist/index.js"></script>
</body>
</html>
src/index.ts
とりあず地図を表示します
地理院地図をタイルとし、ズームコントロール、スケールコントロールを追加しています

import './style.scss'
import { Map, NavigationControl, ScaleControl } from 'mapbox-gl';
const map = new Map({
container: 'map',
style: {
version: 8,
sources: {
cyberJapan: {
type: 'raster',
tiles: ['https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'],
tileSize: 256,
attribution: '<a href=\'https://maps.gsi.go.jp/development/ichiran.html\' target=\'_blank\'>地理院タイル</a>'
},
},
layers: [{
id: 'main-layer',
type: 'raster',
'source': 'cyberJapan',
'minzoom': 0,
'maxzoom': 22,
}],
center: [139.7644081, 35.680043],
zoom: 10
}
});
map.addControl(new NavigationControl());
map.addControl(new ScaleControl({
maxWidth: 200,
unit: 'metric'
}), 'bottom-right');
map.on('moveend', (e) => {
console.log(map.getCenter());
console.log(map.getZoom());
});
src/style.scss
@import "~mapbox-gl/dist/mapbox-gl.css";
body{
margin: 0;
}
#map{
position:absolute;
top:0;
bottom:0;
width:100%;
height: 100%;
}
ビルド
ビルドはwebpackで行います
npx webpack
index.htmlをブラウザで開くと地図が確認できます
おわりに
標準では右クリックし、ドラッグすると地図を回転させたり傾けたりできます
実用上どうかという気はしますが、leafletより見栄えがする地図が作れそうだと感じました