Leaflet #041 – webpackでGeoJSONもビルド

webpackでGeoJSONもビルドするメモ。

package.json

{
  "name": "leaflet-starter",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "Yasunori Kirimoto",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "file-loader": "^1.1.5",
    "json-loader": "^0.5.7",
    "leaflet": "^1.2.0"
  }
}

webpack.config.js

var webpack = require("webpack");

module.exports = {
    entry: './_resouce/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'app.js'
    },
    module: {
        rules: [
            {
                test: /\.(json|geojson)$/,
                loader: 'json-loader'
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: './dist/img/icon/[name].[ext]'
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.ProvidePlugin({
            L: 'leaflet',
            pointdata: './vecter/point.geojson'
        })
    ],
    devServer: {
        contentBase: __dirname + '/dist',
        publicPath: '/',
        watchContentBase: true,
        open: true
    }
};

./_resouce/js

script.js

//デフォルトアイコンパス
L.Icon.Default.imagePath = './img/icon/';

//MIERUNE Color読み込み
var m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
    attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});

//MIERUNE MONO読み込み
var m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', {
    attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});

//経緯度設定
var lat = 35.681;
var lng = 139.763;

//MAP読み込み
var map = L.map('map', {
    center: [lat, lng],
    zoom: 14,
    zoomControl: true,
    layers: [m_mono]
});

//GeoJSON読み込み
var PointGeojson = L.geoJson(
    pointdata
).addTo(map);

//背景レイヤ
var Map_BaseLayer = {
    "MIERUNE Color": m_color,
    "MIERUNE MONO": m_mono
};

//レイヤ設定
L.control.layers(
    Map_BaseLayer,
    null
).addTo(map);

//スケール設定
L.control.scale({
    imperial: false,
    maxWidth: 300
}).addTo(map);

./_resouce/js/vecter

point.geojson

{
  "type": "FeatureCollection",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

  "features": [
    { "type": "Feature", "properties": { "id": 5 }, "geometry": { "type": "Point", "coordinates": [ 139.73025667682498, 35.684728657838271 ] } },
    { "type": "Feature", "properties": { "id": 4 }, "geometry": { "type": "Point", "coordinates": [ 139.7404818862039, 35.630246376589362 ] } },
    { "type": "Feature", "properties": { "id": 3 }, "geometry": { "type": "Point", "coordinates": [ 139.77705667359774, 35.713791961149241 ] } },
    { "type": "Feature", "properties": { "id": 2 }, "geometry": { "type": "Point", "coordinates": [ 139.76722474150262, 35.68153424228494 ] } },
    { "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "Point", "coordinates": [ 139.7001709646139, 35.690318577295173 ] } }
  ]
}

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

パッケージインストール

npm install

ビルド

npm run build

ローカルサーバーを立ち上げて確認すると表示される。

Leafletを手軽に始めるビルド環境公開しています。
leaflet-starter

• 参考文献
  Leaflet
  webpack