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.
2.
3.
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
5.
6.
7.
8.
9.
10.
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
13.
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
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="text/javascript" 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="text/javascript" src=" touch3.js " ></script> this.touchhandler = new TouchHandler(map, 2); Touch Controls Use of Geolocation API if(typeof(navigator.geolocation) != "undefined"){ navigator.geolocation. getCurrentPosition (foundLocation, handleError); } Some stylesheet stuff <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="viewport" content="minimum-scale=1.0, width=device-width, ..>
24. Geolocation API if(typeof(navigator.geolocation) != "undefined"){ 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) { $("#debug").append("<p>" + "Attempt to get location failed: " + positionError.message + " </p>") ; };
25.
26. HTML5 Canvas var img = new Image(255,255) ; img.src = "http://.../testimg/test1.png" ; var newCanvas = document.getElementById("canvasimg") ; var ctx = newCanvas.getContext("2d") ; var newimg = ctx.drawImage(img, 0, 0); <canvas id="canvasimg" width="250" height="250"> 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
28.
29.
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
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