cotugno/recorder
2
Fork 0
mirror of https://github.com/owntracks/recorder.git synced 2024-11-15 18:08:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

feature: MAP of LAST locations

Browse Source
This commit is contained in:
Jan-Piet Mens 2015-09-08 12:06:34 +02:00
parent 1b3bacc2bd
commit 99cc50f5a4
8 changed files with 207 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
wdocs/index.html
View File

@ -11,5 +11,9 @@ http://localhost:8083/map/index.html?user=jpm&device=test&format=linestring&from
<br />
<br />
<a href="ws.html">Click for Websocket demo; new pubs will be shown there</a>
<ul>
<li><a href="ws.html">Click for Websocket demo; new pubs will be shown there</a></li>
<li><a href="last/index.html">Click for map of LAST locations</a></li>
</ul>
</html>

69
wdocs/last/functions.js Normal file
View File

@ -0,0 +1,69 @@
var map;
var markers = {};
function initialize() {
var lat = 50.098280;
var lon = 10.187189;
var center = new google.maps.LatLng(lat,lon);
mapOptions = {
center: center,
zoom: 3, // 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
disableDefaultUI: false,
panControl: false,
scaleControl: false,
streetViewControl: true,
overviewMapControl: true,
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
/*
* `loc' is a location object obtained via Websockets from the recorder
*/
function map_marker(loc)
{
var id = loc.topic.replace(/\//g, '-');
loc.description = 'FIXme ' + loc.topic;
console.log(JSON.stringify(loc));
if (markers.hasOwnProperty(id)) {
console.log("UPDATE " + id + " marker");
var LatLng = new google.maps.LatLng(loc.lat, loc.lon);
markers[id].setPosition(LatLng);
markers[id].setTitle(loc.description);
} else {
console.log("NEW " + id + " marker");
var LatLng = new google.maps.LatLng(loc.lat, loc.lon);
var m = new google.maps.Marker({
position: LatLng,
map: map,
title: loc.description,
// icon: "marker.php?tid=" + id,
icon: "red-marker.png"
});
markers[id] = m;
console.log("MARKER is " + id + "= " + id);
info(map, m, loc);
}
}
function info(map, marker, data) {
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function(e) {
infowindow.setContent(data.description);
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);

30
wdocs/last/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Recorder Map</title>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="manifest.json">
<link rel="icon" sizes="192x192" href="pista-micro.png">
<link rel="apple-touch-icon" href="pista-micro.png" />
<style type="text/css">
body { font-size: 80%; }
td { border-bottom: 1px solid; border-right: 1px dotted;}
#map-canvas { height: 100% }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&signed_in=true"></script>
<script src="functions.js"></script>
<script src="ws.js"></script>
</head>
<body>
<div id="output"></div>
<div>
<div id="map-canvas" style='width: 100%; height: 600px;'/></div>
</div>
</body>
</html>

47
wdocs/last/last.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">
var out = function(message) {
var div = document.createElement('div');
div.innerHTML = message;
document.getElementById('output').appendChild(div);
};
window.onload = function() {
var url = 'ws://' + location.host + '/ws/last';
var num_messages = 0;
websocket = new WebSocket(url);
websocket.onopen = function(ev) {
out('CONNECTED');
var msg = 'LAST';
out('SENT: ' + msg);
websocket.send(msg);
};
websocket.onclose = function(ev) {
out('DISCONNECTED');
};
websocket.onmessage = function(ev) {
if (!ev.data) {
out('<span style="color: blue;">PING... </span>');
} else {
out('<span style="color: blue;">RESPONSE: ' + ev.data + ' </span>');
num_messages++;
}
/*
if (num_messages > 3) {
websocket.send('exit');
} */
};
websocket.onerror = function(ev) {
out('<span style="color: red; ">ERROR: </span> ' + ev.data);
};
};
</script>
<style> div {font: small Verdana; } </style>
<h2>OwnTracks Recorder WebSocket Test</h2>
<div id="output"></div>
</html>

14
wdocs/last/manifest.json Normal file
View File

@ -0,0 +1,14 @@
{
"name" : "Recorder map",
"icons" : [
{
"src" : "pista-micro.png",
"sizes" : "192x192",
"type" : "image/png",
"density" : "4.0"
}
],
"start_url" : "index.html",
"display" : "standalone",
"orientation" : "portrait"
}

BIN
wdocs/last/pista-micro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
wdocs/last/red-marker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 497 B

42
wdocs/last/ws.js Normal file
View File

@ -0,0 +1,42 @@
var out = function(message) {
var div = document.createElement('div');
div.innerHTML = message;
document.getElementById('output').appendChild(div);
};
window.onload = function() {
var url = 'ws://' + location.host + '/ws/last';
console.log(JSON.stringify(location));
websocket = new WebSocket(url);
websocket.onopen = function(ev) {
// out('CONNECTED');
var msg = 'LAST';
// out('SENT: ' + msg);
websocket.send(msg);
};
websocket.onclose = function(ev) {
out('DISCONNECTED');
};
websocket.onmessage = function(ev) {
if (!ev.data) {
// out('<span style="color: blue;">PING... </span>');
} else {
// out('<span style="color: blue;">RESPONSE: ' + ev.data + ' </span>');
try {
var loc = JSON.parse(ev.data);
map_marker(loc);
} catch (x) {
;
}
}
};
websocket.onerror = function(ev) {
out('<span style="color: red; ">ERROR: </span> ' + ev.data);
};
};