d3.geo.tiler

100%

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Apr 3, 2011

This example demonstrates an interactive map of weather stations in California using tiled image layers from CloudMade and custom point overlays. The `d3.geo.tiler` API organizes station locations from stations.json into a quadtree structure, enabling efficient data retrieval per map tile. The Polymaps library handles map navigation, while D3.js manages the tile-specific SVG rendering of station markers and labels. The visualization showcases the integration of D3's geographic projections with Polymaps' tile-based mapping system for scalable point data visualization.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Polymaps + D3, Part 2

This example combines Polymaps and D3 to display weather station locations across California on a tiled base map. The map uses CloudMade image tiles with a compass control, while D3 renders SVG circles and labels for each station from a JSON file. As the map pans or zooms, the `map.on("move")` event updates the marker transforms using `map.locationPoint` to project geographic coordinates into screen positions. The stations are grouped in an SVG `<g>` element inserted beneath the compass layer, with circles styled with a brown semi-transparent fill.

Mmbostock

85% match

Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock

81% match

Loading thumbnail…

Polymaps + D3

This example combines Polymaps and D3 to render an interactive map with a custom data layer. The map displays image tiles from CloudMade as a base layer, and overlays circles representing weather station locations from a local `stations.json` file. Each station is positioned using geographic coordinates projected through a `locationPoint` function within the Polymaps layer, with circle and text elements added via D3's selection API. The map includes interactive pan and zoom controls and a compass overlay.

Mmbostock

80% match

Loading thumbnail…

Tile by Bounding Box

This example demonstrates map tiles clipped to a geographic bounding box, showing California with a vector overlay of state boundaries. It uses the d3-tile library to load OpenStreetMap raster tiles, positioning them with an adjusted Mercator projection from d3.geoMercator. The projection scale and translation are computed from the bounding box, then snapped to the nearest power of two for crisp tile rendering. The SVG overlay draws a topojson mesh of U.S. states using d3.geoPath, while the tile images are appended as absolutely-positioned img elements.

Mmbostock

75% match

Loading thumbnail…

Vector Tiles

This example displays vector-tiled map data, rendering both road networks and building footprints over San Francisco. The visualization loads GeoJSON tiles from an external OpenStreetMap vector-datasource service and projects them using `d3.geo.mercator` and `d3.geo.path`. It employs the custom `d3.geo.tile` helper to compute visible tile coordinates at the current zoom level, then asynchronously fetches and draws each tile’s features as SVG paths. Road types are distinguished by stroke colors, while buildings appear as solid black polygons.

Mmbostock

74% 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

72% match

Loading thumbnail…

Vector Tiles

This example displays a static vector-tile map of San Francisco’s roads, with major highways, minor roads, and rail lines rendered as stylized SVG strokes. Using D3 v3, it loads Mapzen’s OpenStreetMap “roads” tiles via `d3.json`, sorts features by `sort_key`, and draws each path with `d3.geo.path` and a Mercator projection. A custom `d3.geo.tile` helper computes the visible tile range and scale, while CSS classes like `.highway` and `.rail` assign distinct colors and widths.

Mmbostock

71% match

Loading thumbnail…

Pale Dawn

This example displays a tiled map of the world using the Polymaps library, with a calm “Pale Dawn” tileset from CloudMade that provides a subdued background for overlaying data points. The map renders spherical mercator tiles from OpenStreetMap data through an `org.polymaps` map instance, adding standard interaction controls via `po.interact()` and a compass. The visualization uses a single `po.image()` layer with a URL template for fetching 256x256 PNG tiles, and includes attribution to CloudMade and OpenStreetMap contributors under a CCBYSA license.

Mmbostock

70% match