1. ® ® copyright © 2013 Open Geospatial Consortium What HTML5 and REST mean to the Geo community Raj Singh, PhD Open Geospatial Consortium rsingh@myogc.org

2. OGC ® copyright © 2013 Open Geospatial Consortium OGC and New Web Technologies For today’s discussion –HTML5 Device Positioning Canvas & SVG WebGL Thinking outside the browser –REST Concepts Implementations Related OGC activities –GeoPackage –GeoJSON / TopoJSON –Linked Geodata –POI standards

3. OGC ® copyright © 2013 Open Geospatial Consortium HTML5

4. OGC ® copyright © 2013 Open Geospatial Consortium Device Positioning Geolocation API –allows browsers to detect and track the WGS84 style latitude, longitude and altitude of the user's device. Device Orientation Event Specification –allows browsers to track how the device is oriented in three dimensions in realtime as it is rotated. –devicemotion Event allows browsers to track accelerometer data as the mobile device is moved through space. 4

5. OGC ® copyright © 2013 Open Geospatial Consortium Canvas allows for dynamic scriptable rendering of bitmap images consists of a drawable region that JavaScript may access through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics –points, lines, polygons and text –images: with scale, rotate, translate, transform Notes –a 30 MB file GeoJSON will crash the browser –canvas is static. Once the shapes are drawn there's not much you can do with them. you have to be really creative if you want to develop something as basic as a mouse-over highlight. Might want to use SVG… 5

6. OGC ® copyright © 2013 Open Geospatial Consortium Canvas & SVG 6 http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ Canvas example: Bing Maps and Html5 Canvas: http://www.youtube.com/watch?v=jzWfrjAxIuM http://www.youtube.com/watch?v=jzWfrjAxIuM SVG examples: http://d3js.org http://www.jvectormap.com

7. OGC ® copyright © 2013 Open Geospatial Consortium WebGL WebGL adds a 3D graphics context to the Canvas Element –makes it possible to render and manipulate 3D content within web browsers without the need for any extra plugins or add ons. –content is directly accessible via javascript and can easily be connected to other APIs like Geolocation, Orientation and Motion to provide the basis for a simple geolocation based Augmented Reality framework no plug-ins (except IE) hardware accellerated Google Maps uses WebGL 7

8. OGC ® copyright © 2013 Open Geospatial Consortium Thinking outside the Browser: Offline Web Apps new offline storage APIs –Web Storage (also called "Local Storage" or "DOM Storage") –Web SQL Database (or simply "SQL Storage”) –IndexedDB –File Storage –no size limits! online/offline events Web Workers allow background activities to process API data, image analysis and other actions without impacting the performance of the main web browser's user interface 8

9. OGC ® copyright © 2013 Open Geospatial Consortium Thinking outside the Browser: Web Sockets/Workers Web Sockets provide a realtime two way interface between web browsers, servers and other data sources. Browsers no longer need to poll for information. Data can be pushed to the browser in realtime and then used instantly to update and manipulate objects var connection = new WebSocket('ws://example.org/echo', ['soap', 'xmpp']); use it when you need low-latency: there have been HTTP workarounds to do this but they come with all the overhead of HTTP abandoning HTTP: good or bad? 9

10. OGC ® copyright © 2013 Open Geospatial Consortium Thinking outside the Browser: Drag & Drop from one HTML element on the page to another from the desktop to the browser example uses –shape editing on a canvas –map layer re-ordering in a legend 10

11. OGC ® copyright © 2013 Open Geospatial Consortium Summary HTML5 provides a consistent, unified client development platform across all devices and operating systems. It addresses traditional disadvantages to web-centric development. –rich user interface –online vs. offline –multimedia: video, audio, mapping, 3D –hardware access But the tradeoffs regarding security, server load, etc. are yet to be discovered 11

12. OGC ® copyright © 2013 Open Geospatial Consortium REST

13. OGC ® copyright © 2013 Open Geospatial Consortium Concepts Resources and Representations HATEOAS hypermedia as the engine of application state –A REST client needs no prior knowledge about how to interact with any particular application or server beyond a generic understanding of hypermedia (links) –software design on the scale of decades!

14. OGC ® copyright © 2013 Open Geospatial Consortium Implementations GeoServer REST –Generic vector data “REST-ification” City of Chicago on GitHub –Released in February to much fanfare… –We just released five datasets—street locations, building footprints, bike routes, pedway routes and bike rack locations—with an open source license on GitHub. –Anyone can now change the data when new bike paths are built, when roads are under construction, and new buildings are erected. –When you want to improve our data, just fork it. –Users are encouraged to improve data accuracy, combine it with other data sources, or download and use it for analysis or a new app.

15. OGC ® copyright © 2013 Open Geospatial Consortium How is Chicago doing? Not so well… No updates No issues handled No pull requests

16. OGC ® copyright © 2013 Open Geospatial Consortium References HTML5 http://html5rocks.com/ http://html5rocks.com/ Geolocation API http://www.w3.org/TR/geolocation-API/ http://www.w3.org/TR/geolocation-API/ DeviceOrientation Event Specification http://www.w3.org/TR/orientation-event/ http://www.w3.org/TR/orientation-event/ Canvas http://www.w3.org/TR/2dcontext/ http://www.w3.org/TR/2dcontext/ HATEOAS http://en.wikipedia.org/wiki/HATEOAS http://en.wikipedia.org/wiki/HATEOAS City of Chicago on GitHub https://github.com/Chicago https://github.com/Chicago © 2013 Open Geospatial Consortium, Inc. 16