d3 geographic tile sets

100%

d3 geographic tile sets

✓ Published0🌍 Public

Last edited Feb 5, 2019

Created on Feb 5, 2019

This example demonstrates a tile-based geographic visualization built with D3 v4, using the d3-slippy module to load and display web map tiles. The visualization cycles through multiple built-in tile sets, rendering them as SVG image tiles within a Mercator projection. It supports pan and zoom interactions, with tile depth automatically calculated from the zoom transform, and includes configurable zoom limits, tile wrapping, and source attribution. The implementation handles tile positioning for both standard cylindrical projections and attempts to address non-cylindrical tile sets, though some tilesets exhibit issues at certain zoom levels or regions. The example is rendered entirely in SVG and includes animated transitions between tile sets.

AI-generated description

Similar vizzes

Loading thumbnail…

D3-slippy map with canvas tiles

This example demonstrates a slippy map implemented with D3 v4, using canvas rendering for efficient display of OpenStreetMap tiles. The custom `d3.geoSlippy` projection wraps d3.geoMercator and integrates with d3.zoom to enable panning and zooming with proper tile loading and wrapping. Tiles are drawn directly onto a 960×960 canvas, with zoom constraints and tile depth calculated dynamically from the current transform. The map supports interactive pan and zoom while maintaining geographic accuracy through the Mercator projection.

Aandrew-reid

83% match

Loading thumbnail…

Map Tiles in D3

This interactive map demo, animated with D3, shows map tiles being loaded and positioned as users progressively zoom and pan. It provides a proof-of-concept for tile-based mapping using only D3, avoiding dedicated map libraries. The visualization fetches OpenStreetMap tiles from MapQuest’s tile server, addressing them by column, row, and zoom level. The animation uses D3's selection and transition methods, applying CSS 3D transforms via `matrixString` for smooth scaling, and manages a request queue for efficient image loading. The code demonstrates DOM manipulation and coordinate logic borrowed from Modest Maps, with a fallback to standard CSS transforms.

RRandomEtc

78% match

Loading thumbnail…

Vector Tiles - fixed

This example renders interactive vector tile maps using Mapzen vector tiles, displayed as SVG paths over a dark background. It uses d3.tile to manage tile loading and d3.zoom for pan and zoom interactions, with a d3.geoMercator projection and d3.geoPath to draw geographic features. The visualization shows roads, water, buildings, parks, and other land-use layers, each styled with distinct colors and stroke widths. Tile data is fetched as GeoJSON from Mapzen’s tile server and rendered dynamically, with a coordinate readout displayed at the bottom.

Aamortka

77% match

Loading thumbnail…

Tile Viewer

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

Mmbostock

77% match

Loading thumbnail…

d3-tile wrapping

This example displays an interactive SVG world map using tiled raster images from OpenStreetMap, with tile-wrapping toggled by a checkbox. The visualization relies on the `d3-tile` library’s `tile.wrap` method to generate tile coordinates, and `d3.geoMercator` with `d3.geoPath` for the projection. An HTML form checkbox controls the `wrap` flag, triggering a `loadTiles` function that rebuilds the image layer. Each tile is fetched from the `a.b.c.tile.openstreetmap.org` subdomains. The map’s scale and translation are computed and applied via SVG group transforms.

CCurran Kelleher

77% match

Loading thumbnail…

d3-slippy: Constraining Zoom/Pan

This example demonstrates a slippy map interface built with d3-slippy, a custom D3 v4 plugin that constrains zoom and pan to geographic limits. The map displays OpenStreetMap tiles with Mercator projection, allowing users to pan and zoom while restricting the view to valid world coordinates and tile zoom levels (between 4 and 13). A yellow polygon overlaid on the map shows a region in Uruguay, highlighting how the projection and zoom transforms interact with geographic features. The visualization uses SVG rendering and includes tile wrapping and attribution for OpenStreetMap contributors.

Aandrew-reid

77% match

Loading thumbnail…

Moon Color Hillshade Tileset

This visualization displays a slippy map of the Moon using a custom hillshade tileset, rendered as SVG with D3 v4. The map uses a Mercator projection and supports interactive pan and zoom, with tile depth computed from the zoom level. The tiles are loaded from a custom tile server, while the d3-slippy plugin handles projection, tile wrapping, and zoom constraints. The view shows lunar terrain rendered as hillshaded tiles, demonstrating how a geographic tileset can be applied to non-Earth surfaces with D3's geo and zoom capabilities.

Aandrew-reid

76% match

Loading thumbnail…

d3.carto.map - globe mode

The d3.carto.map globe mode example renders an interactive globe with multiple map layers, using D3 v3 and the d3.carto.map library. The visualization combines a stamen.trianglegrid tile layer with a recursively generated tile layer, overlaid with GeoJSON country polygons. Countries with names shorter than six characters are extracted and rendered as SVG features with a distinct styling, while the full country set is drawn to canvas. The globe supports pan and zoom via the control buttons, and a minimap rectangle indicates the current viewport. Layer toggles are provided in a control panel, allowing users to switch between tile layers and feature sets. The example demonstrates d3.carto.map's ability to blend multiple data sources and rendering modes (canvas and SVG) in a 3D globe context.This example demonstrates **d3.carto.map** in globe mode, showcasing a full-featured interactive map with multiple data layers and rendering modes. Built with D3 v3, it combines a rotatable globe with tile layers, GeoJSON features rendered to canvas, and selected countries drawn as SVG. Users can toggle layers, pan, and zoom, with styling for country borders, roads, rivers, and custom point markers. The map also includes a minimap with extent rectangle and modal info popups, illustrating the library's capacity for rich, multi-layer cartographic visualization.

AAlan McConchie

74% match