Skip to content

Instantly share code, notes, and snippets.

@fredj
Created June 10, 2016 06:17
Show Gist options
  • Save fredj/fba80e82830f0381aca18faf1c7ddcc2 to your computer and use it in GitHub Desktop.
Save fredj/fba80e82830f0381aca18faf1c7ddcc2 to your computer and use it in GitHub Desktop.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Participant's location">
<Require feature="rpc"/>
<Require feature="views"/>
</ModulePrefs>
<Content type="html"><![CDATA[
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.16.0/ol.css" type="text/css">
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.marker {
width: 32px;
height: 32px;
margin-left: -16px;
margin-bottom: -16px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script src="//plus.google.com/hangouts/_/api/v1/hangout.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.16.0/ol.js" ></script>
<script>
// Copyright (c) 2013-2016 by frederic.junod@gmail.com
// Licensed under the http://www.wtfpl.net/ license
//
// Bug report / pull request to: https://github.com/fredj/hangoutmap
function init() {
gapi.hangout.onApiReady.add(function(event) {
if (event.isApiReady) {
main();
}
});
};
function main() {
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
markers = {};
geolocation = new ol.Geolocation({
projection: map.getView().getProjection()
});
geolocation.on('change', function() {
gapi.hangout.data.setValue(gapi.hangout.getLocalParticipantId(),
JSON.stringify({
position: geolocation.getPosition(),
accuracy: geolocation.getAccuracy()
})
);
});
gapi.hangout.data.onStateChanged.add(function(event) {
var participants = gapi.hangout.data.getKeys();
for (var i = 0; i < participants.length; i++) {
var participant = gapi.hangout.getParticipantById(participants[i]);
if (participant) {
var location = JSON.parse(gapi.hangout.data.getValue(participant.id));
if (location.position) {
var marker = markers[participant.id];
if (marker === undefined) {
var img = document.createElement('img');
img.className = 'marker';
img.src = participant.person.image.url;
img.title = participant.person.displayName;
marker = new ol.Overlay({
element: img
});
map.addOverlay(marker);
markers[participant.id] = marker;
}
marker.setPosition(location.position)
}
}
}
});
// called whenever a participant stops running this app.
gapi.hangout.onParticipantsDisabled.add(function(event) {
// var participants = event.disabledParticipants;
// for (var i = 0; i < participants.lenght; i++) {
// api.hangout.data.clearValue(participants[i].id);
// }
// FIXME: remove marker
});
geolocation.setTracking(true);
};
gadgets.util.registerOnLoadHandler(init);
</script>
</body>
</html>
]]>
</Content>
</Module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment