D3 Examples - d3.geo.tiler

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mbostock/d3/v1.8.4/d3.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mbostock/d3/v1.8.4/d3.geo.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/simplegeo/polymaps/v2.4.0/polymaps.js"></script>
    <script type="text/javascript" src="tiler.js"></script>
    <style type="text/css">
​
@import url("https://cdn.rawgit.com/simplegeo/polymaps/v2.4.0/examples/example.css");
​
html, body {
  height: 100%;
  background: #E6E6E6;
  margin: 0;
  font: 10px sans-serif;
}
​
svg {
  display: block;
}
​
circle {
  stroke: black;
  fill: brown;
  fill-opacity: .5;
}
​
#map {
  width: 960px;
  height: 500px;
}
​
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">
​
var po = org.polymaps;
​
// Create the map object, add it to #map…
var map = po.map()
    .container(d3.select("#map").append("svg:svg").node())
    .zoom(8)
    .add(po.drag())
    .add(po.wheel().smooth(false))
    .add(po.dblclick())
    .add(po.arrow());
​
// Add the CloudMade image tiles as a base layer…
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.", ""])));
​
// Add the custom stations layer…
map.add(stations("stations.json"));
​
// Add the compass control on top.
map.add(po.compass()
    .pan("none"));
​
// Custom layer implementation.
function stations(url) {
​
  // Create the tiler, for organizing our points into tile boundaries.
  var tiler = d3.geo.tiler()
      .zoom(11)
      .location(function(d) { return d.value; });
​
  // Create the base layer object, using our tile factory.
  var layer = po.layer(load);
​
  // Load the station data. When the data comes back, reload.
  d3.json(url, function(json) {
    tiler.points(d3.entries(json));
    layer.reload();
  });
​
  // Custom tile implementation.
  function load(tile, projection) {
    projection = projection(tile).locationPoint;
​
    // Add an svg:g for each station.
    var g = d3.select(tile.element = po.svg("g")).selectAll("g")
        .data(tiler.tile(tile.column, tile.row, tile.zoom))
      .enter().append("svg:g")
        .attr("transform", transform);
​
    // Add a circle.
    g.append("svg:circle")
        .style("fill", d3.hsl(Math.random() * 360, 1, .5))
        .attr("r", 4.5);
​
    // Add a label.
    g.append("svg:text")
        .attr("x", 7)
        .attr("dy", ".31em")
        .text(function(d) { return d.key; });
​
    function transform(d) {
      d = projection({lon: d.value[0], lat: d.value[1]});
      return "translate(" + d.x + "," + d.y + ")";
    }
  }
​
  return layer;
}
​
    </script>
  </body>
</html>
​
    