/
example.html
128 lines (112 loc) · 3.42 KB
/
example.html
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
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.2/fetch.js"></script>
<script src="./dist/geeo.js"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 36, lng: -8 },
scrollwheel: false,
zoom: 8
});
// initialize a geeoHTTP client to get a token (dev feature only)
var geeoHttp = new geeo.GeeoHTTP("http://localhost:8000")
// get token, give a name to our agent and our view
geeoHttp.getGuestToken("agent"+Date.now(), "view"+Date.now())
.then(function (token) {
// create a new WS connection to Geeo
var geeoWS = new geeo.GeeoWS("ws://localhost:8000/ws")
var markers = {}
// when use clicks on map, add a point of interest... Creator set by server
map.addListener('click', function(e) {
geeoWS.addPOI({
poi_id: "your POI "+Date.now(),
pos: [e.latLng.lng(), e.latLng.lat()],
publicData: {nothing: "special"}
})
});
// a new POI appears in view
geeoWS.view.on("poiEntered", function(poi) {
markers[poi.id] = new google.maps.Marker({
position: {lat: poi.pos[1], lng: poi.pos[0]},
map: map,
opacity: 0.3,
title: poi.id
})
})
// POI out of view
geeoWS.view.on("poiLeft", function(poi) {
markers[poi.id].setMap(null)
delete(markers, poi.id)
})
// Agent enters the view
geeoWS.view.on("agentEntered", function(agent) {
markers[agent.id] = new google.maps.Marker({
position: {lat: agent.pos[1], lng: agent.pos[0]},
map: map,
title: agent.id,
opacity: 1
});
})
// Agent leaves the view
geeoWS.view.on("agentLeft", function(agent) {
markers[agent.id].setMap(null) // remove
delete(markers, agent.id)
})
// Agent moves inside view
geeoWS.view.on("agentMoved", function(agent) {
markers[agent.id].setPosition( {lat: agent.pos[1], lng: agent.pos[0]} )
})
// Once geeo WS is connected
geeoWS.on("connect", function() {
// when the bounds of the map change
map.addListener("bounds_changed", geeo.debounce(function () {
var bounds = map.getBounds().toJSON()
// tell Geeo View to follow map bounds
geeoWS.view.move(bounds.west, bounds.south, bounds.east, bounds.north)
}, 500))
// try geolocation in browser
if (navigator.geolocation) {
navigator.geolocation.watchPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
// set the center of the map, which will also trigger a change in bounds of view
map.setCenter(pos);
// move our use to his real position
geeoWS.move(position.coords.longitude, position.coords.latitude)
}, function() {
alert("Can't determine your position, let's say you're in Tenerife")
geeoWS.move(-16.7173771, 28.0479823)
}, { enableHighAccuracy: true })
} else {
alert("No support for geolocation in your browser, let's say you're in Tenerife")
geeoWS.move(-16.7173771, 28.0479823)
}
})
// all the magic starts now
geeoWS.connect(token)
}).catch(console.error)
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYKPaA9Umqj7XEhu-GIKBu7b2pJFCvLKQ&callback=initMap" async
defer></script>
</body>
</html>