DroneDeploy
Search…
Introduction
App Platform
Exporter.send
1
<!DOCTYPE html>
2
<html lang="en">
3
​
4
<head>
5
<meta charset="UTF-8">
6
<title>Document</title>
7
<style>
8
.title {
9
font-size: 1.3em;
10
font-weight: 500;
11
}
12
​
13
.sans {
14
font-family: Lato, sans-serif;
15
color: rgba(0, 0, 0, 0.87);
16
}
17
​
18
label {
19
font-weight: 300;
20
}
21
​
22
input,
23
select {
24
border: none;
25
border-radius: 0;
26
border-bottom: 1px solid #039be5;
27
min-width: 30%;
28
max-width: 100%;
29
font-size: 0.8em;
30
margin-left: auto;
31
}
32
​
33
input[type="email"] {
34
width: 100%;
35
}
36
​
37
.btn {
38
border: none;
39
background-color: #039be5;
40
/*border-radius: 5px;*/
41
font-size: 14px;
42
font-family: Lato;
43
font-weight: 500;
44
color: white;
45
padding: 10px 16px;
46
margin-top: 10px;
47
flex-basis: 100%;
48
width: 100%;
49
}
50
​
51
#emails {
52
padding: 0;
53
}
54
​
55
.form-group {
56
width: 100%;
57
display: inline-flex;
58
justify-content: flex-start;
59
}
60
​
61
.delete {
62
opacity: 0;
63
transition: opacity 0.4s;
64
margin-left: 10px;
65
margin-right: 5px;
66
font-family: sans-serif;
67
}
68
​
69
.email {
70
display: inline-flex;
71
list-style: none;
72
border: 1px solid #333;
73
border-radius: 25px;
74
text-align: center;
75
padding: 5px;
76
justify-content: space-around;
77
}
78
​
79
.email:hover .delete {
80
opacity: 1;
81
cursor: pointer;
82
}
83
</style>
84
</head>
85
​
86
<body>
87
<h1 class="title sans">Export.send example</h1>
88
<form class="form-group">
89
<input class="sans" type="email" id="email" placeholder="Enter an email to send to" />
90
</form>
91
<button type="button" id="addEmailBtn" class="btn">Add email</button>
92
<ol id="emails"></ol>
93
<br />
94
<div class="form-group">
95
<label for="layer-select">Select Layer Type</label>
96
<select name="layer" id="layer-select">
97
<option value="Orthomosaic">Orthomosaic</option>
98
<option value="NDVI Toolbox">NDVI Toolbox</option>
99
<option value="Elevation Toolbox">Elevation Toolbox</option>
100
<option value="3D Model">3D Model</option>
101
</select>
102
</div>
103
<br>
104
<div class="form-group">
105
<label for="file-format">Select File Format</label>
106
<select name="file-format" id="file-format">
107
<option value="geotiff">Geotiff</option>
108
<option value="jpg">JPG</option>
109
<option value="shapefile">Shapefile</option>
110
</select>
111
</div>
112
<br>
113
<div class="form-group">
114
<label for="merge-box">Merge?</label>
115
<input type="checkbox" value="merge" id="merge-box" />
116
</div>
117
<br>
118
<div class="form-group">
119
<label for="projection-value">Projection</label>
120
<input type="number" min="0" max="5000" value="3857" id="projection-value">
121
</div>
122
<br>
123
<div class="form-group">
124
<label for="resolution-value">Resolution (0 for 'native')</label>
125
<input type="number" value="5" min="0" max="10" id="resolution-value">
126
</div>
127
<br>
128
<button type="button" id="export" class="btn">Export</button>
129
<span id="exportMessage"></span>
130
<script>
131
var exportBtn = document.getElementById('export');
132
var emailInput = document.getElementById('email');
133
var emailList = document.getElementById('emails');
134
var addEmailBtn = document.getElementById('addEmailBtn');
135
var layerSelect = document.getElementById('layer-select');
136
var exportMessage = document.getElementById('exportMessage');
137
var mergeCheckbox = document.getElementById('merge-box');
138
var projectionValue = document.getElementById('projection-value');
139
var resolutionValue = document.getElementById('resolution-value');
140
var emails = [];
141
​
142
function formatEmailList(emails) {
143
emailList.innerHTML = '';
144
emailList.innerHTML = emails.map(function(email) {
145
//es6 template string
146
return `<li class="email">${email}<i class="delete">X</i></li>`;
147
}).join('');
148
}
149
​
150
function addEmailToList(email) {
151
emails.push(email);
152
formatEmailList(emails);
153
emailInput.value = '';
154
}
155
​
156
function deleteEmailFromList(emailIndex) {
157
emails.splice(emailIndex, 1);
158
formatEmailList(emails);
159
}
160
​
161
new DroneDeploy({
162
version: 1
163
})
164
.then(function(dronedeployApi) {
165
dronedeployApi.User.get().then(user => addEmailToList(user.email))
166
emailList.addEventListener('click', function(event) {
167
if (event.target && event.target.matches('i.delete')) {
168
var index = emails.indexOf(event.target.value);
169
deleteEmailFromList(index);
170
}
171
})
172
exportBtn.addEventListener('click', function(event) {
173
event.preventDefault();
174
​
175
​
176
dronedeployApi.Exporter.send({
177
layer: layerSelect.value,
178
email: emails,
179
merge: mergeCheckbox.checked ? true : false,
180
projection: projectionValue.value,
181
resolution: resolutionValue.value === 0 ? 'native' : resolutionValue.value
182
})
183
.then(function(exportId) {
184
dronedeployApi.Messaging.showToast('Export successful! Id: ' + exportId, {
185
timeout: -1
186
});
187
},
188
function(error) {
189
dronedeployApi.Messaging.showToast(error, {
190
timeout: -1
191
});
192
}
193
);
194
});
195
​
196
addEmailBtn.addEventListener('click', function(event) {
197
var newEmail = emailInput.value;
198
addEmailToList(newEmail);
199
});
200
});
201
</script>
202
</body>
203
​
204
</html>
Copied!
Last modified 3yr ago
Copy link