About this article
This article was created using an automated generation workflow powered by generative AI. It is organized as a minimal live demo that checks official information for the Geolocation API and Leaflet alongside existing Daily-Code-Samples static demos, without saving location data to a server.
Verification status: 📘 Official information and implementation verified; permission/rejection testing on a physical smartphone has not been performed.
Leaflet does not obtain the smartphone's current location. The browser-standard Geolocation API acquires the latitude and longitude, and passing those values to Leaflet allows you to place a marker on the map. The purpose of this guide is to observe this division of roles on screen.
Try it first
The existing sample does not request location information until a button is pressed. If permitted, it displays latitude / longitude / accuracy and draws a Leaflet marker and accuracy circle at the same coordinates. If denied, the reason for the error is also displayed on the screen.
The minimum required code is as follows.
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
}
);
});
The Geolocation API involves secure contexts and user permissions.
Check this out
Within the browser, the process proceeds in the following order.
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
The role of acquiring location information and the role of rendering the map are separate, which is the key point to observe.
Privacy considerations
The JavaScript in the existing demo does not transmit or save the acquired latitude and longitude to papanda925.com or GitHub. The coordinates are used solely for screen display and marker placement.
However, map rendering involves network communication to fetch OpenStreetMap map tiles. We cannot claim that there is "no external communication whatsoever." The implementation does not embed the location data itself into the tile URLs.
Try changing one part
enableHighAccuracyCompare by changing false from true to
enableHighAccuracy: true
Results vary depending on the device and OS. Avoid making definitive assumptions such as "accuracy will definitely improve" or "acquisition will definitely be slower," and instead use it as learning material to actually compare accuracy with the acquisition time.
What is left if you remove Leaflet?
You can acquire latitude and longitude using just the Geolocation API. Removing Leaflet simply removes the part that "displays the coordinates as a map."
Conversely, Leaflet alone does not automatically acquire the device's GPS or location information. Understanding the separate responsibilities of browser APIs and libraries allows you to reuse this conceptual framework when switching to another map library.
For professional use
Do not request location information before user interaction
Do not break the page if permission is denied
Verify HTTPS/secure context
Do not send latitude and longitude to analytics
If storage is required, design the purpose, consent, and retention period separately
Comply with external tile terms of use and attribution requirements
Check library versions and licenses
The existing demo fixes Leaflet to version 1.9.4 and specifies SRI.
GitHub sample
When publishing on GitHub Pages, run it over HTTPS, confirm both allow and deny actions from a smartphone, and then upload to verified.
Official and primary sources
Summary
The Geolocation API obtains the position, and Leaflet displays those coordinates on a map. By observing button operation, permission requests, coordinate retrieval, and marker display in sequence, you can understand the respective roles of standard browser APIs and external libraries without confusion.
