Posted on by & filed under ebooks, html5, interactivity, ipad.

Geo ebook demo

We’re making the geo demo featured in the Interactivity in EPUB talk available for download under the MIT License.

About the demo

In the demo, the geolocation capability of the web browser transmits your latitude/longitude. The code then queries the Geonames database to get an English placename.

After that, the code will continually poll for your current location. If you remain still, text will be displayed to indicate that the main character is bored and waiting to set off on her adventure. When your lat/long changes, it displays new text.

What’s in the demo

This is a ZIP file bundle of the following resources:

  • The geo code itself, in JavaScript, CSS and XHTML
  • A copy of the Monocle ereader by Inventive Labs
  • A copy of geo-location-javascript, which provides a simplified API to the HTML5 geolocation feature
  • The embedded font IM Fell English Pro, converted to SVG format for use on iPads/iPhones.

The book content is in the form expected by Monocle, not EPUB, though if someone wanted to produce an EPUB version I would be happy to link to it. It should be possible to produce a valid EPUB file though very few ereaders would be able to run it.

Download the source code.

Try it now

You can also try it out in a geo-aware browser. This should work in Chrome, Firefox and Safari 5, as well as on iPads and iPhones (and probably Android), though the user interface will need to be changed to support smaller devices.

Keep in mind that if you’re on a real computer, you’ll never see the “you’ve moved” state change since your location is based on your internet service provider. Even on a mobile device, it can take quite some distance to update your position as GPS does not discriminate very finely.

Tags:

11 Responses to “Geo-aware ebook demo”

  1. Jodi Schneider

    Have you played ‘Walking Cinema: Murder on Beacon Hill’ by any chance? This is a location-based game/tour set in Boston. It’s been on my iPhone for awhile, but I’m in Boston so rarely it hasn’t bubbled to the top yet.

  2. Liza Daly

    I haven’t, I’ll check it out! And thanks for teaching me the fancier-sounding name “locative texts.”

  3. laura

    I wanted to try this on my geo-aware and very mobile iPhone, but unfortunately I’m not able to resize the page in mobile Safari to match the screen size, and therefore I only see a small fraction of the page. Bummer; it seems like a clever little demo.

  4. Liza Daly

    Right, at some point I may change it to be resizable, or I would be happy to post an updated version if someone else modified it.

  5. Joseph

    Liza, it would probably suffice to change the viewport meta tag so that width was hardcoded to 600. Or even remove the meta tag altogether?

  6. Anders Jakobsen

    This got me thinking…

    HTML5 also makes it easy to include audio in the code. Could you make an audio guide in the of a ePub book, where your location triggered different audio files to be played?

  7. lordmax

    Hi

    I’ve tried geo localization with Opera and result is an error’s pop-up :

    ————————————

    ReferenceError: Security violation
    ————————————

    obviously google geoloc work fine.

Trackbacks/Pingbacks

  1.  Geo-aware ebook demo : Threepress Consulting blog at Электронные книги
  2.  jodischneider.com/blog » Locative texts
  3.  JavaScript and interactivity in iBooks : Threepress Consulting blog