What is it?
The Map widget enables you to show a map to the user and to display their location on the map. Street maps from Google and Open Street Maps, and satellite maps from Google are all available.
How do I use it?
Go to the Layout tool and click on the Map tab in the widget panel on the left. Remember that clicking on the 'i' symbol will give you some more information on the widget.
Drag the map icon from the right hand side of the panel to the page. Feel free to resize and re-position the Map widget on the page, and set the page's background colour.
Select the Map widget again and then the Settings tab in the property panel. Use the dropdown to explore the other values for the map type property, checking the effects of your choice in the Preview tool.
To show the user's location on the map, ensure that the checkbox for the Map's track user property is checked.
You can see the effect of this property in the Preview tool. Click around on the map in the right hand panel of the Preview and you will see a person icon representing the user's location move around in the map on the phone emulation.
On the real phone, the user will be able to pan and zoom the map with drag and pinch gestures. In the Preview tool, you can pan by holding the mouse down on the Map widget and scroll with the mouse's scroll wheel. Later, we will show you how to add buttons to zoom the map. Note that while you are tracking the user's position, the map will be automatically panned to include their current position.
What properties does it have?
Many of the Map widget's properties are shared with other widgets and allow you to control its size, position, whether it has a border etc. You can always see the full list by clicking on the 'i' button on the Map tab in the widget panel, as shown above. Here are the properties not to do with styling that are specific to the Map widget:
settings tab
map type
The type of map to display
| Google Streets | Google street map. |
| Google Satellite | Google Satellite map. |
| OSM | OSM street map. |
 |
 |
 |
| Google Street | Google Satellite | Open Street Map |
Note that the Google Maps TOS explicitly allow use in both free and paid-for mobile apps, though it is worth checking occasionally to ensure they have not changed.
centre longitude
Initial longitude of the center of the map
centre latitude
Initial latitude of the center of the map
Together these determine where the map will be centred when it first appears on the screen.
zoom
Initial zoom level of the map
track user
Selects whether the map will show the user's location.
Maps and network connectivity
All three of the available map types - Google Streets, Google Satellite and OSM - refer to mapping data held remotely on the internet and fetched by the mobile phone as needed. That means that the maps cannot be displayed at all if the phone is not connected to the network, and may perform unsatisfactorily if network connectivity is intermittent or very slow.
Comments
10 comments
I would like to draw polygons on the map. I loaded polygons programmatically and attempted to display the Zone(s) but all I can see if a marker, rather than a polygon. Am I missing something or is this not supported?
Hi!
I see that there is a map move in and move out functions in the IDE. But can the map detect if the User is already in a specified region? (that is, he starts the GPS module only when he is near the region)
thomas,
sorry, you cannot display polygons on the map at the moment.
Hi Sid,
When you say map move in and move out do you mean the geo triggering that is talked about here: https://appfurnace.zendesk.com/entries/21266451-tutorial-5-using-location-gps
For both the points and then zones if the user starts the app or turns the GPS on while in a hotspot then move in will trigger as if the user had turned the GPS on outside of the hotspot and walked in. I hope this answers your question.
All the best
Tom
@Tom,
Yes! That's exactly what I meant. Although, I am currently adding "zone.userInside()" to the custom code as well, just in case! Hope that works well too.
Thanks for the quick reply too!
Cheers,
Sid
Is there a way to trigger things (audio, video etc) based on direction of movement. Example. One set of actions is triggered as I move from North to South along a pier. A different set of actions are triggered as I reverse and move from South to North (in other words one set of triggers occurs as I walk seaward on the pier and a different set when I walk landward) ?
Thanks and Best,
Susan
Hi Susan,
You could try implementing the Phonegap Compass API if you'd like to be really accurate (http://the.appfurnace.com/docs/cordova_compass_compass.md.html#Compass), but if you want to keep it reasonably simple (like the example of North/South you suggested), I'd probably do the following:
1. Create three zones in your Location tab, one is the "main" trigger point, and one either side (North & South) that will serve as "pre-zones" - which will change the behaviour of the main point (see attached screenshot of a possible setup)
2. Give the "main" point a movein function of "triggerMain", give the south-bound zone a movein of "setHeadingSouth", and the north-bound zone "setHeadingNorth".
3. In your code tab, paste this:
var direction = "";
// FUNCTIONS
// ------------------------------- //
function setHeadingSouth(){
direction = "south";
}
function setHeadingNorth(){
direction = "north";
}
function triggerMain(){
if(direction == "south"){
// DO SOUTHWARD ACTIONS
alert("South bound");
}
else if(direction == "north"){
// DO NORTHWARD ACTIONS
alert("North bound");
}
}
What this will do is catch the previous location of a user (either south or north of the main point), and when they reach the main point, it will trigger the relevant action.
Hope that helps
AppFurnace_DirectionalZones.png
I'm trying this now I think I have some questions but will hold off and put them all together once I see what happens when I try this.Thanks & Best,
Susan
Hi,
There isn't unfortunately, is there a specific reason for wanting to do this?
Please sign in to leave a comment.