d3-geo-zoom
Version:
Zoom and Pan D3 Geo projections
61 lines (45 loc) • 1.44 kB
HTML
<head>
<script src="//cdn.jsdelivr.net/npm/d3"></script>
<script src="//cdn.jsdelivr.net/npm/topojson"></script>
<script src="//cdn.jsdelivr.net/npm/d3-geo-zoom"></script>
<!--<script src="../../dist/d3-geo-zoom.js"></script>-->
<style>body { margin: 0 }</style>
</head>
<body>
<div id="world"></div>
<script>
const MARGIN = 5;
const width = window.innerWidth;
const height = window.innerHeight;
const canvas = d3.select('#world').append('canvas')
.attr('width', width)
.attr('height', height);
const ctx = canvas.node().getContext('2d');
const projection = d3.geoOrthographic()
.scale((Math.min(width, height)) / 2 - MARGIN)
.translate([width / 2, height / 2]);
const path = d3.geoPath()
.context(ctx)
.projection(projection);
fetch('//unpkg.com/world-atlas@1/world/110m.json').then(r => r.json()).then(world => {
render();
d3.geoZoom()
.projection(projection)
.onMove(render)
(canvas.node());
render();
//
function render() {
ctx.clearRect(0, 0, canvas.attr('width'), canvas.attr('height'));
ctx.beginPath();
path({ type: 'Sphere' });
ctx.fillStyle = 'aqua';
ctx.fill();
ctx.beginPath();
path(topojson.feature(world, world.objects.land));
ctx.fillStyle = 'maroon';
ctx.fill();
}
});
</script>
</body>