Position Helper

100%

Position Helper

✓ Published0🌍 Public

Last edited Apr 7, 2020

Created on Apr 7, 2020

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.

AI-generated description

Ref:

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Scrollytelling Template

This scrollytelling template uses Mapbox GL JS and Scrollama to guide viewers through a narrative about crime statistics in Tokyo, overlaying data on a map of the city. It shows the geographic distribution of crimes, Olympic venue locations, and popular residential rankings, with map layers and camera positions changing as the viewer scrolls. The code uses Mapbox GL JS’s `setPaintProperty` to adjust layer opacity and the IntersectionObserver API to trigger chapter transitions. Data is sourced from the Tokyo Metropolitan Police and SUUMO rankings.

HHirosaji

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

69% match

Loading thumbnail…

ScrollyTelling with FreeCamera API snippet

This example demonstrates scroll-driven animation in a Mapbox GL map, syncing a free camera’s position and view target along geographic routes. Using Turf.js’s `length` and `along` functions, it interpolates points based on scroll rate, then sets the camera’s mercator coordinates and look-at point via `map.getFreeCameraOptions` and `map.setFreeCameraOptions`. A scroll event listener triggers `requestAnimationFrame` to update the view smoothly. The code shows route and camera path synchronization, with altitude fixed, rendering an animated flythrough tied to page scroll.

HHirosaji

68% match

Loading thumbnail…

Map Pan & Zoom II

This example demonstrates interactive pan and zoom on a world map using a dynamic Mercator projection. The map renders country landmasses as black paths, with white boundaries and a light gray sphere background, all within an SVG element. Using the `d3.behavior.zoom` API, user drag or scroll actions trigger reprojection and redraw the geospatial data via `d3.geo.path`. The underlying geographic data is loaded as JSON from a gist, and the projection translates and scales dynamically with each zoom event.

Mmbostock

68% match

Loading thumbnail…

Interactive Gnomonic

An interactive map renders the world in a gnomonic projection, a perspective view where great circles appear as straight lines. Moving the mouse over the SVG scene reorients the projection’s center by rotating it based on the cursor’s position, updating the displayed landmasses. The visualization uses d3.geo.gnomonic and d3.geo.path to draw the topojson world-110m data, with d3.scale.linear mapping pixel coordinates to longitude and latitude for rotation.

Mmbostock

68% match

Loading thumbnail…

Interactive Orthographic

This interactive orthographic map displays a world landmass that the viewer can rotate by moving the mouse. As the cursor moves, the projection’s center re-orients to the new longitude and latitude, redrawing the SVG paths in real time. Built with D3 v3, it uses `d3.geo.orthographic`, `d3.geo.path`, and a linear scale to map pixel coordinates to degrees. The geographic data comes from a TopoJSON file (`world-110m.json`) loaded via `d3.json`, with features extracted using `topojson.feature`.

Mmbostock

66% match

Loading thumbnail…

Map & Globe

This example presents two synchronized geographic visualizations side by side: an interactive Leaflet.js map and a D3-based orthographic globe rendered on HTML5 Canvas. The Chiasm framework and its layout and links plugins manage the component layout and bidirectional data binding, so panning and zooming on the map updates the globe’s rotation and viewport circle, and dragging the globe repositions the map. The globe draws landmasses and country borders from a TopoJSON world dataset, while the map uses CartoDB basemap tiles. A gray circle on the globe indicates the map’s current viewport.

PPatrick Wojda

66% match

Loading thumbnail…

Map Pan and Zoom v5

This map of the world centers on the Pacific Ocean and lets users pan and zoom. It uses a Mercator projection via `d3.geoMercator` and renders country boundaries as SVG paths from TopoJSON data. The `d3.zoom` behavior applies a transform to the path group, enabling interactive navigation with a scale extent of 1 to 8.

Dd3noob

66% match