Pale Dawn

100%

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Sep 16, 2010

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.

AI-generated description

The “Pale Dawn” tileset has a calm, restrained style designed to work well with lots of data points. It’s less about the geographical information as such, and more about providing a suitable background to foreground information.

This map is constructed using a single image layer of CloudMade tiles. The tiles are in spherical mercator coordinates, and the map has standard interaction controls, so this basic example is a useful starting point for customization. Register a developer account with CloudMade for your own API key.

gpl-3.0 Licensed

Similar vizzes

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

74% match

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

71% match

Loading thumbnail…

Image Processing

This example demonstrates real-time image processing on map tiles using Polymaps and HTML5 Canvas. The map loads a static image from a URL and renders it through a custom canvas layer, where each tile’s pixel data is read with `getImageData` and halved in intensity before being written back via `putImageData`. The code uses `po.canvas()` to define the layer, `drawImage` to place the source, and `createImageData` to prepare the output. The result shows a visibly darkened version of the original image across the panning map.

Mmbostock

70% match

Loading thumbnail…

d3.geo.tiler

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.

Mmbostock

70% match

Loading thumbnail…

Sequential Tiles

This example demonstrates a rainbow-colored tile grid that visualizes the sequence of map tiles in a web mapping interface. Each tile at a given zoom level is assigned a color based on its sequential position, creating a visible gradient that shows the order and layout of map tiles. The visualization uses the Polymaps JavaScript library’s `po.map()` and `po.layer()` APIs, with a custom `rainbow` function that calculates a hue from the tile’s column and row indices. The code also includes a custom `hsl` function for color conversion, and the map is configured with a 32x32 tile size and zoom level 4.

Mmbostock

68% match

Loading thumbnail…

Image Markers

This example uses Polymaps to display an interactive map centered on Oakland, California, with CloudMade tile imagery. It loads GeoJSON crime data from the Oakland CrimeSpotting API and replaces each geographic point with a small Twitter favicon image marker. The map supports pan and zoom via `po.interact()`, and the markers are positioned using fixed scaling at zoom level 12.

Mmbostock

67% match

Loading thumbnail…

Heatmap

This heatmap blends a base map with three point locations that are transformed into radial gradients, showing how they are highlighted on a map. The visualization combines a CloudMade tile layer and OpenStreetMap data, with the points loaded as GeoJSON features. The map uses the Polymaps library, and its `load` callback dynamically adjusts each point’s radius based on the current zoom level while assigning a green gradient fill with fading opacity.

Mmbostock

67% match

Loading thumbnail…

Dynamic tile masking and more

This example demonstrates interactive masking of OpenStreetMap tiles over a stamen.com toner base map, controlled by user-drawn polygons. Using Leaflet’s draw control, users create shapes that act as SVG masks, revealing or hiding the underlying OSM tile layer. The visualization also applies SVG filters, such as grayscale, hue rotation, and sepia, to the map tiles, and offers a selection of hatch patterns for the mask fills. The code integrates D3.js (v3) for projecting GeoJSON geometries into Leaflet’s coordinate system and manipulates the SVG `defs` and mask elements directly.

KKoGor

65% match