<div>First 4 Tiles At Zoom Level 20</div>
<div id="tile-list"></div>
function getTilesFromGeometry(geometry, template, zoom){
function long2tile(lon,zoom) {
return (Math.floor((lon+180)/360*Math.pow(2,zoom)));
function lat2tile(lat,zoom) {
return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom)));
function replaceInTemplate(point){
return template.replace('{z}', point.z)
.replace('{y}', point.y);
var allLat = geometry.map(function(point){
var allLng = geometry.map(function(point){
var minLat = Math.min.apply(null, allLat);
var maxLat = Math.max.apply(null, allLat);
var minLng = Math.min.apply(null, allLng);
var maxLng = Math.max.apply(null, allLng);
var top_tile = lat2tile(maxLat, zoom); // eg.lat2tile(34.422, 9);
var left_tile = long2tile(minLng, zoom);
var bottom_tile = lat2tile(minLat, zoom);
var right_tile = long2tile(maxLng, zoom);
for (var y = top_tile; y < bottom_tile + 1; y++) {
for (var x = left_tile; x < right_tile + 1; x++) {
tiles.push(replaceInTemplate({x, y, z: zoom}))
var tileList = document.querySelector('#tile-list');
new DroneDeploy({version: 1}).then(function(dronedeploy){
dronedeploy.Plans.getCurrentlyViewed().then(function(plan){
dronedeploy.Tiles.get({planId: plan.id, layerName: 'ortho', zoom: zoom})
const tiles = getTilesFromGeometry(plan.geometry, res.template, zoom);
tileList.innerHTML = tiles.slice(0, 4).map((tileUrl) => {
return '<div style="display: flex; flex: 25;"><img src="'+tileUrl+'"></img></div>'