dayjournal memo

Total 967 articles!!

Try #021 – Riot.jsとMapbox GL JSとwebpackで地図の可視化環境を構築してみた

Yasunori Kirimoto's avatar

画像


画像


画像




画像




この記事は、「Riot.js Advent Calendar 2018」の22日目の記事です。



Riot.jsとMapbox GL JSとwebpackで地図の可視化環境を構築してみました!



全体構成

画像


package.json


{
  "name": "Riot.js-MapboxGLJS",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "Yasunori Kirimoto",
  "license": "ISC",
  "devDependencies": {
    "riot": "^3.13.1",
    "riot-hot-reload": "^1.0.0",
    "riot-tag-loader": "^2.1.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  },
  "dependencies": {
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "jquery": "^3.3.1",
    "mapbox-gl": "^0.50.0",
    "ress": "^1.2.2",
    "riot-route": "^3.1.4",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2"
  }
}


webpack.config.js


const webpack = require('webpack');

module.exports = {
    entry: './_resouce/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'app.js'
    },
    module : {
        rules : [
            {
                test: /\.tag$/,
                exclude: /node_modules/,
                loader: 'riot-tag-loader',
                query: {
                    hot: true,
                    debug: true
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            riot: 'riot',
            mapboxgl: 'mapbox-gl',
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
    devServer: {
        contentBase: __dirname + '/dist',
        publicPath: '/',
        watchContentBase: true,
        open: true
    }
};


./_resouce


main.js


//JS一式を読み込んでパッケージ
import {map_conf} from './js/map_conf.js';
import {map_control} from './js/map_control.js';
import {map_circle} from './js/map_circle.js';

//CSS一式を読み込んでパッケージ
import 'ress/ress.css';
import "mapbox-gl/dist/mapbox-gl.css";
import './css/style.css';

//riot-route読み込み
import route from 'riot-route';

//初期設定
let map;
const lon = 139.767;
const lat = 35.681;
const zoom = 11;

//MAPを読み込んでパッケージ
import './tag/mapview.tag';
//ルートに割当て
route('/', function(){
    riot.mount('app','mapview', {
        type: 'mapview',
        map_conf: map_conf,
        map_control: map_control,
        map_circle: map_circle,
        map: map,
        lon: lon,
        lat: lat,
        zoom: zoom
    });
});

//ルータースタート
route.start(true);


./_resouce/css


style.css


html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}


./_resouce/js


map_conf.js


export function map_conf(map, lon, lat, zoom) {

    console.log("map_conf 実行");

    // MIERUNE MONO読み込み
    map = new mapboxgl.Map({
        container: "map",
        style: {
            "version": 8,
            "sources": {
                "MIERUNEMAP": {
                    "type": "raster",
                    "tiles": ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "MIERUNEMAP",
                "type": "raster",
                "source": "MIERUNEMAP",
                "minzoom": 0,
                "maxzoom": 18
            }]
        },
        center: [lon, lat],
        zoom: zoom
    });

    //Mapオブジェクトを返す
    return map;

}



map_control.js


export function map_control(map) {

    console.log("map_control 実行");

    //コントロール関係表示
    map.addControl(new mapboxgl.NavigationControl());

    //スケール表示
    map.addControl(new mapboxgl.ScaleControl({
        maxWidth: 200,
        unit: 'metric'
    }));

    //現在位置表示
    map.addControl(new mapboxgl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: false
        },
        fitBoundsOptions: {maxZoom: 6},
        trackUserLocation: true,
        showUserLocation: true
    }));

}


map_circle.js


export function map_circle(map) {

    console.log("map_circle 実行");

    map.on('load', function () {

        // サークル設定
        map.addSource('point_sample', {
            type: 'geojson',
            data: {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [139.763,35.681]
                }
            }
        });

        // スタイル設定
        map.addLayer({
            "id": "point_sample",
            "type": "circle",
            "source": "point_sample",
            "layout": {},
            "paint": {
                'circle-color': "#FF0000",
                'circle-radius': 10
            }
        });

    });

}


./_resouce/tag


mapview.tag


<mapview>

    <div id="map"></div>

    <style scoped>

        #map {
            z-index: 0;
            height: 100%;
        }

    </style>

    <script>

        // ページ読み込み時処理
        this.on('mount', function() {
            //関数読み込み
            var map_conf = opts.map_conf;
            var map_control = opts.map_control;
            var map_circle = opts.map_circle;
            var map = opts.map;
            var lon = opts.lon;
            var lat = opts.lat;
            var zoom = opts.zoom;

            //MAP表示
            map = map_conf(map, lon, lat, zoom);
            //コントロール追加
            map_control(map);
            //サークル追加
            map_circle(map);

        });

    </script>

</mapview>


./dist

app.jsは自動でビルド


index.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Riot.js-Mapbox GL JS</title>
</head>
<body>
    <app></app>
    <script src="./app.js"></script>
</body>
</html>


ファイルの準備ができたら対象ディレクトリでコマンド実行



実行環境

node v10.0.0
npm v6.4.1



パッケージインストール


npm install


ビルド


npm run build


開発


npm run dev


ローカルサーバーを立ち上げて確認してみます。

画像




Riot.jsとMapbox GL JSとwebpackを利用して地図の可視化ができることが確認できました!



Riot.jsについて、他にも記事を書いています。よろしければぜひ。
tags - Riot.js



book

Q&A