リーフレット(leaflet)は軽量、多機能、拡張性、スマホ対応している地図の機能を持った、JavaScriptライブラリです。この記事では、位置情報を許可されている端末から、現在の位置を取得してその位置まで移動する方法を確認します。
JS地図ライブラリ・リーフレットを使って国土地理院のタイルマップや航空画像を使う方法
2022年11月21日
デモ
See the Pen leaflet 9 by logsuke (@design-list) on CodePen.
端末から現在の位置を取得して移動
const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var map = L.map('myMap', {
center: [32.639884, 130.987154],
zoom: 8,
layers: [osm]
})
map.locate({ setView: true, maxZoom: 16 });
function success(e) {
var radius = e.accuracy;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function error(err) {
var errorMessage = {
1: "ページが許可を得ていないために、位置情報の取得に失敗しました。",
2: "1 つ以上の位置の内部ソースが内部エラーを返したために、位置情報の取得に失敗しました。",
3: "位置情報を取得するための制限時間が情報を取得する前に終了しました。",
};
alert(errorMessage[err.code]);
}
map.on('locationfound', success);
map.on('locationerror', error)
Geolocation API、Locate options
11 : Geolocation API を使用してユーザーの位置を特定しようとし、成功した場合は位置データを含む 29 : locationfound イベントを、失敗した場合は 30 : locationerror イベントを発生させます。オプションに setView: trueを指定すると、現在の位置に移動します。
13 ~ 18 : 現在の位置の取得に成功した場合現在の位置にマーカーを配置しています。
20 ~ 27 : 現在の位置の取得に失敗した場合のエラーメッセージを警告しています。