Loupe

100%

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Sep 20, 2010

A loupe-style lens overlays two different CloudMade tile layers on a Polymaps map, using the `po.loupe` API to render a circular focus region with a draggable center and resizable border. The example loads tiles from the CloudMade 998 and 999 map styles for OpenStreetMap data, with the outer map showing one style and the inner lens another, optionally zooming between them via a `zoomDelta` property. Interaction is handled by Polymaps' `po.interact` and `po.hash` for panning and URL state, while SVG elements styled in CSS draw the loupe’s thick black and light borders.

AI-generated description

This example is a simple loupe using Polymaps. Drag the center of the loupe to move it around, or drag the thick border to resize it. Loupes are normally used to magnify, showing focus and context, but in this example we're using it to show two different tilesets. You can enable magnification (or minification) using the zoomDelta property.

Similar vizzes

Loading thumbnail…

Map Loupe

This example pairs two synchronized map views: a standard-size choropleth of U.S. county unemployment rates on the left, and a magnified version on the right. Hovering over the left map updates the right view, which uses a larger-scale Albers USA projection to show a zoomed-in area. The maps use an identical quantile color scale, with counties and state boundaries rendered as SVG paths via TopoJSON. The magnification effect is achieved by translating the right map based on the mouse position, creating a "loupe" that reveals local detail while preserving geographic context.

663anp3ca

73% match

Loading thumbnail…

Map Loupe

This example shows a choropleth map of U.S. county unemployment rates on the left, with a magnified view of the same data on the right. The main map uses an Albers USA projection, while the right panel uses the same projection at a much larger scale, creating a loupe effect. Moving the mouse over the left map repositions the right map's transform to show the corresponding zoomed-in region, effectively magnifying the area beneath the cursor. County colors are assigned via a quantile scale, and state boundaries are overlaid in white. The visualization is built with D3 and TopoJSON, rendered as SVG.

663anp3ca

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

65% match

Loading thumbnail…

Focusable Maps

Two interactive maps sit side-by-side, each in its own `div` element, and each can be focused independently via the `tabindex` attribute. Using the Polymaps library, each map renders a CloudMade tile layer (styles 998 and 999) served from OpenStreetMap data, with the `org.polymaps` API handling map display and `po.interact()` enabling pan and zoom. The `tabindex` on the containing `div` elements makes each map a separate focusable region, so keyboard navigation can target one map without affecting the other.

Mmbostock

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

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

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

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

58% match