A basic map with MapboxGL.js

100%

A basic map with MapboxGL.js

✓ Published0🌍 Public

Last edited Feb 8, 2018

Created on Feb 8, 2018

This example displays an interactive map centered on Amsterdam, featuring a tilted and rotated view of the city with MapboxGL.js. The map uses the Mapbox streets style, with zoom, pitch, and bearing set to create a perspective view. The code loads the mapbox-gl.js library and its associated CSS, then initializes a `mapboxgl.Map` instance on a container div, adding a navigation control. It relies on a hardcoded Mapbox access token to fetch tile data from the Mapbox service, showing how to embed a basic map with custom camera settings.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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

79% match

Loading thumbnail…

A basic map with MapboxGL.js

This example visualizes earthquake data in the Netherlands on a Mapbox GL JS map. It renders point locations colored by earthquake type, with extruded buffers showing depth through varying heights, and labels displaying depth values. The style uses a vector tile source from PDOK for administrative boundaries and urban areas, while earthquake data comes from GeoJSON files hosted on GitHub. The map starts with a tilted perspective, and includes navigation controls for zoom and rotation.

NNieneB

79% match

Loading thumbnail…

A basic map with MapboxGL.js

This basic map example uses MapboxGL.js to visualize earthquake data in the Netherlands. It displays points colored categorically by quake type (induced vs. tectonic) with extruded buffer heights based on depth, overlaid on a base map of provinces and urban areas from the PDOK topotiles service. The map initializes with specific zoom, pitch, and bearing settings. An interactive hover effect on provinces displays the region’s name in a side panel, implemented through map event listeners and a dynamic layer filter. Depth labels appear at higher zoom levels.

NNieneB

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

77% match

Loading thumbnail…

A basic map with MapboxGL.js

This interactive web map visualizes earthquake locations in the Netherlands, distinguishing between induced and tectonic events through color-coded circles whose size scales with zoom level. Built with MapboxGL.js, the map overlays GeoJSON point data onto vector tiles from PDOK, incorporating Dutch administrative boundaries, urban areas, and place labels from the same source. The custom style file defines categorical circle colors, zoom-dependent radius stops, and three label priority layers, while the HTML page sets initial camera position, pitch, and bearing.

NNieneB

77% match

Loading thumbnail…

A basic map with MapboxGL.js

A point and extrusion map of earthquakes in the Netherlands, styled with a custom MapboxGL style. It layers Dutch administrative boundaries and urban areas from PDOK vector tiles, then plots each earthquake as a circle colored by type (induced or tectonic) and radius scaled by zoom. A 3D fill-extrusion of each quake’s buffer visualizes depth, with labels showing recorded depth at higher zoom levels. The map runs in MapboxGL.js v0.44 using a JSON style with categorical color stops and zoom-dependent height interpolation.

NNieneB

76% match

Loading thumbnail…

Gist 6b515fcc2b7c6479d9c31059140eb611

This example displays a full-screen interactive map of the contiguous United States, centered on the country’s geographic midpoint using Mapbox GL JS. The map uses a custom Mapbox style and includes a navigation control for zoom and rotation. The viewport is constrained to the bounding box spanning from the Southwest to the Northeast corners of the lower 48 states. The code sets an initial zoom level and center coordinates derived from that bounding box, but does not load or visualize any external data layers.

WWill Carter

71% match