Realtime Geospatial Visualisation with SignalR and OpenLayers

My talk for DDDSW5.

Transcript

1. REALTIME GEOSPATIAL VISUALISATION WITH SIGNALR AND OPENLAYERS MARTIN THORNALLEY May 2014
2. EXAMPLES
3. http://nats.aero/blog/2014/03/europe-24-air-traffic-data-visualisation/
4. http://traintimes.org.uk/map/tube/
5. http://ncg.nuim.ie/i2map-s/projects/transportation/index.html
6. http://bikes.oobrien.com/london/
7. © 2013 DMGT | 6 Data • Dynamic vs static data • Realtime vs recorded data • Animation e.g. position, size, colour • Download or API Maps • Stylised, Satellite/Aerial, Terrain • Google Maps, Bing Maps, Open Street Map, Map Box, Ordnance Survey KEY CONCEPTS
8. IMPLEMENTATION
9. © 2013 DMGT | 8 Realtime visualisation of geotagged tweets • Twitter Public Status Streaming Filter API • SignalR - realtime server generated communication • OpenLayers – flexible, open standards JavaScript mapping library • AngularJS - client-side data binding TECHNOLOGIES
10. © 2013 DMGT | 9 C# Hub – the base class for custom hubs IHubContext - enables access to specific hub instances IHubConnectionContext – provides access to connected clients GlobalHost.ConnectionManager.GetHubContext<T> - returns IHubContext<T> IHubContext.Clients – returns IHubConnectionContext IHubConnectionContext.All – dynamic access to client code enabling server to client direct RPC JavaScript $.connection.//hub name//.client – base object to hang callback functions off $.connection.hub.start() – connect to server to start receiving callbacks SIGNALR - HTTP://SIGNALR.NET/
11. © 2013 DMGT | 10 OpenLayers.Map – the main map class OpenLayers.Layer.OSM – OpenStreetMap layer OpenLayers.Layer.XYZ – alternative tile layer OpenLayers.Layer.Vector – vector layer for features OpenLayers.Feature.Vector – a vector feature e.g. point, line, polygon OpenLayers.Geometry.Point – point feature OpenLayers.LonLat – longitude, latitude pair OpenLayers.Control.SelectFeature – control for interacting with features OpenLayers.Popup.FramedCloud – stylable feature popup OPENLAYERS - HTTP://WWW.OPENLAYERS.ORG/
12. © 2013 DMGT | 11 … CODE
13. © 2013 DMGT | 12 Twitter: @mthornal GitHub: mthornal SpeakerDeck: mthornal THANKS