Style bản đồ tỉnh/thành phố | Maps Javascript APIs

Hướng dẫn này chỉ cho bạn cách thêm Bản đồ tỉnh/thành phố do HueMap Platform cung cấp, hiển thị bản đồ tỉnh/thành phố với các phiên bản sáng; xám; tối; đêm

Sử dụng Javascript API new huemapplf.VectorBaseMap, bạn có thể đọc thêm về cách sử dụng và các lựa chọn cho đối tượng Bản đồ nền tại đây

Mapbox GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Style bản đồ tỉnh/thành phố</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://mapplatform.tthue.vn/sdks/huemap-platform-v1.0.0.min.js"></script>
<link href="https://mapplatform.tthue.vn/sdks/huemap-platform-v1.0.0.min.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; background:#ddd;}
</style>
</head>
<body>
<style>
.map {
width: 100%;
height: calc(100vh - 15px);
}
.selectStyle {
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
background-color: #fff;
padding: 10px;
}
</style>
 
<div id="divMapId" class="map">
<div class="selectStyle">
<input
type="radio"
class="radio-style"
id="bright"
name="styleProvince"
value="bright"
checked
onchange="changeStyleMap('bright')"
/>
<label for="bright">Sáng</label>
<input
type="radio"
class="radio-style"
id="gray"
name="styleProvince"
value="gray"
onchange="changeStyleMap('gray')"
/>
<label for="gray">Xám</label>
<input
type="radio"
class="radio-style"
id="dark"
name="styleProvince"
value="dark"
onchange="changeStyleMap('dark')"
/>
<label for="dark">Đêm</label>
<input
type="radio"
class="radio-style"
id="night"
name="styleProvince"
value="night"
onchange="changeStyleMap('night')"
/>
<label for="night">Tối</label>
</div>
</div>
 
<script>
var map = new mapboxgl.Map({
container: 'divMapId',
center: [107.5402, 16.4386],
zoom: 10.68
});
var mapProvinceBright = new huemapplf.VectorBaseMap(
'Province:Bright',
'{YOUR_API_KEY}'
);
var mapProvinceGray = new huemapplf.VectorBaseMap('Province:Gray', '{YOUR_API_KEY}');
var mapProvinceDark = new huemapplf.VectorBaseMap('Province:Dark', '{YOUR_API_KEY}');
var mapProvinceNight = new huemapplf.VectorBaseMap('Province:Night', '{YOUR_API_KEY}');
mapProvinceBright.addTo(map);
 
function changeStyleMap(styleMap) {
switch (styleMap) {
case 'bright':
mapProvinceBright.addTo(map);
break;
case 'gray':
mapProvinceGray.addTo(map);
break;
case 'dark':
mapProvinceDark.addTo(map);
break;
case 'night':
mapProvinceNight.addTo(map);
break;
}
}
</script>
 
 
</body>
</html>