D3 Examples - FOAM API Example - Mapbox.GL custom marker

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>FOAM API Example - Mapbox.GL custom marker</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>
    <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 = [-11.030273, 35.389050, 27.202148, 58.950008];//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=-11.030273&ymin=27.202148&xmax=35.38905&ymax=58.950008
​
        //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: 4.5
        });
​
        map.on("load", function () {
            /* Image: An image is loaded and added to the map. */
            //https://i.imgur.com/1o46KsM.png
            map.loadImage("https://i.imgur.com/a4kPZyg.png", function (error, image) {
​
                if (error) throw error;
​
                map.addImage("custom-marker", image);
​
                axios.get(
                    url,
                    {
                        headers: { "authorization": auth }
                    })
                    .then((response) => {
​
                        let geojson = GetGeoJsonFrom(response.data);
​
                        map.addSource('data', {
                            type: 'geojson',
                            data: geojson
                        });
​
                        map.addLayer({
                            id: 'beacons',
                            source: 'data',
                            type: 'symbol',
                            layout: {
                                'icon-image': 'custom-marker',
                            }
                        });
​
                    },
                        (error) => {
                            let status = error.response.status
                        }
                    );
            });
        });
​
        GetGeoJsonFrom = (foamBeaconData) => {
​
            let features = [];
​
            for (beacon in foamBeaconData) {
​
                // Decode the beaconGeoHash value to lat, lon using https://github.com/chrisveness/latlon-geohash
                let decodedLatLng = Geohash.decode(foamBeaconData[beacon].beaconGeohash);
​
                // Build the geojson features array
                feature = {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [decodedLatLng.lon, decodedLatLng.lat]
                    },
                    properties: {
                        beaconTransactionHash: foamBeaconData[beacon].beaconTransactionHash,
                        beaconName: foamBeaconData[beacon].beaconName,
                        beaconGeohash: foamBeaconData[beacon].beaconGeohash,
                        beaconBeaconAddress: foamBeaconData[beacon].beaconBeaconAddress,
                        beaconFactoryAddress: foamBeaconData[beacon].beaconFactoryAddress,
                        beaconLat: decodedLatLng.lat,
                        beaconLng: decodedLatLng.lon
                    }
                };
                features.push(feature);
            }
​
            // Add FeatureCollection wrapper
            let geojson = {
                type: 'FeatureCollection',
                features: features
            };
​
            return geojson;
​
        }        
    </script>
​
</body>
​
</html>
    