D3 Examples - Pale Dawn

Pale Dawn

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://github.com/simplegeo/polymaps/raw/v2.2.0/polymaps.min.js"></script>
    <style type="text/css">
​
@import url("https://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("https://{S}tile.cloudmade.com"
    + "/1a1b06b230af4efdbb989ea99e9841af" // https://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="https://www.cloudmade.com/">CloudMade</a>,
      <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,
      <a href="https://creativecommons.org/licenses/by-sa/2.0/">CCBYSA</a>.
    </span>
  </body>
</html>
​
    