Leaflet #051 – 現在位置の表示3

現在位置を表示するメモ。

「Leaflet #009 – 現在位置の表示」や「Leaflet #020 – 現在位置の表示2」よりも、手軽にボタンなどで現在位置を表示するには、「Leaflet.Locate」というプラグインを利用します。

leaflet.locatecontrolをインストール

npm install leaflet.locatecontrol

font-awesome関係をインストール

npm install font-awesome
npm install font-awesome-webpack-4
npm install less

package.json

{
  "name": "leaflet-starter",
  "version": "1.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "Yasunori Kirimoto",
  "license": "ISC",
  "devDependencies": {
    "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",
    "font-awesome": "^4.7.0",
    "font-awesome-webpack-4": "^1.0.0",
    "leaflet": "^1.3.4",
    "leaflet.locatecontrol": "^0.66.0",
    "less": "^3.9.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2"
  }
}

webpack.config.js

const webpack = require("webpack");

module.exports = {
    mode: 'production',
    entry: './_resouce/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'app.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader:"url-loader?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: './dist/img/icon/[name].[ext]'
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            L: 'leaflet'
        })
    ],
    devServer: {
        contentBase: __dirname + '/dist',
        publicPath: '/',
        watchContentBase: true,
        open: true
    }
};

main.js

// CSS一式を読み込んでパッケージ
import "leaflet/dist/leaflet.css";
import "leaflet.locatecontrol/dist/L.Control.Locate.min.css";
import "./css/style.css";

// JS一式を読み込んでパッケージ
import "leaflet.locatecontrol";
import "font-awesome-webpack-4";
import "./js/script.js";

オプションとして指定。下記以外にもあります。

script.js

//現在位置取得
var lc = L.control.locate({
    position: "topleft",
    flyTo: "true",
    markerStyle: {
        color: "#fff",
        fillColor: "#2A93EE",
        fillOpacity: 1,
        weight: 3,
        opacity: 1,
        radius: 9
    },
    strings: {
        title: "現在位置ボタン",
        popup: "ここにいるよ!!"
    },
    locateOptions: {
        maxZoom: 6
    }
}).addTo(map);

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

• 参考文献
  Leaflet