VietMap GL show user location¶
Click on the locate button to locate the user.
Example¶
<!DOCTYPE html>
<html lang="en">
<head>
<title>Locate the user</title>
<meta property="og:description" content="Geolocate the user and then track their current location on the map using the GeolocateControl." />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.js'></script>
<link rel='stylesheet' href='https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.css' />
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new vietmapgl.Map({
container: 'map', // container id
style:
'https://maps.vietmap.vn/mt/tm/style.json?apikey=YOUR_API_KEY_HERE',
center: [106,10], // starting position
zoom: 3 // starting zoom
});
// Add geolocate control to the map.
map.addControl(
new vietmapgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
);
</script>
</body>
</html>