Bản đồ giao thông | eKAPI Docs

Hiển thị bản đồ giao thông Việt Nam
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bản đồ giao thông</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; background:#ddd;}
</style>
</head>
<body>
<div id="map"></div>
 
<script>
mapboxgl.accessToken = '{YOUR_API_KEY_MAPBOX_GL_JS}'; // "Khóa API Mapbox GL JS của bạn (https://account.mapbox.com/)"
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
'version': 8,
'sources': {
'raster-tiles': {
'type': 'raster',
'tiles': [
'https://api.ekgis.vn/v1/maps/roadmap/{z}/{x}/{y}.png?api_key={YOUR_API_KEY}'
],
'tileSize': 256,
'attribution':
'Map by <a target="_top" rel="noopener" href="https://ekgis.com.vn">eKMap</a>'
}
},
'layers': [
{
'id': 'simple-tiles',
'type': 'raster',
'source': 'raster-tiles',
'minzoom': 0,
'maxzoom': 22
}
]
},
center: [107.19, 16.22], // starting position
zoom: 4 // starting zoom
});
</script>
 
</body>
</html>