Geolocation Control with MapTiler SDK
MapTiler SDKShow the user's current location on the map using the built-in maptilersdk.GeolocateControl with tracking.
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [15.0, 50.0],
zoom: 5
});
map.addControl(new maptilersdk.GeolocateControl({
positionOptions: { enableHighAccuracy: true },
trackUserLocation: true,
showUserHeading: true
}));How it works
The GeolocateControl adds a button that requests the browser’s geolocation permission. Once granted, it shows a pulsing dot at the user’s position and optionally tracks movement.
Setting trackUserLocation: true keeps the dot updated as the user moves. The showUserHeading option adds a directional cone showing which way the device is facing (on supported devices).
The control uses the browser’s Geolocation API: it works on both desktop and mobile.
Key APIs
| API | Description | Docs |
|---|---|---|
maptilersdk.GeolocateControl |
Built-in geolocation button and tracking | docs.maptiler.com/sdk-js/api/ |
trackUserLocation |
Continuously update position | docs.maptiler.com/sdk-js/api/ |
showUserHeading |
Show device heading direction | docs.maptiler.com/sdk-js/api/ |
FAQ
What happens if the user denies location permission?
The control shows an error state. You can listen to the error event on the control to display a custom message.
Does this work over HTTP?
No. The Geolocation API requires HTTPS (or localhost). On HTTP, the browser blocks the request silently.
Common mistakes
- Testing over HTTP: geolocation requires HTTPS
- Expecting automatic activation: the user must click the control button to trigger the permission prompt
- Not setting
enableHighAccuracy: on mobile, this uses GPS instead of cell tower approximation
Build maps using MapTiler SDK with AI
Generate code like this geolocation control with maptiler sdk example using the MapTiler SDK skill in your IDE.
Related Examples
- Live GPS Tracking with MapTiler SDK
- See how to do this in Leaflet, MapLibre GL JS or OpenLayers