FOAM API Example - Leaflet

100%

FOAM API Example - Leaflet

✓ Published0🌍 Public

Last edited May 13, 2018

Created on Mar 22, 2018

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.

AI-generated description

FOAM API Example - Leaflet

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

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

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

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

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

76% match

Loading thumbnail…

Leaflet Map Example

This example shows a Leaflet map with interactive markers and a circle overlay, plotting applicant counts per country from a CSV dataset. Using the Leaflet JavaScript library, it renders an OpenStreetMap base layer and adds markers for each data point, binding popups to display country-specific information. The code also demonstrates adding a styled circle geometry to the map, and it imports utilities from TopoJSON for potential geospatial operations.

Kklumng

58% match

Loading thumbnail…

Gist 2a4314be6d43ecda163979127d71caf5

This visualization maps a set of geographic points distributed across downtown Denver, Colorado, using a GeoJSON point layer. It shows the raw spatial clustering of locations, likely representing places or events, without additional thematic encoding. The rendering relies on a mapping library to project and draw the points, while the point data itself is loaded from a GeoJSON feature collection. The code demonstrates a simple, direct approach to displaying raw coordinate data, with no aggregation or styling beyond the base point markers.

WWill Carter

58% match

Loading thumbnail…

leafletjs location

This example demonstrates browser geolocation using the Leaflet.js mapping library, showing a map that automatically centers on the user’s detected position with a marker and popup. If location lookup fails, it falls back to a predefined point in China, displaying an alert and a marker labeled “Some where.” The map uses OpenStreetMap tile layers via `L.tileLayer`, and the geolocation logic relies on Leaflet’s `map.locate` method with `setView:true` and a max zoom of 10. Location success and error events are handled through `map.on("locationfound")` and `map.on("locationerror")`.

11Cr18Ni9

57% match