FOAM API Example - CSC search

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>FOAM API Example - CSC search</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <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>

<style>

#menu {
            position: absolute;
            background: whitesmoke;
            padding: 10px;
            font-family: 'Open Sans', sans-serif;
            margin: 0;
            padding: 5px;
            display: none;
        }

#no-result {
            margin: 5px 0 0 0;
            display: none;
            font-family: Arial, Helvetica, sans-serif;
            font-size: .8em;
        }
    </style>

<div id='map'></div>
    <div id='menu'>
        <input type='text' id='search-box' placeholder="Search beacon name" />
        <button id='search-button'>Search</button>
        <div id='no-result'>
            <strong>No results</strong>
        </div>
    </div>
    <script>

// see this in action: https://bl.ocks.org/FergusDevelopmentLLC/70150641ddb8c7eb93cebcc689faaae8

// get bounding box: https://bboxfinder.com
        let mapBounds = [-131.835938, 6.140555, 38.320313, 62.512318];//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];

//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: 2
        });

map.on("load", function () {

makeEnterKeyPressDoSearch();

document.getElementById('menu').style = 'display:block';

document.getElementById('search-button').onclick = function () {

if (!document.getElementById('search-box').value || /^\s*$/.test(document.getElementById('search-box').value)) {
                    return;//return if nothing entered in search box.
                }

let searchUrl = 'https://api-beta.foam.space/search?query=' + document.getElementById('search-box').value;
                //https://api-beta.foam.space/search?q=London123

axios.get(searchUrl, { headers: { "authorization": auth } })

.then((response) => {

if (response.data.length > 0) {
                            document.getElementById('no-result').style = 'display:none';
                            let beaconUrl = 'https://api-beta.foam.space/beacon/' + response.data[0]['shDocId'];
                            //https://api-beta.foam.space/beacon/4ba12ad784ff4e596175cd3f38d04d582030561b
                            return axios.get(beaconUrl, { headers: { 'Authorization': auth } })
                        }
                        else {
                            document.getElementById('no-result').style = 'display:block';
                        }

})
                    .then((response) => {

if (!response) { return; }

let beacons_arr = [];
                        beacons_arr.push(response.data);
                        let geojson = GetGeoJsonFrom(beacons_arr);

// remove any previous searches        
                        if (map.getLayer('beacons')) {
                            map.removeLayer('beacons');
                        }

// remove any previous searches    
                        if (map.getSource('data')) {
                            map.removeSource('data');
                        }

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

map.addLayer({
                            id: 'beacons',
                            source: 'data',
                            type: 'circle',
                            paint: {
                                'circle-radius': 5,
                                'circle-color': '#ff00ff'
                            }
                        });

target = [];
                        target.push(geojson.features[0].properties['beaconLng']);
                        target.push(geojson.features[0].properties['beaconLat']);

//https://www.mapbox.com/mapbox-gl-js/example/flyto-options/
                        map.flyTo({
                            center: target,
                            zoom: 13,
                            bearing: 0,
                            speed: 0.9, // make the flying slow
                            curve: 3, // change the speed at which it zooms out
                            easing: function (t) {
                                return t;
                            }
                        });

handlePopup();

});
            };
        });

handlePopup = () => {

// Create a popup, but don't add it to the map yet.
            let popup = new mapboxgl.Popup({
                closeButton: false,
                closeOnClick: false
            });

map.on('mouseenter', 'beacons', function (e) {

// Change the cursor style as a UI indicator.
                map.getCanvas().style.cursor = 'pointer';

let coordinates = [e.features[0].properties.beaconLng, e.features[0].properties.beaconLat];

// Ensure that if the map is zoomed out such that multiple copies of the feature are visible, the popup appears over the copy being pointed to.
                while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                }

// Populate the popup and set its coordinates based on the feature found.
                popup.setLngLat(coordinates)
                    .setHTML(tooltip_msg)
                    .addTo(map);
            });

map.on('mouseleave', 'beacons', function () {
                map.getCanvas().style.cursor = '';
                popup.remove();
            });
        }

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;

}

makeEnterKeyPressDoSearch = () => {
            document.getElementById('search-box').addEventListener('keyup', function (event) {
                event.preventDefault();
                if (event.keyCode === 13) {
                    document.getElementById('search-button').click();
                }
            });
        }

</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