Skip to content

Instantly share code, notes, and snippets.

@kejace

kejace/.block

Forked from FergusDevelopmentLLC/.block
Last active March 27, 2018 02:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kejace/e29a2744e533131adfec393eb18ed1f3 to your computer and use it in GitHub Desktop.
Save kejace/e29a2744e533131adfec393eb18ed1f3 to your computer and use it in GitHub Desktop.
Download ZIP
FOAM API Example - CSC search
Raw
.block
license: mit
Raw
README.md

FOAM API Example - CSC search

Raw
index.html
<!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: http://bl.ocks.org/FergusDevelopmentLLC/70150641ddb8c7eb93cebcc689faaae8
// get bounding box: http://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;
}
let tooltip_msg = '<strong>CSC Details</strong></br>';
tooltip_msg += `Name: ${e.features[0].properties.beaconName}<br/>`;
tooltip_msg += `TransactionHash: ${e.features[0].properties.beaconTransactionHash}<br/>`;
tooltip_msg += `Geohash: ${e.features[0].properties.beaconGeohash}<br/>`;
tooltip_msg += `Address: ${e.features[0].properties.beaconBeaconAddress}<br/>`;
tooltip_msg += `FactoryAddress: ${e.features[0].properties.beaconFactoryAddress}<br/>`;
tooltip_msg += `Longitude: ${coordinates[0]}<br/>`;
tooltip_msg += `Latitude: ${coordinates[1]}<br/>`;
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment