Style bản đồ eKMap | Maps Javascript APIs

Hướng dẫn này chỉ cho bạn cách thêm Bản đồ eKMap do HueMap Platform cung cấp, hiển thị bản đồ eKMap với các phiên bản: Tiêu chuẩn; Sáng; Xám; Đêm; Đêm xanh cô ban; Bút chì; Cổ điển; Gỗ

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 đồ eKMap</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;
}
.StyleOption {
width: 120px;
}
</style>
 
<div id="divMapId" class="map">
<div class="selectStyle">
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="standard"
name="styleBasic"
value="standard"
checked
onchange="changeStyleMap('standard')"/>
<label for="standard">Tiêu chuẩn</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="bright"
name="styleBasic"
value="bright"
onchange="changeStyleMap('bright')"/>
<label for="bright">Sáng</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="gray"
name="styleBasic"
value="gray"
onchange="changeStyleMap('gray')"/>
<label for="gray">Xám</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="dark"
name="styleBasic"
value="dark"
onchange="changeStyleMap('dark')"/>
<label for="dark">Đêm</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="night"
name="styleBasic"
class
value="night"
onchange="changeStyleMap('night')"/>
<label for="night">Đêm xanh cô ban</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="pencil"
name="styleBasic"
value="pencil"
onchange="changeStyleMap('pencil')"/>
<label for="pencil">Bút chì</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="pirates"
name="styleBasic"
value="pirates"
onchange="changeStyleMap('pirates')"/>
<label for="pirates">Cổ điển</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="wood"
name="styleBasic"
value="wood"
onchange="changeStyleMap('wood')"/>
<label for="wood">Gỗ</label>
</div>
</div>
</div>
 
<script>
var map = new mapboxgl.Map({
container: 'divMapId',
center: [105, 17],
zoom: 4
});
var mapBasicStandard = new huemapplf.VectorBaseMap('Basic:Standard','{YOUR_API_KEY}');
var mapBasicBright = new huemapplf.VectorBaseMap('Basic:Bright','{YOUR_API_KEY}');
var mapBasicGray = new huemapplf.VectorBaseMap('Basic:Gray', '{YOUR_API_KEY}');
var mapBasicDark = new huemapplf.VectorBaseMap('Basic:Dark', '{YOUR_API_KEY}');
var mapBasicNight = new huemapplf.VectorBaseMap('Basic:Night', '{YOUR_API_KEY}');
var mapBasicPencil = new huemapplf.VectorBaseMap('Basic:Pencil','{YOUR_API_KEY}');
var mapBasicPirates = new huemapplf.VectorBaseMap('Basic:Pirates','{YOUR_API_KEY}');
var mapBasicWood = new huemapplf.VectorBaseMap('Basic:Wood', '{YOUR_API_KEY}');
mapBasicStandard.addTo(map);
 
function changeStyleMap(styleMap) {
switch (styleMap) {
case 'standard':
mapBasicStandard.addTo(map);
break;
case 'bright':
mapBasicBright.addTo(map);
break;
case 'gray':
mapBasicGray.addTo(map);
break;
case 'dark':
mapBasicDark.addTo(map);
break;
case 'night':
mapBasicNight.addTo(map);
break;
case 'pencil':
mapBasicPencil.addTo(map);
break;
case 'pirates':
mapBasicPirates.addTo(map);
break;
case 'wood':
mapBasicWood.addTo(map);
break;
}
}
</script>
 
 
</body>
</html>