Thông tin về kinh tế và xã hội | Maps Javascript APIs

Ví dụ này cung cấp thông tin về kinh tế và xã hội 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 về kinh tế và xã hội</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 populationService = new ekmapplf.service.Population('{YOUR_API_KEY}');
var popupInfo = new maplibregl.Popup({
anchor: 'bottom'
});
map.on('click', function (e) {
populationService
.at([e.lngLat.lng, e.lngLat.lat])
.run(function (error, response) {
if(response != null){
var html = "";
if(response.district != null && response.district.density != null && response.district.density != 0){
html +="<div>Mật độ dân cư theo huyện: " + response.district.density + " người/km <sup>2</sup> </div>";
}
if(response.district != null && response.district.population != null && response.district.population){
html += "<div>Dân số theo huyện: " + response.district.population + " người"
}
if(response.district.density == 0 && response.district.density == 0){
html = "<div>Không có dữ liệu</div>";
}
popupInfo.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML(html).addTo(map);
}
});
});
</script>
 
 
</body>
</html>