A Baato vector map in the browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display a map</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map-container" style="position: absolute; top: 0; bottom: 0; width: 100%;">
<div style="z-index: 10; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; right: 0px"> © <a href="https://www.openstreetmap.org/copyright" rel="noopener noreferrer no follow" target="_blank">OpenStreetMap contributors</a></div>
<div style="z-index: 100; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; left: 0px"><a href="https://baato.io" rel="noopener noreferrer no follow" target="_blank"><img src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg" alt="Baato" width="80px"></img></a></div>
</div>
<script>
var map = new mapboxgl.Map({
container: "map-container",
style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // Baato stylesheet location
center: [85.31853583740946, 27.701739466949107], // starting position [lng, lat]
zoom: 14, // starting zoom
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display a map</title>
<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
<link href="https://cdn.skypack.dev/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map-container" style="position: absolute; top: 0; bottom: 0; width: 100%;">
<div style="z-index: 10; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; right: 0px"> © <a href="https://www.openstreetmap.org/copyright" rel="noopener noreferrer no follow" target="_blank">OpenStreetMap contributors</a></div>
<div style="z-index: 100; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; left: 0px"><a href="https://baato.io" rel="noopener noreferrer no follow" target="_blank"><img src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg" alt="Baato" width="80px"></img></a></div>
</div>
<script>
var map = new mapboxgl.Map({
container: "map-container",
style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // Baato stylesheet location
center: [85.31853583740946, 27.701739466949107], // starting position [lng, lat]
zoom: 14, // starting zoom
});
</script>
</body>
</html>