Resizable Markers

100%

Resizable Markers

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Oct 14, 2010

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.

AI-generated description

A quick example demonstrating the use of "show" event handlers and reshow, which allows you to restyle GeoJSON features dynamically from an external event. In this example, you can use the jQuery UI slider in the top-left corner to resize the points.

gpl-3.0 Licensed

Similar vizzes

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

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

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

81% match

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

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

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

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

67% match

Loading thumbnail…

Sized Points on a Map

A geographic visualization displays US cities as circles, with area proportional to total crimes reported. City data originates from a CSV file, while state boundaries and graticules are drawn from the us-atlas TopoJSON. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering map features, and d3.scaleSqrt to map crime counts to circle radii. React and D3 v5 manage the SVG output, with semitransparent teal points layered over a muted landmass.

Yyyaaa1

66% match