Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
113 lines (91 sloc) 4.72 KB
<!DOCTYPE html>
<title>Convex hull and HTML markers - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to calculate a convex hull for a set of HTML markers." />
<meta name="keywords" content="map, gis, API, SDK, geospatial, spatial math, math, convex hull, markers" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<script type='text/javascript'>
var map, datasource, positions = [];
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-90, 35],
zoom: 3,
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
//Wait until the map resources are ready.'ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
//Create a layer to render the convex hull as a polygon on the map.
map.layers.add(new atlas.layer.PolygonLayer(datasource));
//Load some HTML markers onto the map.
//Calculate the initial convex hull.
function loadMarkers() {
//Generate some random HTML markers and make them draggable.
for (var i = 0; i < 15; i++) {
//Calculate a random position over the USA.
var p = [
Math.random() * 40 - 120,
Math.random() * 20 + 30
//Store the positions in a seperate array for faster updates.
//Create a draggable HTML marker.
var m = new atlas.HtmlMarker({
draggable: true,
position: p
//Store the index information in the properties of the HTML marker. = { idx: i };
//Add a drag event to get the position of the marker.'drag', m, function (e) {
//Update the cooresponding position in the positions array.
positions[] =;
//Calculate a new convex hull.
//Add the marker to the map.
function calculateConvexHull() {
//Calculate the convex hull from the positions.
var hull = atlas.math.getConvexHull(positions);
//Update the data source with the new convex hull polygon.
//Calculate the area and perimeter of the convex hull.
var p = atlas.math.getLengthOfPath(hull.coordinates[0], 'miles');
var a = atlas.math.getArea(hull, 'squareMiles', 1);
document.getElementById('measurementTbx').innerHTML = `Perimeter: ${Math.round(p*10)/10} miles<br\>Area: ${a} sq miles`;
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div id="measurementTbx" style="position:absolute;top:10px;left:10px;background-color:white;border-radius:10px;padding:10px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Convex hull and HTML markers</legend>
This sample shows how to calculate a convex hull for a set of HTML markers. Drag the markers on the map to see the convex hull update.
A convex hull is a shape that represents that minimum convex geometry that encloses all shapes in the specified data set.
Additionally, the perimeter and area of the convex hull are also calculated.
You can’t perform that action at this time.