Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active Feb 8, 2016
Embed
What would you like to do?
Pale Dawn
license: gpl-3.0

The “Pale Dawn” tileset has a calm, restrained style designed to work well with lots of data points. It’s less about the geographical information as such, and more about providing a suitable background to foreground information.

This map is constructed using a single image layer of CloudMade tiles. The tiles are in spherical mercator coordinates, and the map has standard interaction controls, so this basic example is a useful starting point for customization. Register a developer account with CloudMade for your own API key.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://github.com/simplegeo/polymaps/raw/v2.2.0/polymaps.min.js"></script>
<style type="text/css">
@import url("http://github.com/simplegeo/polymaps/raw/v2.2.0/examples/example.css");
html, body {
height: 100%;
}
svg {
display: block;
}
</style>
</head>
<body id="map">
<script type="text/javascript">
var po = org.polymaps;
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.add(po.interact())
.add(po.hash());
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
map.add(po.compass()
.pan("none"));
</script>
<span id="copy">
&copy; 2010
<a href="http://www.cloudmade.com/">CloudMade</a>,
<a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors,
<a href="http://creativecommons.org/licenses/by-sa/2.0/">CCBYSA</a>.
</span>
</body>
</html>
@mctuva

This comment has been minimized.

Copy link

@mctuva mctuva commented Sep 8, 2015

Doesn't work in Chrome (Version 45.0.2454.85 m (64-bit)) or IE (Version 11.0.9600.17207) on Windows 7.

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