Skip to content

Instantly share code, notes, and snippets.

@YenTheFirst

YenTheFirst/index.html

Forked from mlevans/index.html
Created May 26, 2011 17:57
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save YenTheFirst/993639 to your computer and use it in GitHub Desktop.
Save YenTheFirst/993639 to your computer and use it in GitHub Desktop.
Download ZIP
Displaying Map Tiles from TileStream
Raw
index.html
<!Doctype html>
<html>
<head>
<title>311 Density</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://github.com/CloudMade/Leaflet/raw/master/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="https://github.com/CloudMade/Leaflet/raw/master/dist/leaflet.ie.css" /><![endif]-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="https://github.com/CloudMade/Leaflet/raw/master/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
var map = new L.Map('map');
var tileMillUrl = 'http://ec2-184-73-13-139.compute-1.amazonaws.com:8888/1.0.0/control_room/{z}/{x}/{y}.png';
cloudmadeAttribution = '&copy 2011',
cloudmade = new L.TileLayer(tileMillUrl, {maxZoom: 4, attribution: cloudmadeAttribution});
cloudmade.getTileUrl = function(tilePoint, zoom){
var subdomains = this.options.subdomains,
s = this.options.subdomains[(tilePoint.x + tilePoint.y) % subdomains.length];
return_url = this._url
.replace('{s}', s)
.replace('{z}', zoom)
.replace('{x}', tilePoint.x)
.replace('{y}', Math.pow(2,zoom) - tilePoint.y -1);
console.debug("url = " + return_url + " & x, y, z = " + tilePoint.x+","+tilePoint.y+","+zoom)
return return_url;
};
map.setView(new L.LatLng(0, 0), 2).addLayer(cloudmade);
});
</script>
</body>
</html>
@YenTheFirst
Copy link
Author

the replacement getTileUrl translates our x,y,zoom into TileStream's format (y is bottom-to-top, not top-to bottom)
Possible bug if the origin is not the lower-left bound. how do we get the origin from tilestream?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment