Simple Mapbox GL example with a custom vector tile

100%

Simple Mapbox GL example with a custom vector tile

✓ Published0🌍 Public

Last edited Oct 29, 2015

Created on Oct 29, 2015

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.

AI-generated description

Similar vizzes

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

85% match

Loading thumbnail…

Vector Tiles - fixed

This example renders interactive vector tile maps using Mapzen vector tiles, displayed as SVG paths over a dark background. It uses d3.tile to manage tile loading and d3.zoom for pan and zoom interactions, with a d3.geoMercator projection and d3.geoPath to draw geographic features. The visualization shows roads, water, buildings, parks, and other land-use layers, each styled with distinct colors and stroke widths. Tile data is fetched as GeoJSON from Mapzen’s tile server and rendered dynamically, with a coordinate readout displayed at the bottom.

Aamortka

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

70% match

Loading thumbnail…

Klokantech Basic Preview

This example demonstrates an interactive map of geographic regions, combining OpenMapTiles vector data with a custom local vector source for King County census block groups. It uses Mapbox GL JS to render a full-screen map with a Klokantech Basic style, featuring filled polygons for land cover, water, parks, and agricultural areas, each styled with distinct colors and opacity. The map loads a `klokantech-basic.json` style, which defines layers for residential, grass, wood, and other land-use categories, and overlays the local census data. Navigation controls and URL hash syncing are enabled for user interaction, with styling driven by the Mapbox style specification.

FFloydBull

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

69% match

Loading thumbnail…

Mapbox GL JS class demo

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.

Aajzeigert

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

67% match

Loading thumbnail…

Gist 48245d988832c60328d729e4c95db8db

This example demonstrates how to request a Mapbox vector tile and initialize it for rendering. The code constructs a `Tile.Parameters` object, sets its `Fs` property to the Mapbox access instance, and converts latitude, longitude, and zoom coordinates into a canonical tile ID. It then creates a `VectorTile` and calls its `Initialize` method with those parameters, passing a callback for tile data. The snippet highlights the step where a specific map style, such as `"mapbox.mapbox-terrain-v2"`, would normally be assigned, but that assignment is omitted here. The rendering approach relies on Mapbox’s tile API and the `VectorTile` class to handle the map data.

Aandybak

67% match