Last time we covered using Dynamic Content in your apps to free up time and space, and make the app making process a bit more streamlined, and this tutorial covers one of AppFurnace’s other features, Location & GPS.
AppFurnace makes it easy to add location-aware elements to your apps using mobile devices in-built GPS, allowing you to create rich experiences that respond to where a user is actually using your app.
This kind of feature is great for walking tours, city guides and story-telling, but it can also be used for businesses and organisations that want to attract attention to locations - perhaps for promotional campaigns to draw more people into your shops or events.
A Few Notes about GPS
Generally, GPS works well, and location-based technology is getting better with every release of a new smart phone, but when you’re working with GPS, there are a few things to consider:
- Areas should be no less than 20m across, otherwise you risk GPS not picking up the location where you’d like it
- In built-up areas, GPS can be less reliable
- Covered areas are normally fine to use, but may require some testing in the location to make sure the app works as planned. As a general rule of thumb, if a user can look up and see the sky, the hotspot should work
Testing your app on location is always advised, using the AppFurnace Player utility app. Carrying out a few tests of how the hotspots line up, and how the hotspots feel when using the app in a physical space (including traffic, other pedestrians, background noise) can help you to create a more enjoyable experience for your users.
If it’s difficult to find the hotspot in person, you can make them larger, or if spots are getting overlapped, place them further apart.
Adding Location Hotspots
Let’s jump in and start using Locations - open a new (or existing) app in AppFurnace, and click on the Locations tab. You’ll see a large map area, which will focus on your location (if you’ve added one to your profile), as well as a few tools in the right-hand panel.
Zoom into the area you want your GPS hotspots to be, then choose the “Add Point” tool from the right-hand panel (Circle icon) and click the map, wherever you’d like the point to be.
You’ll see an orange hotspot appear on the map, with the properties of that point displayed in the right-hand panel, under the tools buttons. We’ll be using these properties to control what happens when a user comes into contact with this hotspot.
We’re going to show the user different pages when they enter and leave an area, but it’s also easy to apply the same technique to playing audio, and calling functions in code.
Open the Layout tab, and set up a couple of pages for the hotspots that we’ll be creating. Start by creating a simple screen, with a main label widget that will show what page, and part of the walk a user is on. Name the page name to “1”, then duplicate this page, changing the content and the names accordingly.
You could add Dynamic Content to this experience to expand on it later.
Then, add a page and drag it to the top of the pages list on the right, so that it becomes the home page. Name this “Home” and add a simple message like “Start walking...” as the main label.
Back in the Location tab, click on the hotspot we created. We’re going to make it so that the relevant page is displayed when a user walks into the hotspot area, and they’re shown the “Home” page again when they leave it.
So, in the “Move In” section of the properties panel on the right, enter “1” in the Page field.
In the “Move Out” page field, enter “Home”.
We can see the affects of this straight away in the “Preview Online” window. Make sure the Map is showing (click the “Show Map” button), and click on the map area to place a simulated user. When you click around the map, you should still be seeing the Home page, until you click inside the orange hotspot, when the screen should change to page 1. It should stay on page 1 if you click anywhere inside the hotspot, until you click outside again.
Now, close the Preview, and duplicate the 1st hotspot to create areas for pages 2 and 3, changing the “Move In” page to the applicable numbers.
Again, you can test this in the Preview window to see how the app would behave. But to get a better idea of how large the areas feel when you’re walking, and how far it is to walk between points, you should download the app onto your iPhone or Android device using the AppFurnace Player utility app (full instructions in the “Test on Phone” window), then go and walk around the area with your phone.
Taking it Further
Obviously, this is a very simple example of what you can do with the Location tab, and if you’re comfortable with using and learning a little JavaScript, then you can easily control playing audio and calling specific functions to enhance the experience even further.
There are more tools available in the Location tab for you to experiment with:
- Zones & Lines are non-circular hotspots, to make your zones slightly more specific to the area you’re working with
- Overlapping hotspots, which can be used for things like making sure users are in wider areas before starting the app
- Adding a Map Widget to your screens, to guide users towards your hotspots
- Add Markers to your hotspots so that they appear on the Screen map widgets
Why not check out the Guardian Street Stories app, based in Kings Cross, London, to get an idea of the kind of things you could do. The app can be used away from Kings Cross as well, and you can still get a feel for how the audio tour format works.
Comments
16 comments
how do you add a text box to connect to the map so you can type in a address and it will show you
the way
Hello Cameronford,
I'm not quite sure what you mean? Do you want to have this text box while you are working on your app or while a user is using you app? If you want it while you are working on your app then it's already there near the top of your screen. If you want to have this as a feature within your app then I'm afraid it's not something that we offer at this time.
Thanks
Is there a standard java script for playing audio files when or for associated images to appear when the user in is a hotspot?
on the location page there is a move in function for each point. that function points to a function in your code. if the function in your code requires an argument how do you include this argument on the location page. example the function in the code side is "function onWalkIntoGPS(data)" on the location tab one should be able to specify onWalkIntoGPS(3). but only onWalkIntoGPS works.... so........
I want to simply have a map on one of my pages which shows the location of the user. How do I go about this?
Hi wiltshirevehicle,
You can use the Map widget in the Layout tab, and make sure "trackUser" is checked (it is by default) - and make sure that in the App Details popup window (where you can add publishing information) has the "GPS Enabled" checkbox ticked too (which is also default). Your user's location will be marked by a grey person icon.
Hope that helps
That's great, thanks!
helloo... I want to know if it possible for the app to get user's current location
Hi,
Yes, you can - just use the getLastLocation function: http://the.appfurnace.com/docs/cordova_locationsensor_locationSensor.md.html#getLastLocation
It returns an object with x and y co-ordinates that you can use:
Hope that helps
Hello,I am facing issues placing my zones/areas in the right locations. I took coordinates of the locations and I am having difficulties moving my cursor along with the coordinate bar on the side. Is there another way to place my areas accurately?
P.S. The place I am working with does not have streets or addresses.
Hi linkum,
You can add zones in code, like so:
var zone = new af.Zone("myZone", [
new af.Coord(-2.5818, 51.4426),
new af.Coord(-2.5818, 51.4584),
new af.Coord(-2.6072, 51.45844),
new af.Coord(-2.6072, 51.4426)
]);
af.geoFeatures.addFeature(zone);
You'll need to specify co-ordinates for each node (corner) of the zone this way. There's more information in the API here: http://the.appfurnace.com/docs/cordova_zone_zone.md.html#Zone
Of course, if you're working with points, this code is easier:
( http://the.appfurnace.com/docs/cordova_point_point.md.html#Point )
As a side note, if your geo features are situated in a remote area (just a guess, based on the lack of streets in your question), you may want to rely more on testing the app on-location, rather than the co-ordinates, as remote areas tend to be less reliable with GPS - so you might need larger, less complicated shapes as areas than expected - so you might be able to be less precise in your placement.
Hope that helps
Hi Kieron,
your comment was helpful. However, I am still having issues. The problem is that when I measure coordinates with two different GPS devices (I get the same result), it does not match with the coordinates presented on the map in Appfurnace. Is it plausible that the GPS and appfurnace map coordinates bar are not in sync?
So, if I cannot rely on the coordinates, is my best bet to place it by eye and test it?
Hi linkum,
Could you provide an example of the co-ordinates differing? It'll give us a sense of what kind of difference you're seeing
Hi there,
Can I ask whether a 20 metre size for points is still the recommended minimum? ~ Our app will be used in a wilderness area on a coast. thanks.
Hi,
We recommend 20m as a minimum point size, which we've found is a good average to stick to, that avoids a lot of GPS flicker. However, GPS coverage and reliability does vary from place to place, so we'd suggest testing your locations with the AppFurnace Player app - and seeing what size works best for your app. In my experience, coastal areas can be more unreliable, so we've had to make areas bigger than the usual to ensure a smooth experience, but it's always worth testing yourself.
Hope that helps.
Please sign in to leave a comment.