この記事は、「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
- 参考文献
Riot.js
Mapbox GL JS
webpack