Mapbox GL JS class demo

100%

Mapbox GL JS class demo

✓ Published0🌍 Public

Last edited Aug 4, 2016

Created on Aug 3, 2016

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Test of mapbox gl js builidng extrusion with Bend lidar test data

This example tests Mapbox GL JS building extrusion using Lidar-derived building footprint data from Bend, Oregon. Building polygons are styled with extrusion based on height properties, producing a 3D visualization of the urban landscape. The data, stored in a GeoJSON FeatureCollection, includes attributes such as elevation, height, and build height for each structure. The map renders the buildings as extruded 3D volumes, demonstrating Mapbox GL JS's ability to visualize lidar building data with realistic vertical dimensions.

Aajzeigert

70% match

Loading thumbnail…

Seismic test

An interactive map displays seismic data for the Portland area, including fault lines, liquefaction susceptibility zones, and station markers. Users can toggle layer visibility and adjust the return period slider to filter seismic hazard layers. The visualization uses Mapbox GL JS with custom vector tile sources for faults and service areas, styled through Mapbox Studio. A Bootstrap panel provides UI controls, while jQuery handles interactions, and station information updates on hover.

Aajzeigert

68% match

Loading thumbnail…

Gist 8394756

This example maps the locations of bars and restaurants in Washington, D.C. using a GeoJSON file of point features. Each venue is plotted on a geographic map, with its name and address available from the data. The visualization likely uses Leaflet or a similar mapping library to render the GeoJSON layer, displaying bar symbols at each coordinate. The code relies on the geographic coordinates from the GeoJSON to position the markers, creating a simple point-based map of dining and drinking establishments across the city.

Aadkatrit

68% match

Loading thumbnail…

Simple Mapbox GL example with a custom vector tile

A Mapbox GL example displays tax lot parcels from a custom vector tile source over a base map. The map loads the "deschutes-taxlots" source, rendered as semi-transparent filled polygons with white outlines, and uses the `featuresAt` API to query features on mouse movement. The page shows the current tax lot ID in an overlay panel, updating live as the cursor moves. The code uses Mapbox GL JS v0.11.1 with the light-v8 style and interactive layer events.

Aajzeigert

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

67% match

Loading thumbnail…

Mapbox GL map that displays a vector tile layer of taxlots, then queries a REST api to return sales info when a taxlot is clicked

A Mapbox GL map displays vector tile taxlots from a Mapbox hosted tile service, with contour lines from terrain data overlaid. Clicking a taxlot queries the Deschutes County ArcGIS REST API for that lot’s sales history, then displays the two most recent sale dates and prices in a side panel. The map uses mapboxgl.Map, mapboxgl.GeoJSONSource, featuresAt, and an XMLHttpRequest-based HttpClient to fetch and render the data.

Aajzeigert

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

67% match

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

66% match