Animated marker

100%

Animated marker

✓ Published0🌍 Public

Last edited Aug 14, 2014

Created on Aug 14, 2014

A custom SVG marker for a bicycle icon is displayed on a Leaflet map centered on Moscow. The marker is added via `L.icon` with `iconUrl` set to the bike SVG file. The icon itself uses SMIL animations defined in the SVG to create movement. The map uses Stamen toner tiles loaded through Leaflet’s `L.tileLayer` and includes attribution for OpenStreetMap.

AI-generated description

Simple animated marker: SVG marker + SMIL.

Similar vizzes

Loading thumbnail…

Dynamic tile clipping and more

This example demonstrates interactive map manipulation on a Leaflet map centered on Moscow. Users can draw polygons to dynamically clip OpenStreetMap tiles layered over a Stamen toner base map. The code uses D3.js to project drawn GeoJSON geometries via `d3.geo.path` and `d3.geo.transform`, applying the resulting path as an SVG `clipPath` to reveal the OSM overlay only within the drawn shapes. Additional SVG filters and patterns allow real-time effects like grayscale, hue rotation, and hatching on the map layers.

KKoGor

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

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

64% match

Loading thumbnail…

fresh block

A map of Lyon displays bike-sharing station locations as animated dots that grow on load, colored by availability status. The visualization pairs a Mapbox.js and Leaflet map with D3.js to project station coordinates onto an SVG overlay layer. Hovering over a dot opens a tooltip with station details, while the data also supports an accompanying bar chart of station metrics. Station information comes from a JSON file and updates via D3 transitions, with a d3-legend library included for potential map legends.

CChmits

63% match

Loading thumbnail…

leaflet - Markers on map

This example uses the Leaflet mapping library to place interactive markers on a tile-based map of Tokyo. A small CSV dataset provides the station names and geographic coordinates for each marker, which are loaded with d3.csv. The map background is rendered using Mapbox tile layers, and each station marker is bound to a popup that displays its name. The visualization combines Leaflet’s map interactions with D3’s data-loading capabilities to create a straightforward geographic point display.

HHirosaji

63% match

Loading thumbnail…

SVG path animation

An animated marker follows a wiggly SVG path while the path itself appears to draw itself in a continuous loop. The example uses D3.js version 3 to load an external SVG file via `d3.xml` and then animates both the path’s `stroke-dasharray` and the marker’s position using `transition.attrTween` and `path.getPointAtLength`. The marker is a red circle repositioned at each animation tick, while the dash array interpolation creates the synchronous drawing effect. The animation runs infinitely via a recursive transition callback.

KKoGor

62% match

Loading thumbnail…

fresh block

An interactive map of bike-share stations in Lyon displays each station as a circle whose position is projected onto a Mapbox-backed Leaflet map using D3. Loading station data from a local JSON file, the visualization animates circle emergence and provides a previsions function that appends a separate bar chart, though its data binding is incomplete. The map layer uses D3 to append an SVG overlay, and hovering interactions are defined for tooltips, though the chart itself is not fully implemented.

CChmits

62% match

Loading thumbnail…

My bike route to UofT.

This visualization animates a bike route to the University of Toronto on a Leaflet map with a dark CartoDB basemap. A moving marker travels along the path, which is drawn from a series of GeoJSON points containing timestamps. The code uses d3.json to load the GeoJSON and d3.geo.path with a custom Leaflet projection to convert coordinates into SVG paths, while d3.svg.line connects the points into a single route. A transition animates the marker along the line, with the path and waypoints also rendered in SVG.

MMbrownshoes

62% match