Style bản đồ bất động sản | Maps Javascript APIs

Hướng dẫn này chỉ cho bạn cách thêm Bản đồ bất động sản do eKMap Platform cung cấp, hiển thị Bản đồ bất động sản với các phiên bản: có POI, không POI

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 đồ bất động sản</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: 100px;
}
</style>
 
<div id="divMapId" class="map">
<div class="selectStyle">
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="bright"
name="styleRE"
value="bright"
checked
onchange="changeStyleMap('bright')"/>
<label for="bright">có POI</label>
</div>
<div class="StyleOption">
<input
type="radio"
class="radio-style"
id="notpoint"
name="styleRE"
value="notpoint"
onchange="changeStyleMap('notpoint')"/>
<label for="notpoint">không POI</label>
</div>
</div>
</div>
 
<script>
var map = new maplibregl.Map({
container: 'divMapId',
center: [105.813, 21.027],
zoom: 14.5
});
var mapREBright = new ekmapplf.VectorBaseMap('RealEstate:Bright','{YOUR_API_KEY}');
var mapRENotPoint = new ekmapplf.VectorBaseMap('RealEstate:Bright_NotPoint', '{YOUR_API_KEY}');
mapREBright.addTo(map);
 
function changeStyleMap(styleMap) {
switch (styleMap) {
case 'bright':
mapREBright.addTo(map);
break;
case 'notpoint':
mapRENotPoint.addTo(map);
break;
}
}
</script>
 
 
</body>
</html>