FOAM API Example - Mapbox.GL

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>FOAM API Example - Mapbox.GL</title>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/latlon-geohash@1.1.0/latlon-geohash.min.js"></script>
    <title>API Demo</title>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>

// get bounding box: https://bboxfinder.com
        let mapBounds = [-105.244904, 39.515695, -104.648895, 39.985538];//Southwest corner, Northeast corner

let url = 'https://api-beta.foam.space/beacon?lat_min=' + mapBounds[0] + '&lon_min=' + mapBounds[2] + '&lat_max=' + mapBounds[1] + '&lon_max=' + mapBounds[3];
        //https://api-beta.foam.space/beacon?xmin=-105.244904&ymin=-104.648895&xmax=39.515695&ymax=39.985538

//for authenticating to the FOAM API below
        let auth = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJkYXQiOiJiZTRlYTZmY2EyNTg5NjM0NjRjYTljNGQxZjBhYmM5NTFmMGE1ZGYyIn0.PV1tnjpqMwAiei5u7nASc8mHjvwph9eUOLX8vGgt6MpJUkbCXlp9mhQj9JVqoejUglEIUZtMsfAbh1_-WXEtvw';

mapboxgl.accessToken = 'pk.eyJ1Ijoid2lsbGNhcnRlciIsImEiOiJjamV4b2g3Z2ExOGF4MzFwN3R1dHJ3d2J4In0.Ti-hnuBH8W4bHn7k6GCpGw';

// let basemap = 'basic';
        // let basemap = 'streets';
        // let basemap = 'bright';
        // let basemap = 'light';
        let basemap = 'dark';
        // let basemap = 'satellite';

// https://www.mapbox.com/api-documentation/#styles
        let map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/' + basemap + '-v9',
            center: [(mapBounds[0] + mapBounds[2]) / 2, (mapBounds[1] + mapBounds[3]) / 2],
            zoom: 12
        });

map.on("load", function () {
            axios.get(
                url,
                {
                    headers: { "authorization": auth }
                })
                .then((response) => {

let data = response.data;

let features = [];

for (beacon in data) {

//decode the beaconGeoHash value to lat, lon
                        let decodedLatLng = Geohash.decode(data[beacon].beaconGeohash);

feature = {
                            type: 'Feature',
                            geometry: {
                                type: 'Point',
                                coordinates: [decodedLatLng.lon, decodedLatLng.lat]
                            },
                            properties: {
                                beaconTransactionHash: data[beacon].beaconTransactionHash,
                                beaconName: data[beacon].beaconName,
                                beaconGeohash: data[beacon].beaconGeohash,
                                beaconBeaconAddress: data[beacon].beaconBeaconAddress,
                                beaconFactoryAddress: data[beacon].beaconFactoryAddress
                            }
                        };

features.push(feature);
                    }

let geojson = {
                        type: 'FeatureCollection',
                        features: features
                    };

map.addSource('data', {
                        type: 'geojson',
                        data: geojson
                    });

map.addLayer({
                        id: 'points',
                        source: 'data',
                        type: 'circle',
                        paint: {
                            'circle-radius': 5,
                            'circle-color': 'yellow'
                        }
                    })
                },
                    (error) => {
                        let status = error.response.status
                    }
                );
        });
    </script>
</body>
</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js

https://unpkg.com/axios/dist/axios.min.js

https://cdn.jsdelivr.net/npm/latlon-geohash@1.1.0/latlon-geohash.min.js