Image Markers

100%

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Oct 25, 2010

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fancy Markers

This example shows a Polymaps-based map of Oakland crime data, replacing the default circular GeoJSON point markers with custom pin-style vector icons. The markers are dynamically colored using three categorical linear gradients, each representing a crime category (violent, property, or quality-of-life). The code creates SVG `use` elements referencing a marker path from the Raphael.js icon library, then post-processes loaded GeoJSON features to swap in these styled markers based on crime categorization. The map uses CloudMade tile imagery and CrimeSpotting data, with icons sorted by latitude for render order.

Mmbostock

86% match

Loading thumbnail…

Hover Markers

This example uses Polymaps and the CrimeSpotting API to display a map of Oakland, California, with 100 crime data points as fixed-size circles. The map is created with `po.map()` and `po.geoJson()`, loading GeoJSON features that are styled with CSS classes for hover effects. When hovering, the datapoint markers change color from lightsteelblue to lightcoral, highlighting individual incidents. The map includes a CloudMade tile layer and supports zooming between levels 10 and 16, with crime data filtered for a single day in April 2010.

Mmbostock

85% match

Loading thumbnail…

Fancy Markers (No Gradient)

This example displays a map of crime incidents in Oakland for a single day, replacing default GeoJSON point markers with custom SVG icons. It uses Polymaps to build the interactive map, with CloudMade tiles and OpenStreetMap data as the basemap. The code loads crime records from the CrimeSpotting API, then post-processes each feature after the `load` event, swapping the original point element for a marker icon appended from the Raphaël icons library. The markers are scaled and positioned using the existing transform attributes.

Mmbostock

85% match

Loading thumbnail…

Resizable Markers

This example demonstrates an interactive map of crime data for Oakland, California, where a slider dynamically resizes the displayed points. The map is built with the Polymaps library, using a CloudMade tile layer as the base and the `org.polymaps.geoJson` object to render the data. A jQuery UI slider calls the GeoJSON layer’s `reshow()` method, triggering a `show` event that updates the `r` attribute on each plotted circle, effectively scaling the markers based on the slider’s value. The data originates from the Crimespotting API.

Mmbostock

83% match

Loading thumbnail…

Labeled points

This example displays a Polymaps map of Oakland crime incidents as labeled points. It adds a text label to each GeoJSON point feature by creating an `svg:text` element with `po.svg`, positioning it with the circle’s `transform`, and centering it via `text-anchor` and `dy`. The code styles the circles with a steelblue stroke, and the map layers CloudMade tiles with the crime data from crimespotting.org.

Mmbostock

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

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

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

69% match