画像




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




画像




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";




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

Option Description
position ボタン表示位置
flyTo 表示時飛ぶ
markerStyle マーカーのスタイル
title ツールチップ
popup クリック時のポップアップ
maxZoom 移動時のズームレベル




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







Q&A