Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Christian Bäuerlein

December 10, 2012
Tweet

More Decks by Christian Bäuerlein

Other Decks in Programming

Transcript

  1. 1

    View Slide

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

    View Slide

  3. Turn by Turn Navigation
    3

    View Slide

  4. HTML5
    Geolocation API
    4

    View Slide

  5. 5

    View Slide

  6. Turn by Turn Navigation
    im Browser
    6

    View Slide

  7. 7

    View Slide

  8. Turn by Turn Navigation
    im Browser
    8

    View Slide

  9. 9
    Warum?

    View Slide

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

    View Slide

  11. Throwaway Navigation
    11

    View Slide

  12. Where is Navigation at?
    12

    View Slide

  13. 13

    View Slide

  14. 14

    View Slide

  15. 15

    View Slide

  16. 16
    Mind the Gap!

    View Slide

  17. 17

    View Slide

  18. 18

    View Slide

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

    View Slide

  20. Throwaway Navigation
    20

    View Slide

  21. One Navi for
    One Destination
    21

    View Slide

  22. Navigation
    for purpose
    22
    a single

    View Slide

  23. Navigation
    for purpose
    23
    YOUR

    View Slide

  24. 24
    Your Party

    View Slide

  25. 25
    Your Restaurant

    View Slide

  26. 26
    Your Company

    View Slide

  27. 27
    Your Place To Be

    View Slide

  28. 28

    View Slide

  29. Do it in the Browser!
    29

    View Slide

  30. Your Navi
    30

    View Slide

  31. Your Navi = a URL
    31

    View Slide

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

    View Slide

  33. Customize it!
    33

    View Slide

  34. Customize it!
    34

    View Slide

  35. Share it!
    35

    View Slide

  36. Integrate it!
    36

    View Slide

  37. 37

    View Slide

  38. 38

    View Slide

  39. ZOMG Live Presentation!
    39

    View Slide

  40. 40

    View Slide

  41. Tech Background
    41

    View Slide

  42. 42

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  46. 46

    View Slide

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

    View Slide

  48. {
    nextDirection: ..., // next street
    distance: 200, // meters to turn
    duration: 15, // secs to turn
    ratio: 0.71 // route completed
    }
    48

    View Slide

  49. 49
    Widget:
    10-50 LOC

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. Was kann ich
    damit anfangen?
    53

    View Slide

  54. instantnavi.com/developers
    54

    View Slide

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

    View Slide

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

    View Slide

  57. 57
    mehr-tanken

    View Slide

  58. mehr-tanken
    58

    View Slide

  59. mehr-tanken
    59

    View Slide

  60. mehr-tanken
    60

    View Slide

  61. mehr-tanken
    61

    View Slide

  62. 62

    View Slide

  63. @fabrik42
    github.com/fabrik42
    [email protected]
    63

    View Slide

  64. Let‘s talk!
    64

    View Slide

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

    View Slide

  66. 66

    View Slide