font-family: Lato, sans-serif;
color: rgba(0, 0, 0, 0.87);
border-bottom: 1px solid #039be5;
background-color: #039be5;
justify-content: flex-start;
transition: opacity 0.4s;
justify-content: space-around;
<h1 class="title sans">Export.send example</h1>
<form class="form-group">
<input class="sans" type="email" id="email" placeholder="Enter an email to send to" />
<button type="button" id="addEmailBtn" class="btn">Add email</button>
<label for="layer-select">Select Layer Type</label>
<select name="layer" id="layer-select">
<option value="Orthomosaic">Orthomosaic</option>
<option value="NDVI Toolbox">NDVI Toolbox</option>
<option value="Elevation Toolbox">Elevation Toolbox</option>
<option value="3D Model">3D Model</option>
<label for="file-format">Select File Format</label>
<select name="file-format" id="file-format">
<option value="geotiff">Geotiff</option>
<option value="jpg">JPG</option>
<option value="shapefile">Shapefile</option>
<label for="merge-box">Merge?</label>
<input type="checkbox" value="merge" id="merge-box" />
<label for="projection-value">Projection</label>
<input type="number" min="0" max="5000" value="3857" id="projection-value">
<label for="resolution-value">Resolution (0 for 'native')</label>
<input type="number" value="5" min="0" max="10" id="resolution-value">
<button type="button" id="export" class="btn">Export</button>
<span id="exportMessage"></span>
var exportBtn = document.getElementById('export');
var emailInput = document.getElementById('email');
var emailList = document.getElementById('emails');
var addEmailBtn = document.getElementById('addEmailBtn');
var layerSelect = document.getElementById('layer-select');
var exportMessage = document.getElementById('exportMessage');
var mergeCheckbox = document.getElementById('merge-box');
var projectionValue = document.getElementById('projection-value');
var resolutionValue = document.getElementById('resolution-value');
function formatEmailList(emails) {
emailList.innerHTML = '';
emailList.innerHTML = emails.map(function(email) {
return `<li class="email">${email}<i class="delete">X</i></li>`;
function addEmailToList(email) {
function deleteEmailFromList(emailIndex) {
emails.splice(emailIndex, 1);
.then(function(dronedeployApi) {
dronedeployApi.User.get().then(user => addEmailToList(user.email))
emailList.addEventListener('click', function(event) {
if (event.target && event.target.matches('i.delete')) {
var index = emails.indexOf(event.target.value);
deleteEmailFromList(index);
exportBtn.addEventListener('click', function(event) {
dronedeployApi.Exporter.send({
layer: layerSelect.value,
merge: mergeCheckbox.checked ? true : false,
projection: projectionValue.value,
resolution: resolutionValue.value === 0 ? 'native' : resolutionValue.value
.then(function(exportId) {
dronedeployApi.Messaging.showToast('Export successful! Id: ' + exportId, {
dronedeployApi.Messaging.showToast(error, {
addEmailBtn.addEventListener('click', function(event) {
var newEmail = emailInput.value;
addEmailToList(newEmail);