Skip to main content
SimilarExport ZIP
100%

A basic map with MapboxGL.js

✓ Published0🌍 Public
NNieneB
Last edited Feb 8, 2018
Created on Feb 8, 2018

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.

AI-generated description

Similar vizzes

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
96% 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
94% 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
94% 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
93% match
Loading thumbnail…

A basic map with MapboxGL.js

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.

NNieneB
78% match
Loading thumbnail…

D3 Map Nederland

This interactive map of the Netherlands displays provincial boundaries, which users can click to zoom and highlight in red, with a click on the background resetting the view. Built with D3 v6 and TopoJSON, it uses `d3.geoPath` and a Mercator projection to render the shapes, while `d3.zoom` handles panning and scaling between 1x and 8x. The data loads from a remote TopoJSON file via `fetch`, and transitions animate the zoom and fill changes. Hover effects turn regions orange, and SVG elements are used for all rendering.

Llamartm
73% match
Loading thumbnail…

fresh block

This visualization displays earthquake data for the Netherlands in June 2017, plotted as circles on an SVG canvas using D3 v4. The code includes two commented-out approaches: one mapping quake locations by latitude and longitude with `d3.scaleLinear` and `d3.scaleSqrt` for magnitude, and another plotting events over time using `d3.scaleTime` for date, linear scaling for magnitude, and `d3.scaleOrdinal` with `d3.schemeCategory10` for quake type. The data is loaded from a tab-separated text file via `d3.tsv`, with parsing and formatting handled manually. Currently, the render function runs but displays nothing because both rendering paths are commented out.

NNieneB
73% match
Loading thumbnail…

D3 Map Nederland

This example displays an interactive map of Dutch municipalities, coloring each region in light blue with black outlines and highlighting areas in solid blue on hover. The visualization loads geographic data from a TopoJSON file and renders it as SVG paths using D3 v5 with a Mercator projection. It employs d3.json to fetch the data, d3.geoPath with geoMercator for drawing shapes, and includes d3-zoom.v2 for potential panning and scaling capabilities. The hover effect is implemented through CSS, and each municipality includes a tooltip showing its name and ID.

Mmbergevoet
72% match