Skip to content

Instantly share code, notes, and snippets.

@answerquest
Created July 20, 2015 17:32
Show Gist options
  • Select an option

  • Save answerquest/ec6d1afde14f6bc3c9dd to your computer and use it in GitHub Desktop.

Select an option

Save answerquest/ec6d1afde14f6bc3c9dd to your computer and use it in GitHub Desktop.
List all map tiles coming within specified lat-long bounds for a range of zoom levels
<html>
<head>
<meta charset="utf-8" />
<title>Tiles Lister</title>
</head>
<body>
Long-min <input id="longMin" value=73.73577>
...........Long-max <input id="longMax" value=73.98056>
<br><br><br>
Lat-max <input id="latMax" value=18.62933>
<br><br><br>
Lat-min <input id="latMin" value=18.42522>
<br><br><br>
zoom-min <input id="zoomMin" value=10>
...........zoom-max <input id="zoomMax" value=17>
<br><br>
Mapwarper id: <input id="tileSource" value=9881> <small> like 9881 in http://mapwarper.net/maps/9881 </small>
<br><br>
<input type="button" value="calculate tiles" onclick="calcTiles()">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
tick this box to list URLs also:<input type="checkbox" id="listURLs"> <small>(warning: can hang your browser if too many tiles)</small>
<br><br>
<textarea id="out" rows=20 cols=100></textarea>
<textarea id="urls" rows=20 cols=100></textarea>
<script>
function getTileURL(lat, lon, zoom) {
// From http://jsfiddle.net/84P9r/ : To get tile on clicking
var xtile = parseInt(Math.floor( (lon + 180) / 360 * (1<<zoom) ));
var ytile = parseInt(Math.floor( (1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat* Math.PI / 180)) / Math.PI) / 2 * (1<<zoom) ));
//return "" + zoom + "/" + xtile + "/" + ytile;
//modifying this to directly show mapwarper tile
//var mapwarperURL = 'http://mapwarper.net/maps/tile/'+tileSource+ '/' +zoom+ '/' +xtile+ '/' +ytile+ '.png';
//return '<a href="'+mapwarperURL+'" target="_blank">'+mapwarperURL+'</a>';
return [xtile,ytile];
}
function calcTiles() {
document.getElementById('out').value = "";
document.getElementById('urls').value = "";
var numTiles = 0, totalTiles = 0;
var longMin = parseFloat(document.getElementById('longMin').value);
var longMax = parseFloat(document.getElementById('longMax').value);
var latMin = parseFloat(document.getElementById('latMin').value);
var latMax = parseFloat(document.getElementById('latMax').value);
var zoomMin = parseInt(document.getElementById('zoomMin').value);
var zoomMax = parseInt(document.getElementById('zoomMax').value);
var tileSource = document.getElementById('tileSource').value;
// xtile proportional to longitude. ytile inv. prop. to latitude
// so minimum xtile, ytile from latMax,longMin
// maximum xtile, ytile from latMin,longMax
for ( var z=zoomMin; z <= zoomMax; z++) {
var minTile = getTileURL(latMax,longMin,z);
var maxTile = getTileURL(latMin,longMax,z);
document.getElementById('out').value += "\n\nZoom: "+z;
document.getElementById('out').value += "\n minTile: "+minTile;
document.getElementById('out').value += "\n maxTile: "+maxTile;
numTiles = (maxTile[0]-minTile[0]+1) * (maxTile[1]-minTile[1]+1);
document.getElementById('out').value += "\n Number of tiles: "+numTiles;
totalTiles += numTiles;
//var mapwarperURL = 'http://mapwarper.net/maps/tile/'+tileSource+ '/' +zoom+ '/' +xtile+ '/' +ytile+ '.png';
//var tileSource=9969;
if ( document.getElementById("listURLs").checked ) {
for (var x=minTile[0]; x<=maxTile[0]; x++) {
for (var y=minTile[1]; y<=maxTile[1]; y++) {
var mapwarperURL = 'http://mapwarper.net/maps/tile/'+tileSource+ '/' +z+ '/' +x+ '/' +y+ '.png';
document.getElementById('urls').value += '\n' + mapwarperURL;
}
}
}
}
document.getElementById('out').value += "\n\nTotal number of tiles: "+totalTiles;
var seconds = 3;
var timeHrs = seconds * totalTiles / 3600;
document.getElementById('out').value += '\nAssuming ' + seconds + ' seconds per tile, total downloading time : '+timeHrs+ ' hrs.';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment