Image Processing

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.

70% match

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.

69% match

Polymaps / Procedural Perlin

This example displays a procedurally generated Perlin noise pattern rendered as a map using Polymaps. A web worker computes the noise values for each tile, writing RGB pixel data into an array, which is then posted back and displayed as a colorful texture. The code implements Ken Perlin’s classic noise algorithm from scratch, including fade, lerp, and gradient functions, and uses the `postMessage` API to communicate tile data asynchronously. The visualization demonstrates how noise can be generated on demand for arbitrary zoom levels and map coordinates.

68% match

Map Pan & Zoom IV

This example demonstrates fast map panning and zooming on a Canvas. It uses pre-projected geometry from a `world.json` file, rendered via d3.geo.path. Pan and zoom use `d3.behavior.zoom`, with dynamic simplification via a custom `d3.geo.transform` and viewport clipping via `d3.geo.clipExtent`. The map shows country boundaries and a sphere outline.

Pixymaps (Dragging)

This example shows a draggable, tile-based map of San Francisco rendered on an HTML5 Canvas using `pixymaps` with D3 v3. Users pan the view by dragging the mouse, which triggers `view.panBy()` and re-renders the map. The map tiles are loaded from CloudMade and OpenStreetMap, with a cached, least-recently-used tile system. The map projection uses `d3.geo.mercator`, and the viewport transforms the canvas with a CSS `matrix3d` translation.

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.

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

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.