Locate the user | NMaps GL JS Docs

This example adds a button that a user can press to share their current device location and see that location marked on the map with a blue dot.

It uses GeolocateControl to add the button which enables access to the browser's Geolocation API to provide the user's current location. When the control receives the location, it changes the map view to zoom to that location.

If you have disabled geolocation in your browser's settings or are using a browser that does not have Geolocation API support, the GeolocateControl button will appear disabled, and the map will not show the user's location.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Locate the user</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.ndrive.com/nmapsgl/v1.6.6/nmaps-gl.js"></script>
<link href="https://cdn.ndrive.com/nmapsgl/v1.6.6/nmaps-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST ADD YOUR ACCESS TOKEN
	nmapsgl.accessToken = '<your access token here>';
	
const map = new nmapsgl.Map({
container: 'map', // container id
style: 'Streets',
center: [-96, 37.8], // starting position
zoom: 3 // starting zoom
});
 
// Add geolocate control to the map.
map.addControl(
new nmapsgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
);
</script>
 
</body>
</html>