xxxxxxxxxx<script src="//d3js.org/d3.v3.min.js"></script><script src="pixymaps.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").call(drag), 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());function drag(selection) { var p0; selection .on("mousedown", mousedown); d3.select(window) .on("mousemove", mousemove) .on("mouseup", mouseup); function mousedown() { p0 = [d3.event.pageX, d3.event.pageY]; d3.event.preventDefault(); } function mousemove() { if (p0) { var p1 = [d3.event.pageX, d3.event.pageY]; view.panBy([p1[0] - p0[0], p1[1] - p0[1]]); image.render(canvas.node()); p0 = p1; d3.event.preventDefault(); } } function mouseup() { if (p0) { p0 = null; d3.event.preventDefault(); } }}</script><div id="copy"> © 2011 <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>.</div> https://d3js.org/d3.v3.min.js