Add a video

100%

✓ Published0🌍 Public

Last edited Dec 9, 2019

Created on Sep 8, 2018

This example overlays a video file directly onto a map, using a custom Mapbox GL style that defines a video source with geographic coordinates. It shows the video as a raster layer on top of Mapbox’s satellite imagery, with the video frames georeferenced to fit the given corner points. The map is centered and rotated over the video area, and the style includes a dark background and satellite base layer. The implementation uses the Mapbox GL JS API, specifying the video source, its URL, and the bounding coordinates in the style’s JSON.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Gist cd3b399ded90abed9e03930563398518

This example displays a Mapbox GL JS map centered on Houston, Texas, at zoom level 10, with a set of airfield-style symbol markers plotted over a custom vector tile source. The visualization uses `map.addSource` to load a hosted vector tileset containing school location data and `map.addLayer` to render those points as icons via the `symbol` layer type. A collapsible overlay panel and a menu for switching map views are included, though the menu’s active state and overlay content are not populated in the provided code. The map style is a custom Mapbox style URL.

JJn1532

62% match

Loading thumbnail…

Position Helper

Built with Mapbox GL JS v1.5.0 and the Mapbox Geocoder plugin, this interactive map acts as a position helper for scrollytelling projects. A fixed crosshair target sits at the screen center, while a side panel continuously displays the map’s current center coordinates, zoom level, pitch, and bearing. The tool updates these parameters on every map move, and also adds a 3D building extrusion layer from the Mapbox composite source. This provides a practical way to copy camera settings for storytelling sequences, as demonstrated in the linked Mapbox blog example.

HHirosaji

62% match

Loading thumbnail…

Lots of points in Mapbox Basemap - Test

This example demonstrates a Mapbox GL map with a tilted and rotated view centered on the New York City area. It shows how the map’s basemap style can be dynamically switched via a custom control panel overlaid on the map. The page uses the Mapbox GL JS API to initialize the map with a specific style, pitch, bearing, and zoom level, while the `switchLayer` function updates the map’s style based on user input. A transparent title box with radio buttons allows selection among different style layers, and the Navigation control adds zoom and rotation controls.

WWill Carter

62% match

Loading thumbnail…

Mapbox 1.X Reference Examples

This example showcases a collection of Mapbox GL JS code snippets, extracted from official documentation at version 1.12.0, demonstrating various interactive mapping techniques. It features an animated image overlay on a map, using the Mapbox GL JS API to handle tile rendering and camera controls. The snippets illustrate how to integrate custom vector tiles and geospatial data, with code for styling layers and managing user interactions. The project serves as a reference for common mapping tasks, such as adding markers, drawing polygons, and animating data over time.

CCurran Kelleher

60% match

Loading thumbnail…

Sized Points on a Map using videoData!

This example displays a world map with semi-transparent circles sized to represent video views, using data from a CSV of course participants. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders geographic features with `geoPath` and `geoGraticule`, while the circles use `scaleSqrt` mapped to the `nplay_video` field. Country boundaries come from World Atlas TopoJSON, and the React-based component structure leverages the `useWorldAtlas` and `useDataViews` hooks to load and parse the data.

Ssophburke

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

59% match

Loading thumbnail…

A simple map

This example shows a basic interactive map centered on a view of New York City, with the Mapbox streets basemap displayed at zoom level 9. The map is rendered in a full-screen HTML page using the Mapbox.js library, which initializes the map object via `L.mapbox.map` and sets the geographic coordinates and zoom level with `.setView`. The map uses a public access token from the author Jn1532 to load the tiles.

JJn1532

59% match

Loading thumbnail…

Mapbox - ScrollyTelling with FreeCamera API

A scrolling narrative climbs Mt. Fuji using a Mapbox map with the FreeCamera API. As the user scrolls, the camera moves along a defined route while the view follows a hiking path drawn as a line layer, with terrain exaggeration and an atmospheric sky. The example combines Mapbox GL JS, D3.js for CSV data loading, and Turf.js to interpolate the camera and target routes.

HHirosaji

59% match