Presented by Ben Butchart and Murray King at the Institutional Web Managers Workshop, 12 July 2010, Sheffield

1. Location Based Services Without the Cocoa Institutional Web Managers Workshop , 12 th July 2010 Ben Butchart, Murray King This work is licensed under a Creative Commons Attribution- NonCommercial 2.0 England & Wales License . But note caveat.

4. “… delivering a map to a smart phone device within a range of educational contexts including field trips in remote areas, where network connectivity may be limited. It was also anticipated that the application might assist data collection, for example, taking pictures of rocks during a field study.” Informal Requirements

11. Requirements / Approach Portable Local storage Sensors and gadgets Touch gestures Location sensors Hybrid Mobile Web Native Requirement

12. Requirements / Approach Yes (partial) Yes no Portable Yes (via HTML5 Cache and Storage API) Yes (via HTML5 Cache and Storage API) yes Local storage Yes (usually via framework API) No yes Sensors and gadgets Yes (partial) Yes (partial) yes Touch gestures Yes (via HTML5 geo location API) Yes (via HTML5 geo location API) yes Location sensors Hybrid Mobile Web Native Requirement

14. Digimap Open Stream ( New Edina Service) http://osopen.edina.ac.uk Ordnance Survery OpenData Edina provide WMS Service You can register for your API key here (free and unrestricted use for ac.uk)

15. Digimap Open Stream WMS Ordnance Survey OpenData maps Miniscale 1:250000 Colour Raster Vector Map District (raster) OS StreetView

16. Digimap Open Stream WMS

17. Digimap Open Stream WMS example http://osopen.edina.ac.uk/openstream/wms?REQUEST=GetMap&SERVICE=WMS &VERSION=1.1.1 &BBOX= 325000,674000,326000,675000 &WIDTH=460 &HEIGHT=640 &SRS= EPSG:27700 &FORMAT=image/ png &LAYERS= osfree &CACHE= false &TOKEN= YOUR_KEY

18. http://osopen.edina.ac.uk/openstream/wms?REQUEST=GetMap&SERVICE=WMS &VERSION=1.1.1 &BBOX=325000,674000,326000,675000 &WIDTH=460 &HEIGHT=640 &SRS=EPSG:27700 &FORMAT=image/png &LAYERS=osfree &CACHE=false &TOKEN=YOUR_KEY Digimap Open Stream WMS example

19. Digimap Open Stream OpenLayers Example http://osopen.edina.ac.uk/help/map

20. Digimap Open Stream OpenLayers Example Code Example OpenLayers code here: http://osopen.edina.ac.uk/help/map

21. Digimap Open Stream OpenLayers Example Code var os_options = { token: apikey , format: "image/png", layers: "osfree", cache: true }; map = new OpenLayers.Map('map', {controls: [], projection: new OpenLayers.Projection("EPSG:27700"), units: "m", maxExtent: bounds, resolutions: [1763.889,352.778,176.389,88.194….0.882,0.441]} ); var osfree = new OpenLayers.Layer.WMS ( "Edina OS OpenData WMS"," http://osopen.edina.ac.uk/openstream/wms ", os_options ); map.addLayers([osfree]);

22. OpenLayers Example: convert latlong <script type=&quot;text/javascript&quot; src=' coordomatic1.js '></script> var natgrid = new Edina.EPSG_27700() ; var latlong = natgrid.toLocalSystem(55.93682192813903 , -3.180231279418976 var lonLat = new OpenLayers.LonLat(latlong[1], latlong[0]) ; map.zoomTo(10) ; map.setCenter(lonLat);

23. What’s different in mobile OpenLayers? <script type=&quot;text/javascript&quot; src=&quot; touch3.js &quot; ></script> this.touchhandler = new TouchHandler(map, 2); Touch Controls Use of Geolocation API if(typeof(navigator.geolocation) != &quot;undefined&quot;){ navigator.geolocation. getCurrentPosition (foundLocation, handleError); } Some stylesheet stuff <meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot; /> <meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot; /> <meta name=&quot;viewport&quot; content=&quot;minimum-scale=1.0, width=device-width, ..>

24. Geolocation API if(typeof(navigator.geolocation) != &quot;undefined&quot;){ navigator.geolocation. getCurrentPosition (foundLocation, handleError); } function foundLocation(position) { lon = position. coords.longitude ; lat = position. coords.latitude ; var lonLat = new OpenLayers.LonLat(latlong[1], latlong[0]) ; map.setCenter(lonLat); } function handleError(positionError) { $(&quot;#debug&quot;).append(&quot;<p>&quot; + &quot;Attempt to get location failed: &quot; + positionError.message + &quot; </p>&quot;) ; };

26. HTML5 Canvas var img = new Image(255,255) ; img.src = &quot;http://.../testimg/test1.png&quot; ; var newCanvas = document.getElementById(&quot;canvasimg&quot;) ; var ctx = newCanvas.getContext(&quot;2d&quot;) ; var newimg = ctx.drawImage(img, 0, 0); <canvas id=&quot;canvasimg&quot; width=&quot;250&quot; height=&quot;250&quot;> This demo uses the HTML canvas object. </canvas> 1. Create canvas element http://mobilegeo.wordpress.com/2009/11/04/ html5-canvas-for-mobile-apps / Short url: http://delivr.com/11cic 2. Draw image on canvas

27. HTML5 Canvas Blogpost : http://mobilegeo.wordpress.com/2009/11/04/ html5-canvas-for-mobile-apps / Short url: http://delivr.com/11cic if ( drawMode == true ) { var xy = getxy(e, newCanvas ) ; ctx.fillRect(xy.x,xy.y,5,5) ; return ; } 3. Draw graphic on canvas image http://mab.edina.ac.uk/ testimg/canvasiphone.html Short: http://delivr.com/11cj0

30. HTML5 Elevation Demo 1 Blog post: http://mobilegeo.wordpress.com/2010/03/01/integrating-openlayers-and-html5-canvas/ http://delivr.com/11cir

31. HTML5 Elevation Demo 2 Elevation demo: drawing a line on a map using HTML5 Canvas. At each point on the line, the height is extracted from the base terrain layer (previous slide) and plotted on the bar chart

38. Layar: architecture

39. Layar: set up developer account

40. Layar: create a Layar http://publishing.layar.com/publishing/layers/

41. Layar publishing

42. Layar test: getPointOfInterest http://publishing.layar.com/publishing/ test/ iwmw2010demo1

43. Layar testing: POI search failed Probably a JSON format error

44. Check JSON with JSONLint http://www.jsonlint.com/

45. Layar testing: Success!

46. Layar: Points of Interest JSON { &quot;hotspots&quot;: [ { &quot;distance&quot;: 100, &quot;attribution&quot;: &quot;EDINA POI provider&quot;, &quot;title&quot;: &quot;Halifax Buildings, location = 53.371424, -1.505796&quot;, &quot;lon&quot;: -1505796, &quot;imageURL&quot;: &quot;http://dlib-rainbow.ucs.ed.ac.uk/layar/img/halifax.jpg&quot;, &quot;line2&quot;: &quot;University of Sheffield&quot;, &quot;line3&quot;: &quot;Endcliffe Village&quot;, &quot;actions&quot;: [ {&quot;uri&quot;: &quot;http://www.shef.ac.uk/accommodation/prospective/endcliffe&quot;, &quot;label&quot;: &quot;Open website&quot; } ], &quot;lat&quot;: 53371424, &quot;type&quot;: 1, &quot;id&quot;: &quot;halifax&quot; } ], &quot;layer&quot;: &quot;iwmw2010demo1&quot;, &quot;errorString&quot;: &quot;ok&quot;, &quot;morePages&quot;: false, &quot;errorCode&quot;: 0, &quot;nextPageKey&quot;: null }

47. Points of Interest – go find ‘em!

48. Points of Interest – go find ‘em! Endcliffe Vale Flats Longitude -1.508054 Latitude 53.371387 Froggatt Longitude -1.508688 Latitude 53.371907 The Edge Longitude -1.507504 Latitude 53.372711 Jonus Court Longitude -1.506040 Latitude 53.371751 Jonus court

50. Contrasting approaches to App Development