Here is my tile template
https://public-tiles.dronedeploy.com/1483655752_DANIELOPENPIPELINE_ortho_oet/{z}/{x}/{y}.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9wdWJsaWMtdGlsZXMuZHJvbmVkZXBsb3kuY29tLzE0ODM2NTU3NTJfREFOSUVMT1BFTlBJUEVMSU5FX29ydGhvX29ldC8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNDg2NDE2NjE2fX19XX0_&Signature=edPjUkREQB6pgv~VBJVkI4CgZI673ahY6UfEdVtkJu-SnnNCKNcWwpsbtOTjgbaCEw0zCsn625XSSXUMRGqTGdTjn36Z1haKMkX6tnW-EqggCkcH52h0kkWUM6gXclIaXsQNlUwTVe5AczE687WovEf4b1iAHbYefHt-FLxEY91ZUltbzIhh850LoW4mSMxRd691oSKqXfVzgJHZv8CHENk26D1BRuU3cDiY2khXPnEtHLC-~vz3bqNrOpdc0Al-D-Khz4ZXtOUxCwkT9U8dKU0o0a8pxT15rQSA6ocWo5eS5gHpk0HulxaD840rV6Sn8uju13Xjt3ob1UCqJkyt5g__&Key-Pair-Id=APKAJXGC45PGQXCMCXSA
And if you replace /{z}/{x}/{y}/
It does render an image.
https://public-tiles.dronedeploy.com/1483655752_DANIELOPENPIPELINE_ortho_oet/17/31400/48592.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9wdWJsaWMtdGlsZXMuZHJvbmVkZXBsb3kuY29tLzE0ODM2NTU3NTJfREFOSUVMT1BFTlBJUEVMSU5FX29ydGhvX29ldC8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNDg2NDE2NjE2fX19XX0_&Signature=edPjUkREQB6pgv~VBJVkI4CgZI673ahY6UfEdVtkJu-SnnNCKNcWwpsbtOTjgbaCEw0zCsn625XSSXUMRGqTGdTjn36Z1haKMkX6tnW-EqggCkcH52h0kkWUM6gXclIaXsQNlUwTVe5AczE687WovEf4b1iAHbYefHt-FLxEY91ZUltbzIhh850LoW4mSMxRd691oSKqXfVzgJHZv8CHENk26D1BRuU3cDiY2khXPnEtHLC-~vz3bqNrOpdc0Al-D-Khz4ZXtOUxCwkT9U8dKU0o0a8pxT15rQSA6ocWo5eS5gHpk0HulxaD840rV6Sn8uju13Xjt3ob1UCqJkyt5g__&Key-Pair-Id=APKAJXGC45PGQXCMCXSA
But when I use mapbox-gls tiles: [] it loads the images but does not render them to the map.
Below is the code I'm using.
<!DOCTYPE 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.30.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuaWVscmFzbXVzb24yIiwiYSI6ImNpajM3anR2ODAwNGJ1eGtuNXFtbXhqMTMifQ.u3dqaFnALVDcqWyGu6Oq-w';
var map = new mapboxgl.Map({
container: 'map', // container id
center: [-93.75562777777778, 42.13104722222222], // starting position
zoom: 15, // starting zoom,
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"url": "mapbox://mapbox.satellite",
"tileSize": 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
});
map.on('load', function(){
map.addSource('dronedeploy-tiles', {
"type": "raster",
"tiles": ["https://public-tiles.dronedeploy.com/1483655752_DANIELOPENPIPELINE_ortho_oet/{z}/{x}/{y}.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9wdWJsaWMtdGlsZXMuZHJvbmVkZXBsb3kuY29tLzE0ODM2NTU3NTJfREFOSUVMT1BFTlBJUEVMSU5FX29ydGhvX29ldC8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNDg2NDE2NjE2fX19XX0_&Signature=edPjUkREQB6pgv~VBJVkI4CgZI673ahY6UfEdVtkJu-SnnNCKNcWwpsbtOTjgbaCEw0zCsn625XSSXUMRGqTGdTjn36Z1haKMkX6tnW-EqggCkcH52h0kkWUM6gXclIaXsQNlUwTVe5AczE687WovEf4b1iAHbYefHt-FLxEY91ZUltbzIhh850LoW4mSMxRd691oSKqXfVzgJHZv8CHENk26D1BRuU3cDiY2khXPnEtHLC-~vz3bqNrOpdc0Al-D-Khz4ZXtOUxCwkT9U8dKU0o0a8pxT15rQSA6ocWo5eS5gHpk0HulxaD840rV6Sn8uju13Xjt3ob1UCqJkyt5g__&Key-Pair-Id=APKAJXGC45PGQXCMCXSA"],
"tileSize": 256
});
map.addLayer({
"id": "dronedeploy-tiles",
"type": "raster",
"source": "dronedeploy-tiles",
"minzoom": 0,
"maxzoom": 22,
'layout': {
'visibility': 'visible'
},
});
});
</script>
</body>
</html>
Any help would be greatly appreciated.
Thanks!