Công cụ lựa chọn bản đồ nền | Maps Javascript APIs

Ví dụ này cho phép người dùng có thể tùy biến lựa chọn bản đồ hiển thị trong ứng dụng của mình.

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Công cụ lựa chọn bản đồ nề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>
<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}'
);
var mapOSMNight = new ekmapplf.VectorBaseMap('OSM:Night', '{YOUR_API_KEY}');
mapOSMBright.addTo(map);
var basemap = new ekmapplf.control.BaseMap({
baseLayers: [
{
id: 'OSMBright',
title: 'OSM sáng',
thumbnail: 'https://files.ekgis.vn/ekmap/basemap/thumbnail/ekmap_bright.png'
},
{
id: 'OSMNight',
title: 'OSM tối',
thumbnail: 'https://files.ekgis.vn/ekmap/basemap/thumbnail/ekmap_night.png'
}
]
});
map.addControl(basemap, 'bottom-left');
basemap.on('changeBaseLayer', function (response) {
if (response.layer == 'OSMBright') mapOSMBright.addTo(map);
else mapOSMNight.addTo(map);
});
</script>
 
 
</body>
</html>