この記事について
この記事は、生成AIを活用した自動生成フローで作成しています。Geolocation APIとLeafletの公式情報、既存Daily-Code-Samplesの静的デモを確認し、位置情報をサーバー保存しない最小ライブデモとして整理しています。
検証ステータス：📘 公式情報・実装確認済み、スマホ実機での許可/拒否確認は未実施
スマホの現在位置はLeafletが取得するのではありません。ブラウザ標準のGeolocation APIが緯度・経度を取得し、その値をLeafletへ渡すことで地図にマーカーを置けます。この役割分担を画面で見るのが今回の目的です。
まず試す
既存サンプルはボタンを押すまで位置情報を要求しません。許可すると latitude / longitude / accuracy を表示し、同じ座標へLeafletのmarkerと精度円を描きます。拒否した場合もエラー理由を画面へ表示します。
最小部分は次です。
button.addEventListener("click", () => {
navigator.geolocation.getCurrentPosition(
position => {
const { latitude, longitude, accuracy } = position.coords;
console.log({ latitude, longitude, accuracy });
L.marker([latitude, longitude]).addTo(map);
},
error => {
console.log("FAILED", error.code, error.message);
},
{
enableHighAccuracy: false,
timeout: 10000,
maximumAge: 0
}
);
});
Geolocation APIはsecure contextとユーザー許可が関係します。
ここを見る
ブラウザ内では次の順に進みます。
sequenceDiagram
participant U as User
participant B as Browser
participant G as Geolocation API
participant L as Leaflet
U->>B: 「現在位置を取得」を押す
B->>U: 位置情報の許可を要求
U-->>B: 許可 / 拒否
B->>G: getCurrentPosition
alt 許可・取得成功
G-->>B: latitude / longitude / accuracy
B->>L: 座標を渡す
L-->>U: markerを表示
else 拒否・失敗
G-->>B: error code
B-->>U: FAILED理由を表示
end
位置情報を取る役と地図を描く役が別なのが観察ポイントです。
プライバシーで見るべき点
既存デモのJavaScriptは取得した緯度・経度をpapanda925.comやGitHubへ送信・保存しません。座標は画面表示とmarker配置に使います。
ただし、地図表示ではOpenStreetMapの地図タイルを取得するネットワーク通信があります。「一切外部通信しない」とは書けません。位置情報そのものをタイルURLへ埋め込む実装にはしていません。
1か所変えてみる
enableHighAccuracy を false から true へ変えて比較します。
enableHighAccuracy: true
端末やOSによって結果は変わります。精度が必ず上がる、取得が必ず遅くなる、と断定せず、accuracy と取得時間を実際に比べる教材にします。
Leafletを外すと何が残る？
Geolocation APIだけでも緯度・経度は取得できます。Leafletを外すと「座標を地図として見せる部分」がなくなるだけです。
逆に、Leafletだけでは端末のGPS/位置情報を勝手に取得しません。ブラウザAPIとライブラリの責務を分けて理解すると、別の地図ライブラリへ置き換えるときにも考え方を再利用できます。
仕事で使うなら
ユーザー操作前に位置情報を要求しない
拒否されてもページを壊さない
HTTPS/secure contextを確認する
緯度経度をanalyticsへ送らない
保存が必要なら目的・同意・保持期間を別途設計する
外部タイルの利用規約・attributionを守る
ライブラリのバージョンとライセンスを確認する
既存デモはLeaflet 1.9.4を固定し、SRIを指定しています。
GitHubサンプル
GitHub Pagesで公開する場合はHTTPSで動かし、スマホから許可/拒否の両方を確認してから verified へ上げます。
公式情報・一次情報
まとめ
Geolocation APIは位置を取得し、Leafletはその座標を地図に見せます。ボタン操作、許可、座標取得、marker表示を順番に観察すると、ブラウザ標準APIと外部ライブラリの役割を混同せず理解できます。
