Pulsing markers in Mapbox GL JS

100%

Pulsing markers in Mapbox GL JS

✓ Published0🌍 Public

Last edited Jan 21, 2016

Created on Jan 21, 2016

Pulsing markers in Mapbox GL JS animate mountain peak labels from the Natural Earth elevation points dataset, with a yellow ring effect that expands and fades around each numbered marker. The map uses Mapbox GL JS v0.12.2 with a streets style, adding two symbol layers from the same GeoJSON source. A `requestAnimationFrame` loop running at 30 frames per second adjusts text opacity and size properties on one layer, creating the pulsing effect while the base layer remains static.

AI-generated description

Similar vizzes

Loading thumbnail…

Concentric Circles Emanating

An animated map shows concentric red circles emanating from a glowing dot over the Indian Ocean. A base layer renders graticule lines and world landmasses using `d3.geo.path` with a Mercator projection. The animation repeatedly appends a circle at the projected dot position, then uses `transition()` with linear easing to expand its radius while fading its stroke opacity over six seconds. The repeating action is driven by `setInterval`, while land data comes from a remote TopoJSON file.

Mmbostock

64% match

Loading thumbnail…

Mapbox - Extruding circles (stacked)

This example visualizes Japanese towers with observation decks using Mapbox GL JS and D3 v5. It renders filled 3D extruded circles on a map, with the stacked heights representing each tower’s total height and its observation deck altitude, colored blue and red at hover. The code loads tower height data from a CSV, geocodes points, and uses Turf.js to create circular polygons that are extruded via Mapbox’s fill-extrusion layers and feature-state hover styling.

HHirosaji

64% match

Loading thumbnail…

Marker Animation

A marker animates along a route drawn from GeoJSON coordinates, with a slider controlling animation speed and a button to start or cancel the motion. OpenLayers 4.6.5 renders the route as a yellow line, start and end icons, and a circular marker that moves by drawing a point at successive LineString coordinates during the map's postcompose event. The animation uses requestAnimationFrame via OpenLayers' render loop, adjusting the marker position based on elapsed time and speed input, while hiding the static marker during playback.

TThomasG77

64% match

Loading thumbnail…

Mapbox - Extruding circles (gradient)

A Mapbox GL map visualizes Japanese towers with observation decks, displaying each as a stack of extruded circular layers whose heights encode tower height. D3.js parses CSV data, while Turf.js generates circular geometries at each tower’s coordinates, and Mapbox’s fill-extrusion layers render them with a gradient color scale. Hover interactions reveal the tower name and heights, sourced from the Kiso Sansen Park and social statistics datasets.

HHirosaji

64% match

Loading thumbnail…

Create a heatmap layer

This example creates an interactive heatmap layer on top of a Mapbox dark basemap, using Mapbox GL JS. It visualizes point data from a GeoJSON source, showing earthquake or seismic intensities across the U.S. The heatmap uses color gradients and zoom-dependent intensity, radius, and opacity, transitioning to a circle layer at higher zoom levels. The circles also encode magnitude via a color scale, with a white stroke. The code loads the GeoJSON data from a remote gist URL and applies heatmap and circle layers with interpolation functions.

WWill Carter

64% match

Loading thumbnail…

mapbox example

Two interactive maps render 10,000 randomly generated GeoJSON points around London, comparing Mapbox GL JS and Leaflet performance. The left panel uses Mapbox GL JS with a custom map style, rendering circle layers with hover popups via `queryRenderedFeatures`. The right panel uses Leaflet 1.0.1 with Mapbox raster tiles, employing `L.circleMarker` for points and mouseover-bound popups. Both visualizations share identical fake data and styling, highlighting differences in marker rendering and interaction between the two libraries.

AAlan McConchie

63% match

Loading thumbnail…

Mapbox GL JS class demo

This interactive map uses Mapbox GL JS to display the locations of bars and pubs in Bend, Oregon, sourced from OpenStreetMap via Overpass Turbo. Each venue is represented by a point marker on a full-screen, scrollable map, with the points styled as distinct icons. The visualization demonstrates how to load external GeoJSON data into a Mapbox GL JS map and render point features with custom properties, such as the bar's name and amenity type. Users can pan and zoom around the map to explore the distribution of these establishments across the city.

Aajzeigert

63% match

Loading thumbnail…

A basic map with MapboxGL.js

This example shows a basic interactive map of the Netherlands, displaying earthquake data as colored circles and extruded 3D buffers. The map uses MapboxGL.js v0.44.0 to render vector tiles from the PDOK topotiles service and GeoJSON point and buffer data from GitHub. Circle radius and fill-extrusion heights are interpolated based on zoom level, while colors are assigned categorically by earthquake type. The code defines a full Mapbox style object inline, including sources, layers, and paint properties.

NNieneB

62% match