Skip to main content
100%

SVG slippy map using Viewbox with D3

✓ Published0🌍 Public
ZZJONSSON
Last edited Oct 5, 2011
Created on Oct 5, 2011

An interactive slippy map displays CloudMade tiles inside an SVG element, with D3.js managing tile loading and viewBox coordinates. Panning and zooming manipulate the SVG viewBox directly, keeping tile coordinates static. The svg_interact module handles mouse events and wheel zoom, while svg_map calculates visible tiles and fetches them as raster images via CloudMade's tile API. The map supports continuous zoom levels and only renders tiles within the current viewport.

AI-generated description

(hold shift when scrolling the mouse-wheel for now)

This is a simple slippy map that keeps the absolute coordinates of all tiles/location static, but moves the SVG viewbox as the user pans and zooms around. We can then draw SVG objects directly on the coordinate system and do not have to update location when the viewBox is changed.

There are two components to this, both standalone.

  1. svg_interact: provides pan and zoom to any svg-object by moving the viewBox
  2. svg_map: a tiler that watches the viewbox location and size at regular intervals and fetches the appropriate cloudmake tiles to cover the viewbox with some extra padding. This tiler uses the .data() method to enter and exit tiles. Another alternative might be to keep an array and push old items out as new come in. We need to discard old tiles as number of visible tiles affects performance. The graphic contents are however automatically cached by the browser.

I would really appreciate helpful hints on making this better and more d3 compatible (i.e. using pv.behavior to get better mouse functions)

Similar vizzes

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
74% match
Loading thumbnail…

Slippy map + extent indicator

The visualization combines a full-screen slippy map with a small inset globe that shows the current map extent. The globe uses an orthographic projection with radial gradients to create a shaded, three-dimensional appearance, while the main map displays Stamen tiles with an overlaid semi-transparent polygon indicating the visible region. Built with D3 v3, the example uses d3.geo.orthographic, d3.geo.path, and d3.geo.graticule, and loads world land and country boundaries from TopoJSON files, with city points from a GeoJSON places file.

FFrissAnalytics
73% match
Loading thumbnail…

Interactive Map

An interactive world map rendered as an SVG using D3.js, with pan and zoom controls. The map displays countries as gray polygons with dark borders, and allows users to click on a country to highlight it and display its label. It uses d3.geoEquirectangular for projection, d3.geoPath for rendering, and the d3.zoom behavior for interactive navigation. The map data comes from a TopoJSON file, and the visualization also responds to window resizing by recalculating zoom limits and centering the view.

CChooo4u
72% match
Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Mmbostock
72% match
Loading thumbnail…

World Map: Hover and Zoom/Pan

This example presents an interactive world map rendered in SVG using D3 v5, supporting hover effects and zoom/pan navigation. Users can explore geographic regions by moving the cursor or dragging to reposition the view, with zoom controls enabling closer inspection of specific areas. The visualization employs a projection-based mapping approach, where the map is drawn using `d3.geoPath` and geographic data is transformed into screen coordinates. Interaction is handled through D3's event system and zoom behavior, while the page layout uses fixed positioning CSS to maintain full viewport coverage for the interactive canvas.

TTristan Schrader
70% match
Loading thumbnail…

Vector Tiles

This interactive map displays road networks from Mapzen vector tiles, rendered as SVG paths over OpenStreetMap basemap tiles. The visualization uses d3-tile to manage tile loading and d3.zoom for panning and scaling, with vector data fetched from Mapzen’s tile server. Roads are styled by class (highway, minor_road, rail) and sorted by sort_key for correct layering. The projection updates dynamically with zoom, and hovering shows coordinates using d3.geoMercator inversion.

JJuanSMartinez
70% match
Loading thumbnail…

Map animation with D3.js

Choropleth maps with interactive zoom and pan are rendered using SVG shapes, colored in pink and highlighted in red on hover. Built with D3.js and the d3-geo-projection library, the map uses a Bonne projection and displays country names from the World Atlas 50m TSV and GeoJSON datasets. The code constructs map paths with `geoPath`, applies a zoom interaction via `zoom().on('zoom')`, and enables rotation through the projection, though the animation itself is not demonstrated.

YYanan Xin
69% match
Loading thumbnail…

Zoomable Map Tiles

This interactive map shows a zoomable view of OpenStreetMap tiles that smoothly pans and zooms across geographic regions. It uses the `d3.geo.tile` plugin to calculate which 256x256 tile images are visible in the viewport based on current scale and translate values, while `d3.behavior.zoom` handles user panning and zooming interactions. The tiles are rendered as `img` elements positioned absolutely, and a `d3.geo.mercator` projection inverts mouse coordinates to display the latitude and longitude at the cursor.

Mmbostock
69% match