D3 Examples - FOAM API Example

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>FOAM API Example - Leaflet</title>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js"></script>
    <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>
        
        //see this in action: https://bl.ocks.org/FergusDevelopmentLLC/3b3fd8491b3df85e40d6e0d4b9911493
​
        //get bounding box: https://bboxfinder.com
        let mapBounds = [
            [39.580819,-105.154953], //Southwest corner
            [39.941857,-104.646835]  //Northeast corner
        ];
        
        //create a Leaflet map, assign it to map div, fit it to maxBounds
        let map = L.map('map').fitBounds(mapBounds);
        
        //add basemap
        //check out more basemaps here: https://leaflet-extras.github.io/leaflet-providers/preview/
        let tiles = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}', {
            attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            subdomains: 'abcd',
            minZoom: 0,
            maxZoom: 18,
            ext: 'png'
        }).addTo(map);
        
        let url = 'https://api-beta.foam.space/beacon?lat_min=' + mapBounds[0][1] + '&lon_min=' + mapBounds[0][0] + '&lat_max=' + mapBounds[1][1] + '&lon_max=' + mapBounds[1][0];
        //https://api-beta.foam.space/beacon?xmin=-105.154953&ymin=39.580819&xmax=-104.646835&ymax=39.941857
        
        //for authenticating to the FOAM API below
        let auth = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJkYXQiOiJiZTRlYTZmY2EyNTg5NjM0NjRjYTljNGQxZjBhYmM5NTFmMGE1ZGYyIn0.PV1tnjpqMwAiei5u7nASc8mHjvwph9eUOLX8vGgt6MpJUkbCXlp9mhQj9JVqoejUglEIUZtMsfAbh1_-WXEtvw';
​
        axios.get(
            url,
            {
                headers: { "authorization": auth }
            })
            .then((response) => {
​
                let beacons = response.data;
                
                //for each beacon in the response from FOAM api
                for (beacon in beacons) {
​
                    //decode the beaconGeoHash value to lat, lon
                    //https://github.com/chrisveness/latlon-geohash
                    let decodedLatLng = Geohash.decode(beacons[beacon].beaconGeohash);
                    
                    //use decoded lat/lon to create Markers for map
                    let latlng = L.latLng({ lat: decodedLatLng.lat, lng: decodedLatLng.lon });
                    let marker = L.marker(latlng).addTo(map);
                }
​
            },
                (error) => {
                    let status = error.response.status
                }
            );
    </script>
</body>
    