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.
AI-generated descriptionThe default display for GeoJSON points in Polymaps is a 4.5px-radius circle. In this example, I show how to create more traditional pin-style markers for points. This is implemented using a “load” event handler which replaces the default circles with custom path elements.
The marker outline is courtesy of Dmitry Baranovskiy; he has graciously provided over 100 free vector icons to choose from. Of course, there’s no requirement to use vector icons. You could replace the circles with image elements instead, if you prefer raster. But the nice thing about vectors is that we can color them dynamically based on the data, as we do here by generating three categorical color gradients.