FOAM API Example - Popup on hover

100%

FOAM API Example - Popup on hover

✓ Published0🌍 Public

Last edited May 13, 2018

Created on Mar 22, 2018

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.

AI-generated description

FOAM API Example - Popup on hover

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

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

84% match

Loading thumbnail…

FOAM API Example - Mapbox.GL custom marker

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.

WWill Carter

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

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

81% match

Loading thumbnail…

Hover Markers

This example uses Polymaps and the CrimeSpotting API to display a map of Oakland, California, with 100 crime data points as fixed-size circles. The map is created with `po.map()` and `po.geoJson()`, loading GeoJSON features that are styled with CSS classes for hover effects. When hovering, the datapoint markers change color from lightsteelblue to lightcoral, highlighting individual incidents. The map includes a CloudMade tile layer and supports zooming between levels 10 and 16, with crime data filtered for a single day in April 2010.

Mmbostock

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

65% match

Loading thumbnail…

h3 Hexagon Basemap

This example displays a Mapbox GL-based interactive map of the United States, centered on the continental bounds with zoom controls. It shows a blank basemap initially, but the code includes a `zoomend` event listener, suggesting the map updates dynamically on zoom changes. The map uses Mapbox GL JS v1.3.1 and a custom Mapbox style, with a bounding box defined by southwest and northeast coordinates. Navigation controls are added, and the map is rendered in a full-screen container. The data source is a Mapbox-hosted style, and the interaction is handled through Mapbox’s API.

WWill Carter

63% match