mapbox-gl
Version:
A WebGL interactive maps library
96 lines (84 loc) • 2.67 kB
HTML
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="mapbox-gl-draw.css" />
<script type="text/javascript" src="mapbox-gl-draw.js"></script>
<script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js"></script>
<style>
.calculation-box {
height: 140px;
width: 150px;
position: absolute;
top: 210px;
left: 10px;
background-color: rgba(255, 255, 255, .9);
padding: 15px;
text-align: center;
}
#calculate {
min-height: 20px;
background-color: #3887be;
color: #fff;
font-family: 'Open Sans';
border-radius: 5px;
padding: 10px;
cursor: pointer;
margin: 10px 0;
}
p {
font-family: 'Open Sans';
margin: 0;
font-size: 13px;
}
</style>
<div id='map'></div>
<div class='calculation-box'>
<p>Draw a polygon using the draw tools.</p>
<div id='calculate' class='button button'>Calculate area</div>
<div id='calculated-area'></div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibW9sbHltZXJwIiwiYSI6ImNpazdqbGtiZTAxbGNocm0ybXJ3MnNzOHAifQ.5_kJrEENbBWtqTZEv7g1-w';
/* eslint-disable */
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/satellite-v9', //hosted style id
center: [-91.874, 42.760], // starting position
zoom: 12 // starting zoom
});
var draw = mapboxgl.Draw({
drawing: true,
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
}
});
map.addControl(draw);
var calcButton = document.getElementById('calculate');
calcButton.onclick = function() {
var data = draw.getAll();
if (data.features.length > 0) {
var area = turf.area(data);
// restrict to area to 2 decimal points
var rounded_area = Math.round(area*100)/100;
var answer = document.getElementById('calculated-area');
answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>';
} else {
alert("Use the draw tools to draw a polygon!");
}
};
</script>
</body>
</html>