Style bản đồ eKMap Chi tiết | Maps Javascript APIs

Hướng dẫn này chỉ cho bạn cách thêm Bản đồ eKMap Chi tiết do eKMap Platform cung cấp, hiển thị Bản đồ eKMap Chi tiết với các phiên bản: Sáng; Xám; Đêm; Đêm xanh cô ban.

Sử dụng Javascript API new ekmapplf.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

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Style bản đồ eKMap Chi tiết</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.js"></script>
<link href="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.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"
name="styleCTM"
checked
onchange="changeStyleMap('bright')"/>
<label for="bright">Sáng</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
name="styleCTM"
onchange="changeStyleMap('gray')"/>
<label for="gray">Xám</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
name="styleCTM"
onchange="changeStyleMap('dark')"/>
<label for="dark">Đêm</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
name="styleCTM"
onchange="changeStyleMap('night')"/>
<label for="night">Đêm xanh cô ban</label>
</div>
</div>
</div>
 
<script>
var map = new maplibregl.Map({
container: 'divMapId',
center: [105, 17],
zoom: 4
});
var mapCTMBright = new ekmapplf.VectorBaseMap('CTM:Bright','{YOUR_API_KEY}');
var mapCTMGray = new ekmapplf.VectorBaseMap('CTM:Gray', '{YOUR_API_KEY}');
var mapCTMDark = new ekmapplf.VectorBaseMap('CTM:Dark', '{YOUR_API_KEY}');
var mapCTMNight = new ekmapplf.VectorBaseMap('CTM:Night', '{YOUR_API_KEY}');
mapCTMBright.addTo(map);
 
function changeStyleMap(styleMap) {
switch (styleMap) {
case 'bright':
mapCTMBright.addTo(map);
break;
case 'gray':
mapCTMGray.addTo(map);
break;
case 'dark':
mapCTMDark.addTo(map);
break;
case 'night':
mapCTMNight.addTo(map);
break;
}
}
</script>
 
 
</body>
</html>