Fullscreen Seamless Zoomable Map Tiles / Fil

Fil

Vocateur.

Workspace

Published

Geo

Edited

Mar 5, 2020

Fork of Seamless zoomable map tiles

•

1 fork

7 stars

Geo

Contour Labels (canvas)Coordinated maps geoformat Small circle test Kruskal Maze All the geoshapes Reprojecting Vector Tiles Cloud Contours Hello h3-js Clipping Albers Translucent Earth The truth about the Mercator projection Using d3-inertia with observable Mercator projection of a Mercator globe D3 Vector Tiles (WIP)Finding intersections between the graticule and the clip sphere of the stereographic projection, method 2 Plate tectonics Another hex map Equateur & tropiques Tissot's indicatrix Distance to shore MultiPolygon clipping South Africa’s medial axis Spherical intersection Volcano Semis (points circulaires)Pencil Airocean 45° map NetCDF Blue noise sphere Rubber Dymaxion Spherical quasi-random (R2) distribution Automated label placement (countries)Automated label placement (France)Automated label placement (cities)d3.geoIntersectArc Delaunay.findTriangle d3-geo-voronoi and gridded data Elevation vtk.js Mapfill Kriging Spherical Heatmap Reproject elevation tiles — detail Reproject elevation tiles — world Fisheye Conformal Map Spherical KDE Interpolation Spherical kernel interpolation with nearest neighbors Shepard’s method Modified Shepard’s method Spherical contours Geo Voronoi interpolation Blurry contours How much warmer? (BBC)H3 hexagons & geoContours Hillshading & supersampling H3 oddities Manhattan Voronoi Manhattan Voronoi II GeoJSON feature editor Colorized Manhattan Spanning Tree legra maps legra country maps The complex logarithm projection Countries small multiple The 2D approximate Newton-Raphson method Ocean Attitude Count visible objects The Gray-Fuller spatial grid Gray-Fuller grid metrics Gray-Fuller grid oddities Spherical smallest-circle problem Bounding Circles Countries Enclosing Circles

Fullscreen Seamless Zoomable Map Tiles

Map Pan & Zoom Spherical Ellipses Synchronized projections The closest country Triangular tiling of icosahedron Hello, polygon-clipping Corées / Koreas Hello, procedural-gl Hello, placekey Zoom World Choropleth Clipping spherical polygons Spherical phyllotaxis Four-color world map with Clingo Hello, jsgeoda!The Sun’s analemma World of squares World of squares (spherical)A map of Africa Tagged borders Clipped geoVoronoi Blue noise sphere II Spherical Perlin Noise Spherical Delaunay triangulation Dynamic simplification Rewind Plot: Voronoi labels AoC 12: shortest path under constraints Hello, pixi.js Flight Paths Ray out of a convex hull Distance to a segment

map = {

const svg = d3

.create("svg")

.attr("viewBox", [0, 0, width, height])

.attr("id", "map");

const tile = d3

.tile()

.extent([[0, 0], [width, height]])

.tileSize(256)

.clampX(false);

const zoom = d3

.zoom()

.scaleExtent([1 << 8, 1 << 25])

.extent([[0, 0], [width, height]])

.on("zoom", () => zoomed(d3.event.transform));

const levels = svg

.append("g")

.attr("pointer-events", "none")

.selectAll("g")

.data(deltas)

.join("g");

svg.call(zoom).call(zoom.transform, transform);

function zoomed(t) {

transform.x = t.x;

transform.y = t.y;

transform.k = t.k;

levels.each(function(delta) {

const tiles = tile.zoomDelta(delta)(transform);

d3.select(this)

.selectAll("image")

.data(tiles, d => d)

.join("image")

.attr("xlink:href", d => url(...d3.tileWrap(d)))

.attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale)

.attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale)

.attr("width", tiles.scale)

.attr("height", tiles.scale);

});

}

return svg.node();

}

deltas = [-100, -4, -1, 0]

transform = {

return this || d3.zoomIdentity.translate(width >> 1, height >> 1).scale(1 << 12);

}

url = (x, y, z) => `https://tile.opentopomap.org/${z}/${x}/${y}.png`

height = Math.ceil((width * screen.height) / screen.width)

d3 = require("d3@5", "d3-tile@1")

import { fullscreen } from "@fil/fullscreen"

fullscreen(map, { center: false })

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more