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 eKMap 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 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</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"
id="standard"
name="styleOSM"
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="styleOSM"
value="bright"
onchange="changeStyleMap('bright')"/>
<label for="bright">Sáng</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="gray"
name="styleOSM"
value="gray"
onchange="changeStyleMap('gray')"/>
<label for="gray">Xám</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="dark"
name="styleOSM"
value="dark"
onchange="changeStyleMap('dark')"/>
<label for="dark">Đêm</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="night"
name="styleOSM"
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="styleOSM"
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="styleOSM"
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="styleOSM"
value="wood"
onchange="changeStyleMap('wood')"/>
<label for="wood">Gỗ</label>
</div>
</div>
</div>
 
<script>
var map = new maplibregl.Map({
container: 'divMapId',
center: [105, 17],
zoom: 4
});
var mapOSMStandard = new ekmapplf.VectorBaseMap('OSM:Standard','{YOUR_API_KEY}');
var mapOSMBright = new ekmapplf.VectorBaseMap('OSM:Bright','{YOUR_API_KEY}');
var mapOSMGray = new ekmapplf.VectorBaseMap('OSM:Gray', '{YOUR_API_KEY}');
var mapOSMDark = new ekmapplf.VectorBaseMap('OSM:Dark', '{YOUR_API_KEY}');
var mapOSMNight = new ekmapplf.VectorBaseMap('OSM:Night', '{YOUR_API_KEY}');
var mapOSMPencil = new ekmapplf.VectorBaseMap('OSM:Pencil','{YOUR_API_KEY}');
var mapOSMPirates = new ekmapplf.VectorBaseMap('OSM:Pirates','{YOUR_API_KEY}');
var mapOSMWood = new ekmapplf.VectorBaseMap('OSM:Wood', '{YOUR_API_KEY}');
mapOSMStandard.addTo(map);
 
function changeStyleMap(styleMap) {
switch (styleMap) {
case 'standard':
mapOSMStandard.addTo(map);
break;
case 'bright':
mapOSMBright.addTo(map);
break;
case 'gray':
mapOSMGray.addTo(map);
break;
case 'dark':
mapOSMDark.addTo(map);
break;
case 'night':
mapOSMNight.addTo(map);
break;
case 'pencil':
mapOSMPencil.addTo(map);
break;
case 'pirates':
mapOSMPirates.addTo(map);
break;
case 'wood':
mapOSMWood.addTo(map);
break;
}
}
</script>
 
 
</body>
</html>