Thông tin QHKHSD đất | Maps Javascript APIs

Ví dụ này cung cấp thông tin quy hoạch kế hoạch sử dụng đất tại một tọa độ địa lý. Dữ liệu cung cấp trên lãnh thổ Việt Nam (click trên bản đồ để xem)

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Thông tin QHKHSD đấ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>
<div id="map"></div>
 
<script>
var map = new maplibregl.Map({
container: 'map',
center: [105, 17],
zoom: 4
});
var mapOSMBright = new ekmapplf.VectorBaseMap(
'OSM:Bright',
'{YOUR_API_KEY}'
).addTo(map);
 
var landUsePlanService = new ekmapplf.service.LandUsePlan('{YOUR_API_KEY}');
var popupInfo = new maplibregl.Popup({
anchor: 'bottom'
});
map.on('click', function (e) {
landUsePlanService
.at([e.lngLat.lng, e.lngLat.lat])
.run(function (error, response) {
if(response.landuse_plan != null){
popupInfo.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML("<div>Loại đất quy hoạch: " + response.landuse_plan.planppname + "</div>").addTo(map);
}else{
popupInfo.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML("<div>Không có dữ liệu</div>").addTo(map);
}
});
});
</script>
 
 
</body>
</html>