| license: mit |
An second attempt at panning and zooming with Orthographic projection. Improves upun the first attempt Orthographic Zoom I in that panning accounds for the latitude. So in this version, if you zoom into, say, Iceland, panning still has the right sensitivity, whereas it did not in the first iteration.
Still struggling to get pinch zoom and drag pan to both work on mobile.
Uses world-110m geographic shapes from TOPOJSON World Atlas.
Inspired by
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| </head> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <script> | |
| const svg = d3.select('svg'); | |
| const path = svg.append('path'); | |
| const projection = d3.geoOrthographic(); | |
| const initialScale = projection.scale(); | |
| const geoPath = d3.geoPath().projection(projection); | |
| d3.json('world-110m.json', (error, world) => { | |
| const land = topojson.feature(world, world.objects.land); | |
| const render = () => path.attr('d', geoPath(land)); | |
| render(); | |
| let rotate0, coords0; | |
| const coords = () => projection.rotate(rotate0) | |
| .invert([d3.event.x, d3.event.y]); | |
| svg | |
| .call(d3.drag() | |
| .on('start', () => { | |
| rotate0 = projection.rotate(); | |
| coords0 = coords(); | |
| }) | |
| .on('drag', () => { | |
| const coords1 = coords(); | |
| projection.rotate([ | |
| rotate0[0] + coords1[0] - coords0[0], | |
| rotate0[1] + coords1[1] - coords0[1], | |
| ]) | |
| render(); | |
| }) | |
| // Goal: let zoom handle pinch gestures (not working correctly). | |
| .filter(() => !(d3.event.touches && d3.event.touches.length === 2)) | |
| ) | |
| .call(d3.zoom() | |
| .on('zoom', () => { | |
| projection.scale(initialScale * d3.event.transform.k); | |
| render(); | |
| }) | |
| ) | |
| }); | |
| </script> | |
| </body> |
