Draw Some Shapes

Next Billion Maps support drawing some shapes in the map. Checkout the Circle / Polygon / Polyline API to learn more.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0" />
<meta charset="UTF-8" />
<title>Basic Map</title>
<link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
<!-- Or use the legacy version: -->
<!-- <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet"> -->
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
<!-- Or use the legacy version: -->
<!-- <script src="https://maps.nextbillion.io/maps/api/js"></script> -->
<script>
;(function () {
var loc = { lat: 28.6521, lng: 77.2198 }
var loc2 = { lat: 28.6921, lng: 77.2198 }
var loc3 = { lat: 28.6921, lng: 77.2798 }
var loc4 = { lat: 28.6721, lng: 77.2298 }
nextbillion.apiKey = '123456'
var map = new nextbillion.maps.Map(document.getElementById('map'), {
zoom: 11,
center: loc4,
})
var polygon = new nextbillion.maps.Polygon({
// You need to wrap path's value with an extra pair of square brackets
// if you're using Next Billion Maps legacy version. For example:
// path: [[loc, loc2, loc3]],
path: [loc, loc2, loc3],
map: map,
})
var polyline = new nextbillion.maps.Polyline({
path: [
[loc, loc4],
[loc2, loc4],
[loc3, loc4],
],
strokeColor: 'yellow',
map: map,
})
var circle = new nextbillion.maps.Circle({
center: loc4,
map: map,
strokeColor: 'green',
fillColor: 'green',
radius: 10,
})
})()
</script>
</body>
</html>