Turn by Turn Navigation in the Browser

Turn by Turn Navigation in the Browser

Vorstellung von instantnavi.com bei RheinMainJS im Dezember 2012.

Mit instantnavi kann man eigene Turn-by-Turn Navigationssysteme
erstellen, die man auf jedem iPhone und Android Gerät nutzen und teilen kann.

instantnavi ist eine HTML5 web app, die man auf dem HomeScreen des Gerätes speichern kann.

37df158edd0f4ca5fc2fff2e87f43487?s=128

Christian Bäuerlein

December 10, 2012
Tweet

Transcript

  1. 1

  2. Christian Bäuerlein JavaScript / Ruby Developer @flinc 2 Hallo RheinMainJS!!!

  3. Turn by Turn Navigation 3

  4. HTML5 Geolocation API 4

  5. 5

  6. Turn by Turn Navigation im Browser 6

  7. 7

  8. Turn by Turn Navigation im Browser 8

  9. 9 Warum?

  10. 10 Ein neues Konzept für Echtzeit-Navigation

  11. Throwaway Navigation 11

  12. Where is Navigation at? 12

  13. 13

  14. 14

  15. 15

  16. 16 Mind the Gap!

  17. 17

  18. 18

  19. 19 Party at my house! This is how you get

    here...
  20. Throwaway Navigation 20

  21. One Navi for One Destination 21

  22. Navigation for purpose 22 a single

  23. Navigation for purpose 23 YOUR

  24. 24 Your Party

  25. 25 Your Restaurant

  26. 26 Your Company

  27. 27 Your Place To Be

  28. 28

  29. Do it in the Browser! 29

  30. Your Navi 30

  31. Your Navi = a URL 31

  32. No Installing No Closing of Apps No Context Switch 32

  33. Customize it! 33

  34. Customize it! 34

  35. Share it! 35

  36. Integrate it! 36

  37. 37

  38. 38

  39. ZOMG Live Presentation! 39

  40. 40

  41. Tech Background 41

  42. 42

  43. ffwdme.js 43 JavaScript Framework for Turn-by-Turn Navigation Systems

  44. ffwdme.js 44 JavaScript Framework for Turn-by-Turn Navigation Systems Widget-/ Event-Based

  45. ffwdme.bind(‘navigation:onroute‘, cb); 45

  46. 46

  47. ffwdme.js 47 JavaScript Framework for Turn-by-Turn Navigation Systems Widget-/ Event-Based

    Rich Event-Data
  48. { nextDirection: ..., // next street distance: 200, // meters

    to turn duration: 15, // secs to turn ratio: 0.71 // route completed } 48
  49. 49 Widget: 10-50 LOC

  50. ffwdme.js 50 JavaScript Framework for Turn-by-Turn Navigation Systems Extendable Widget-/

    Event-Based Rich Event-Data
  51. ffwdme.js 51 JavaScript Framework for Turn-by-Turn Navigation Systems Extendable Modular

    Widget-/ Event-Based Rich Event-Data
  52. ffwdme.js 52 JavaScript Framework for Turn-by-Turn Navigation Systems Extendable 3+

    Routing Services Modular Widget-/ Event-Based Rich Event-Data
  53. Was kann ich damit anfangen? 53

  54. instantnavi.com/developers 54

  55. http://instantnavi.com/to/mynavi 55

  56. http://instantnavi.com/to/mynavi ?destination[lat]=49.9 &destination[lng]=8.85 &destination[street]=HoheStrasse &destination[city]=Dieburg 56

  57. 57 mehr-tanken

  58. mehr-tanken 58

  59. mehr-tanken 59

  60. mehr-tanken 60

  61. mehr-tanken 61

  62. 62

  63. @fabrik42 github.com/fabrik42 christian@instantnavi.com 63

  64. Let‘s talk! 64

  65. instantnavi.com @instantnavi facebook.com/instantnavi 65

  66. 66