Zenn
🙌

Leafletで位置情報の現在地をマーカーで常時更新してみた

2025/01/01に公開
CSS
HTML
JavaScript
Leaflet
tech

Leafletのプラグイン「UserMarker」使用と「navigator.geolocation.watchPosition」使って、位置情報の現在地をマーカーで常時更新してみました。

実装すると以下のようになります。

まずは全体のコード

<!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, minimum-scale=1, user-scalable=yes">
<script src="leaflet.js"></script>
<script src="leaflet.usermarker.js"></script>
<script type="module">

let latitude;
let longitude;
let map;
const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});

const options = {
    enableHighAccuracy: true,
    maximumAge: 0,
    timeout: 100,
}

navigator.geolocation.watchPosition(success, error, options);

function success(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
}

function error(error) {
    PERMISSION_DENIED = 1; // GPS機能の利用が許可されていない
    POSITION_UNAVAILABLE = 2; // 何らかの内部エラーが発生した
    TIMEOUT = 3; // タイムアウト
    console.log(TIMEOUT);
}

setInterval(callBack, 5000);
function callBack() {
    if (map != undefined) {
        map.remove();
    }
    map = L.map('mapid', {
        center: [latitude, longitude],
        zoom: 17,
    });
    tileLayer.addTo(map);
    let options = {
        pulsing: true ,accuracy: 1 ,smallIcon: true
    };
    L.userMarker([latitude, longitude], options).addTo(map).bindPopup("pulsing true");
}
</script>
        <style>
            #mapid {
                width: 100%;
                height: 33vh;
            }
        </style>
</head>
    <title>まっP</title>
    <body>
        <div id="mapid"></div>
            <link rel="stylesheet" href="leaflet.css" />
            <link rel="stylesheet" href="leaflet.usermarker.css" />
    </body>
</html>

それでは、要所を解説していきますね。

プラグインの読み込み 〜その1〜

LeafletのjsとUserMarkerのjsを読み込みます。
LeafletとLeafletのダウンロードページから。
UserMarker の本体は GitHubからダウンロードできます。
Leaflet
UserMarker

<script src="leaflet.js"></script>
<script src="leaflet.usermarker.js"></script>

プラグインの読み込み 〜その2〜

LeafletのcssとUserMarkerのcssを読み込みます。
LeafletとLeafletのダウンロードページから。
UserMarker の本体は GitHubからダウンロードできます。
Leaflet
UserMarker

<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="leaflet.usermarker.css" />

位置情報の習得

「navigator.geolocation.watchPosition」使って、位置情報を習得します。

let latitude;
let longitude;

navigator.geolocation.watchPosition(success, error, options);

function success(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
}

function error(error) {
    PERMISSION_DENIED = 1; // GPS機能の利用が許可されていない
    POSITION_UNAVAILABLE = 2; // 何らかの内部エラーが発生した
    TIMEOUT = 3; // タイムアウト
    console.log(TIMEOUT);
}

UserMarkerの設定

L.userMarker オブジェクトを使用します。
L.userMarker(緯度経度, 表示オプション)

オプション

  1. pulsing：マーカーの波形ON（true）・Off（false）を指定。
  2. accuracy：精確さ。（単位：メートル）
  3. smallIcon：小さいアイコンの表示。表示（true）・非表示（false）。
let options = {
    pulsing: true,
    accuracy: 1,
    smallIcon: true
};

現在地にマーカーを表示しながら、常時更新する

setInterval(callBack, 5000);
function callBack() {
    if (map != undefined) {
        map.remove();
    }
    map = L.map('mapid', {
        center: [latitude, longitude],
        zoom: 17,
    });
    tileLayer.addTo(map);
    let options = {
        pulsing: true ,accuracy: 1 ,smallIcon: true
    };
    L.userMarker([latitude, longitude], options).addTo(map).bindPopup("pulsing true");
}

まとめ

UserMarker を使用して現在地の取得・マーカーを表示を常時更新しました。
青色のきれいなマーカーは位置情報ぽいですよね！

Discussion