diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2016-12-16 15:33:26 +1300 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2016-12-16 15:33:45 +1300 |
commit | 37d91fdce003cc0e82bc6c3c1f7ee64c63fde1f8 (patch) | |
tree | 556ceb78c8d69b1db4b1be4a79d764c26fa0bec9 /web | |
parent | 5c39421a9840cdbfd5a339824394a6f4d86542db (diff) | |
download | trackermap-web-37d91fdce003cc0e82bc6c3c1f7ee64c63fde1f8.tar.gz trackermap-web-37d91fdce003cc0e82bc6c3c1f7ee64c63fde1f8.tar.bz2 trackermap-web-37d91fdce003cc0e82bc6c3c1f7ee64c63fde1f8.zip |
Implement simple map markers
Diffstat (limited to 'web')
-rw-r--r-- | web/simple/app.js | 37 |
1 files changed, 35 insertions, 2 deletions
diff --git a/web/simple/app.js b/web/simple/app.js index 1a5fabf1..19c4de59 100644 --- a/web/simple/app.js +++ b/web/simple/app.js @@ -17,10 +17,30 @@ var url = 'http://localhost:8082'; var token = 'TOKEN'; +var style = new ol.style.Style({ + image: new ol.style.Circle({ + fill: new ol.style.Fill({ + color: 'teal' + }), + stroke: new ol.style.Stroke({ + color: 'navy', + width: 2 + }), + radius: 7 + }) +}); + +var source = new ol.source.Vector(); + +var markers = {}; + var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() + }), + new ol.layer.Vector({ + source: source }) ], target: 'map', @@ -55,8 +75,21 @@ ajax('GET', url + '/api/session?token=' + token, function(user) { socket.onmessage = function (event) { var data = JSON.parse(event.data); - - console.log(data); + if (data.positions) { + for (i = 0; i < data.positions.length; i++) { + var position = data.positions[i]; + var marker = markers[position.deviceId]; + var point = new ol.geom.Point(ol.proj.fromLonLat([position.longitude, position.latitude])); + if (!marker) { + marker = new ol.Feature(point); + marker.setStyle(style); + markers[position.deviceId] = marker; + source.addFeature(marker); + } else { + marker.setGeometry(point); + } + } + } }; }); |