画像


画像


画像






画像






この記事は、「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