diff options
-rw-r--r-- | web/simple/app.js | 39 |
1 files changed, 27 insertions, 12 deletions
diff --git a/web/simple/app.js b/web/simple/app.js index a37d9d5..f43d537 100644 --- a/web/simple/app.js +++ b/web/simple/app.js @@ -17,18 +17,32 @@ var url = window.location.protocol + '//' + window.location.host; var token = (window.location.search.match(/token=([^&#]+)/) || [])[1]; -var style = new ol.style.Style({ - image: new ol.style.Circle({ - fill: new ol.style.Fill({ - color: 'teal' +var style = function (label) { + return new ol.style.Style({ + image: new ol.style.Circle({ + fill: new ol.style.Fill({ + color: 'teal' + }), + stroke: new ol.style.Stroke({ + color: 'black', + width: 2 + }), + radius: 7 }), - stroke: new ol.style.Stroke({ - color: 'navy', - width: 2 - }), - radius: 7 - }) -}); + text: new ol.style.Text({ + text: label, + fill: new ol.style.Fill({ + color: 'black' + }), + stroke: new ol.style.Stroke({ + color: 'white', + width: 2 + }), + font: 'bold 12px sans-serif', + offsetY: -16 + }) + }); +}; var source = new ol.source.Vector(); @@ -82,8 +96,9 @@ ajax('GET', url + '/api/session?token=' + token, function(user) { var marker = markers[position.deviceId]; var point = new ol.geom.Point(ol.proj.fromLonLat([position.longitude, position.latitude])); if (!marker) { + var device = devices.find(function (device) { return device.id === position.deviceId }); marker = new ol.Feature(point); - marker.setStyle(style); + marker.setStyle(style(device.name)); markers[position.deviceId] = marker; source.addFeature(marker); } else { |