FOAM API Example - Mapbox.GL custom marker

100%

FOAM API Example - Mapbox.GL custom marker

✓ Published0🌍 Public

Last edited May 13, 2018

Created on Mar 22, 2018

This example displays a Mapbox GL map with custom markers representing FOAM beacon locations, fetched from the FOAM API using axios. The map loads geohash-encoded coordinates from the API, decodes them with the latlon-geohash library, and converts them into GeoJSON features. A custom marker image is added via `map.loadImage` and rendered as a symbol layer. The basemap style is selectable among Mapbox presets such as streets, light, or satellite, with an initial view centered on Europe.

AI-generated description

FOAM API Example - Mapbox.GL Custom Marker

mit Licensed

Similar vizzes

Loading thumbnail…

FOAM API Example - Mapbox.GL

This interactive map visualizes FOAM beacon locations within a defined bounding box around Boulder, Colorado, using Mapbox GL. It fetches beacon data from the FOAM API, decodes each beacon’s geohash to coordinates, and plots yellow circular markers on a dark basemap. The code uses Mapbox GL for rendering, axios for HTTP requests, and the latlon-geohash library for decoding. The map centers on the bounding box’s midpoint at zoom level 12, showing the spatial distribution of FOAM beacons in the area.

WWill Carter

86% match

Loading thumbnail…

FOAM API Example - Custom Basemap

This example demonstrates a custom basemap built with Mapbox GL JS, using a personalized style from the Mapbox API to render a tilted, rotated map view centered on Connecticut. It shows how to handle hover interactions by querying features from a specific layer called “beacons” and displaying a tooltip with the feature’s properties. The code initializes a map with a custom style URL, sets zoom and pitch constraints, and attaches a mousemove event listener that uses `map.featuresAt` to detect nearby features. No external data source is loaded; the basemap and beacons come from the Mapbox style.

WWill Carter

84% match

Loading thumbnail…

FOAM API Example - Leaflet

This example demonstrates a live map of FOAM beacon locations using the Leaflet mapping library. It shows beacon positions as standard map markers within a bounding box around Denver, Colorado. The code queries the FOAM API with bounding box coordinates and an authorization token, then decodes each beacon's geohash value to latitude and longitude using the latlon-geohash library. Axios handles the HTTP request, while Leaflet initializes the map with a Stamen Terrain basemap and adds the decoded markers. The visualization highlights how geohash-encoded spatial data from a blockchain-based API can be translated into interactive geographic markers.

WWill Carter

83% match

Loading thumbnail…

FOAM API Example - CSC search

This map visualization demonstrates searching and displaying FOAM beacon locations using the Mapbox GL JS API. It shows beacon data as points on a dark basemap, with a search menu that queries the FOAM API for specific beacon names and displays the first result. The code uses Axios for API requests and the latlon-geohash library for geographic calculations, while Mapbox GL JS renders the map with a GeoJSON source. The initial view covers a bounding box across North America, and the search functionality dynamically updates the map by removing and re-adding layers when a beacon is found.

WWill Carter

83% match

Loading thumbnail…

FOAM API Example - Popup on hover

This example shows a dark-themed Mapbox GL map centered on New York City, displaying FOAM beacon data as magenta circles. On hover, a popup appears next to each circle, presenting details such as the beacon name, transaction hash, geohash, addresses, and exact coordinates. The map is built with Mapbox GL JS, using its `Popup` and `mouseenter` event for interaction. Data is fetched asynchronously from the FOAM API via Axios, then converted to GeoJSON and added as a circle layer. The visualization relies on Mapbox’s styling and the latlon-geohash library for geohash formatting.

WWill Carter

82% match

Loading thumbnail…

Image Markers

This example uses Polymaps to display an interactive map centered on Oakland, California, with CloudMade tile imagery. It loads GeoJSON crime data from the Oakland CrimeSpotting API and replaces each geographic point with a small Twitter favicon image marker. The map supports pan and zoom via `po.interact()`, and the markers are positioned using fixed scaling at zoom level 12.

Mmbostock

67% match

Loading thumbnail…

Fancy Markers (No Gradient)

This example displays a map of crime incidents in Oakland for a single day, replacing default GeoJSON point markers with custom SVG icons. It uses Polymaps to build the interactive map, with CloudMade tiles and OpenStreetMap data as the basemap. The code loads crime records from the CrimeSpotting API, then post-processes each feature after the `load` event, swapping the original point element for a marker icon appended from the Raphaël icons library. The markers are scaled and positioned using the existing transform attributes.

Mmbostock

64% match

Loading thumbnail…

Fancy Markers

This example shows a Polymaps-based map of Oakland crime data, replacing the default circular GeoJSON point markers with custom pin-style vector icons. The markers are dynamically colored using three categorical linear gradients, each representing a crime category (violent, property, or quality-of-life). The code creates SVG `use` elements referencing a marker path from the Raphael.js icon library, then post-processes loaded GeoJSON features to swap in these styled markers based on crime categorization. The map uses CloudMade tile imagery and CrimeSpotting data, with icons sorted by latitude for render order.

Mmbostock

63% match