Thông tin khu công nghiệp | Maps Javascript APIs

Ví dụ này cung cấp dịch vụ truy vấn khu công nghiệp 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 khu công nghiệp</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" class="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 industrialZoneService = new ekmapplf.service.IndustrialZone('{YOUR_API_KEY}');
var popupInfo = new maplibregl.Popup({
anchor: 'bottom'
})
map.on('click', function (e) {
industrialZoneService.at([e.lngLat.lng, e.lngLat.lat]).run(function (error, response) {
var innerHTML = "";
if (response.length > 0) {
for (var i = 0; i < response.length; i++) {
innerHTML += "<div>" + response[i].name + "</div>";
}
} else {
innerHTML = "<div>Không có dữ liệu</div>";
}
popupInfo.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML(innerHTML).addTo(map);
});
})
 
</script>
 
 
</body>
</html>