1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| <html>
<head>
<meta charset='utf-8' />
<title>FOAM Map API Example</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://unpkg.com/latlon-geohash@^1.1.0/latlon-geohash.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<mapbox-access-token>'; // Replace with your Mapbox access token
// Map
const BOUNDING_BOX = [
[131.769, 37.141],
[131.969, 37.341]
];
const INITIAL_ZOOM = 15
// Icons
/* Emojis via https://twemoji.twitter.com/
* Copyright 2019 Twitter, Inc and other contributors
* Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/
*/
const icons = [{
"name": "application",
"state": "application",
"url": "https://twemoji.maxcdn.com/2/72x72/1f6a9.png"
},{
"name": "challenged",
"state": "challenged",
"url": "https://twemoji.maxcdn.com/2/72x72/1f5ef.png"
},{
"name": "listing",
"state": "listing",
"url": "https://twemoji.maxcdn.com/2/72x72/1f6a9.png"
},{
"name": "removed",
"state": "removed",
"url": "https://twemoji.maxcdn.com/2/72x72/2620.png"
}]
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v10',
center: getMapCenter(BOUNDING_BOX),
zoom: INITIAL_ZOOM
});
// Functions
function getMapCenter(bounding_box) {
return [(bounding_box[0][0] + bounding_box[1][0]) / 2, (bounding_box[0][1] + bounding_box[1][1]) / 2];
}
function getPointCoords(geohash) {
const coords = Geohash.decode(geohash);
return [coords['lon'], coords['lat']];
}
function addLayer(icon, bounding_box) {
const state = icon['state']
fetch('https://map-api-direct.foam.space/poi/filtered?swLng=' + bounding_box[0][0] + '&swLat=' + bounding_box[0][1] + '&neLng=' + BOUNDING_BOX[1][0] + '&neLat=' + bounding_box[1][1] + '&status=' + icon['state'] + '&sort=most_value&limit=100&offset=0')
.then(result => result.json())
.then(json => {
const featureCollection = json.map(function(record) {
const feature = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": getPointCoords(record.geohash)
}
}
return feature;
});
const geojson = {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": featureCollection
}
};
map.addLayer({
"id": icon['name'],
"type": "symbol",
"source": geojson,
"layout": {
"icon-image": icon['name'],
"icon-allow-overlap": true,
"icon-size": 0.5,
}
});
});
}
// Load map
map.on('load', function() {
// Load icons
icons.forEach(function(icon) {
map.loadImage(icon['url'], function(error, image) {
if (error) throw error;
map.addImage(icon['name'], image);
addLayer(icon, BOUNDING_BOX);
})
});
});
</script>
</body>
</html>
|