DroneDeploy
Search…
Map API Example
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Document</title>
6
</head>
7
<body>
8
9
<button id="image-overlay">Add Image Overlay</button>
10
<button id="tile-layer">Add TileLayer</button>
11
<button id="pan-map">Pan Map</button>
12
<button id="red-polygon">Add Red Polygon</button>
13
14
<script>
15
var $ = document.querySelector.bind(document);
16
new DroneDeploy({ version: 1 }).then(function(dronedeploy){
17
function getPlanGeometry(){
18
return dronedeploy.Plans.getCurrentlyViewed()
19
.then(function(plan){
20
return plan.geometry
21
})
22
}
23
24
function putImageOverGeometry(geometry){
25
dronedeploy.Map.addImageOverlay(
26
"https://pbs.twimg.com/profile_images/740441209265606656/eYeOjy5i.jpg",
27
geometry
28
).subscribe(function(overlay){})
29
}
30
31
$('#image-overlay').addEventListener('click', function(){
32
getPlanGeometry().then(putImageOverGeometry);
33
});
34
35
$('#tile-layer').addEventListener('click', function(){
36
dronedeploy.Map.addTileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGFuaWVscmFzbXVzb24yIiwiYSI6ImNpajM3anR2ODAwNGJ1eGtuNXFtbXhqMTMifQ.u3dqaFnALVDcqWyGu6Oq-w')
37
.subscribe()
38
});
39
40
$('#pan-map').addEventListener('click', function(){
41
getPlanGeometry().then(function(geometry){
42
dronedeploy.Map.panTo(geometry[0], {zoom: 18});
43
});
44
});
45
46
$('#red-polygon').addEventListener('click', function(){
47
getPlanGeometry().then(function(geometry){
48
dronedeploy.Map.addPolygon(geometry, {color: 'red', fillColor: 'red'}).subscribe();
49
});
50
});
51
52
});
53
</script>
54
55
</body>
56
</html>
Copied!
Last modified 2yr ago
Copy link