Fancy Markers (No Gradient)

100%

Fancy Markers (No Gradient)

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Oct 25, 2010

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.

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

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

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

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

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

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

68% match

Loading thumbnail…

Vector Tiles

This example displays vector-tiled map data, rendering both road networks and building footprints over San Francisco. The visualization loads GeoJSON tiles from an external OpenStreetMap vector-datasource service and projects them using `d3.geo.mercator` and `d3.geo.path`. It employs the custom `d3.geo.tile` helper to compute visible tile coordinates at the current zoom level, then asynchronously fetches and draws each tile’s features as SVG paths. Road types are distinguished by stroke colors, while buildings appear as solid black polygons.

Mmbostock

68% match