D3 Examples - Pixymaps (Scrolling)

xxxxxxxxxx
 
<!DOCTYPE html>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="pixymaps.min.js"></script>
<style>
​
body {
  font: 10px sans-serif;
}
​
#container {
  width: 960px;
  height: 500px;
  overflow: hidden;
}
​
</style>
<div id="container">
  <canvas id="map"></canvas>
</div>
<script>
​
var canvas = d3.select("#map"),
    context = canvas.node().getContext("2d");
​
var w = 960,
    h = 500,
    lon = -122.41948,
    lat = 37.76487;
​
var project = d3.geo.mercator()
    .scale(1 / (2 * Math.PI))
    .translate([.5, .5]);
​
var view = pixymaps.view()
    .size([w, h])
    .center(project([lon, lat]))
    .zoom(12);
​
var image = pixymaps.image()
    .view(view)
    .url(pixymaps.url("https://{S}tile.cloudmade.com"
    + "/1a1b06b230af4efdbb989ea99e9841af" // https://cloudmade.com/register
    + "/999/256/{Z}/{X}/{Y}.png")
    .hosts(["a.", "b.", "c.", ""]))
    .render(canvas.node());
​
var speed = 0,
    acceleration = -.05;
​
d3.timer(function() {
  speed = Math.max(-5, speed + acceleration);
  view.panBy([speed, 0]);
  image.render(canvas.node());
});
​
</script>
​
    