Geolocation and maps

[Olav]

I was wondering if anybody here has experience with geolocation and Hype? Is it possible to retrieve coordinates and display them on a map (Google maps for instance). I know this is all possible with HTML5, bit how to implement this in Hype? Any examples?
Also being able to use points of interest within a certain distance of the user of the app? Or display information or images/movies when you are on a hotspot?
Any clues would be much appreciated. Thanks!

[MarkHunte]

Have a look at this thread:

Calling JS function in element A from element B?

Okay - I have a text element named ‘InternalMessageReceiver’ and have edited its inner HTML thus: Receiver <script language="javascript"> function messageReceived() { alert ( "Received the message!" ); } </script> I have a button in my document; its onClick action is intended to activate the function in the inner HTML of my text element. I’ve tried a couple variants to activate that function: hypeDocument.getElementById("InternalMessageReceiver").messageReceived; …and: HYPE.documen…

Also in it you will see @warrenao was working on this.

[Olav]

Thank you for the link!
I’ll have a look.

[warrenao (Warren Adams-Ockrassa)]

Yup, it’s doable. You’ll want to download the JQuery library to fire up the geolocation, then prepare yourself for one hell of a ride as you decode the Google Maps JS API. Their maps are rather powerful, but their documentation is long on description and somewhat short on examples.

http://jquery.com

…and…

Google Maps APIs for Web  |  Google Developers

The tricky bit is getting your map to appear in Hype; for that you’ll want a widget with its inner HTML set up to load the map.

What I did was take it in slices, beginning with ironcladding the geolocation code, providing for fallback (such as a dummy lat/long) in case location services are refused by the user, or somehow unavailable.

After that I started tinkering with the GMap API. I still am, actually. Their docs are adequate for loading a default view centered on the user’s location, but as soon as you want to customize it or drop markers, it gets hairy, fast. StackExchange is your friend.

[Olav]

Thanks a lot for the insight!
So a little bumpy road ahead. Let’s see how this goes.
Thanks again, and I will probably come back for some feedback.

[kerguelen]

Hi Olav,
I’m really interested in being informed about your progress in this topic. Let me know !

[warrenao (Warren Adams-Ockrassa)]

Here’s the bare-bones version of a Google Maps wrapper. Turns out I was wrong about needing JQuery, which is a hell of a surprise.

The heavy lifting here is being done in the ‘externals.js’ script. There’s an initial function called from onSceneLoad in Hype; everything else is taking place in the JS file.

First there’s checking for geolocation, then acquisition of the user’s location. There’s fallback checking pretty much all the way along.

The external JS then tells the HTML widget in Hype to render the map.

There are about six trillion different gewgaws you can slap into the API calls for Google’s Maps, but this is a baseline-functional package.

ShrinkWrapper.zip (21.0 KB)

[warrenao (Warren Adams-Ockrassa)]

Also note that, if you plan to get a lot of loads on the map view, you’ll want to register a developer API key with Google (yes, even with API version 3). The generic script pointer to Google that I have in the HTML head will max out at 2500 hits per day (by some unguessable magic, I suppose). A single-user developer API key raises the maximum by a factor of 10.

[Olav]

Thanks again Warren! Really appreciate your feedback and experiences. Saves me lot of initial troubles.

[warrenao (Warren Adams-Ockrassa)]

Quite welcome. Have fun hacking!