The Marco window

Now that our players can push their location to the Cloud, we can retrieve those same locations and display them on a map view using annotations (pins). There is not much code needed for the user interface, since the only component is a map view that will occupy the entire screen's real estate.

Creating a dedicated map module

Just as we did with the GeolocationService variable, we will isolate all the code related to mapview into its own file for more clarity. We will create a new file named Map.js into our Resources directory and create two functions in it.

The first function will be named createMap, which will return a new mapview variable. It will be of standard type, meaning that it will display a street map with street names, for example. It will use a smooth animation when the map region changes and will adjust its aspect ratio to fit the region using the regionFit property. Also, we want to show where the player is located on the map by setting the userLocation property...