Location with iBooks Author

[Updated 3/9/12: Dashcode is no longer supplied with XCode 4.3+, you can download it here: https://developer.apple.com/downloads/index.action, I've also added some screen shots to help clarify the process, feel free to tweet me any questions you have @jaysonlane]

iBooks author was released just a few days ago. I mostly ignored it at first but the more I hear about it on Twitter and blogs, the more interested I become. Today I read an article about the possibility of using location to create more of an interactive book. After spending a few minutes playing around, I’ve decided to write a little about how you do that.

iBooks author uses Dashcode for widgets (they’re .wdgt files). Word of warning: I’m not very familiar with them and I’ve only created a basic widget once in the past but this is a pretty simply implementation, it’s quite easy to get going. Because Dashcode utilizes Javascript, you can simply use the same location code you’d use for a mobile website.

To get going, fire up Dashcode and create a new widget, I chose the custom template:

Once you’ve done that, you’ll see a blank “Hello World” widget — so far, so good:

Next, we’ll need to edit the javascript of the project. You can do this by clicking View >> Source Code (or  + 2). This should open you right into the main.js file. In the main.js load() function, just after the dashcode.setup(Parts), add the following:

navigator.geolocation.getCurrentPosition(getLoc); 

And then at the bottom or where ever you’d like add this function:


function getLoc(position) {

alert(position.coords.latitude);
alert(position.coords.longitude);

}

Don’t worry about running this in Dashcode as my experience was it did nothing, that’s ok. Scroll to the bottom of the “Workflow Steps” toolbar on the lower left side and click “Test & share”:

Then click the Play icon beside Share:

Now choose a name and click “Save to Disk” at the bottom. Save your wdgt file, we’re all done with Dashcode.

 

Next, open iBooks author and create a new book. Once you’ve created your book, click the Widgets drop-down in the toolbar and select HTML:

Click the Edit HTML button at the bottom of the widget:

Now simply drag your wdgt into the HTML box, your page will now look like this:

Now it’s time to test on your iPad. You’ll find your latitude and longitude. Now you can couple this raw data with an AJAX request to convert that data into some usable, relevant text to delight (or completely creep out) your reader.

  • http://www.qazzzaq.com Josh Savo

    Perfectly indited content material, Really enjoyed looking through.

  • http://www.delphi.org/ Jim McKeeth

    I found the “alert” does nothing in iBooks. If I change it to display the location some other method then it works fine. Thanks!

    • Jayson Lane

      Jim,

      Interesting, I honestly haven’t spent much time with iBooks author since this post so perhaps it’s changed. I’ll have to update the post soon! Thanks for catching this.