Edit Shapes

Besides drawing shapes, you can further edit or remove the shapes on Next Billion Maps.

The shapes can be altered by dragging the square handles on the edges, and moved around by dragging inside the shape.

Related page: Draw Some Shapes.

Upgrade to Next Billion Maps GL

Next Billion Maps GL doesn't support editing shapes at the moment except for creating and removing. Please refer to Circle, Polygon and Polyline pages for detailed usage.

You can find a detailed "how-to" documentation on the Upgrade Guide page.

<!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.nextbillion.io/maps/api/css" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<div style="position: absolute; top: 20px; left: 20px; z-index: 999;">
<button style="padding: 12px 6px;" id="btnAddPolygon">Add a Polygon</button>
<button style="padding: 12px 6px;" id="btnRemovePolygon">Remove a Polygon</button>
</div>
<script src="https://maps.nextbillion.io/maps/api/js"></script>
<script>
;(function () {
var loc = { lat: 1.3521, lng: 103.8198 }
var loc2 = { lat: 1.3921, lng: 103.8198 }
var loc3 = { lat: 1.3921, lng: 103.8798 }
var loc4 = { lat: 1.3721, lng: 103.8298 }
var map = new nextbillion.maps.Map(document.getElementById('map'), {
zoom: 11,
center: loc,
editable: true,
})
var polygon = new nextbillion.maps.Polygon({
path: [[loc, loc2, loc3]],
map: map,
})
var circle = new nextbillion.maps.Circle({
center: loc4,
map: map,
strokeColor: 'green',
fillColor: 'green',
radius: 1000,
})
polygon.enableEdit()
circle.enableEdit()
var polygons = [polygon]
var elButtonAdd = document.querySelector('#btnAddPolygon')
elButtonAdd.onclick = function (e) {
var polygon = new nextbillion.maps.Polygon({
path: [[locationTsingtao, locationTsingtao2, locationTsingtao3]],
map: map,
})
polygon.enableEdit()
polygons.push(polygon)
}
var elButtonRemove = document.querySelector('#btnRemovePolygon')
elButtonRemove.onclick = function (e) {
var polygon = polygons.pop()
if (polygon) {
polygon.remove()
}
}
})()
</script>
</body>
</html>