D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Andrew-Reid
Full window
Github gist
D3-slippy map with canvas tiles
Initial testing canvas for
d3-slippy
.
<!DOCTYPE html> <meta charset="utf-8"> <canvas width="960" height="960"></canvas> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="d3-slippy.js"></script> <script> // Canvas: var canvas = d3.select("canvas"); var context = canvas.node().getContext("2d"); // Set up a slippy projection var slippy = d3.geoSlippy() .tileSet("") .size(canvas); // Set up a path generator var path = d3.geoPath().projection(slippy.projection()); // Set zoom properties var zoom = d3.zoom() .on("zoom",zoomed) .translateExtent(slippy.zoomTranslateConstrain()) .scaleExtent([1,128]); // Call zoom and set initial zoom canvas .call(zoom) .call(zoom.transform, slippy.zoomIdentity()); // Apply zoom function zoomed() { // Update projection. slippy.zoomTransform(d3.event.transform) // Update raster tiles: slippy.canvas(context); } </script>
https://d3js.org/d3.v4.min.js