Mapbox GL JSの基本的な使い方

2019 11/03

2019.11.03 2021.08.19

はじめに

以前ご紹介した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より見栄えがする地図が作れそうだと感じました

よかったらシェアしてね！

URL Copied!

URL Copied!