Tutorial by Ranen Ghosh
Micello provides indoor map data for places like shopping malls, airports, college campuses, hospitals, museums, business campuses, and conference centers. Integration with a map toolkit like ours is a natural fit. In this tutorial we add the multi-level structure for the Westfield Valley Fair mall to a WhirlyGlobe-Maply based map.
For this example we provide source code to get going. Download this zip archive and copy its files to your project directory. You should overwrite your existing ViewController.* files with the ones in the archive. Add the other files to the project.
The new ViewController class is simplified to only use a globe, and only display remote OpenStreetMap tiles.
Start by adding two imports to ViewController.m:
Add two member variables to the ViewController implementation block. The first is a MaplyMicelloMap object, which we’ll describe below.
Initialize the Micello map variable at the end of viewDidLoad. You’ll need to give it the base URL of the map to be displayed, and the key from Micello for your account and project. It also wants a base draw priority. Draw priority values determine the order in which map elements are seen if they overlap.
The MaplyMicelloMap class is the most important class needed to display a Micello community map. After initializing it, the way to use it is to:
This is done with the startFetchMapWithSuccess:failure: method. If the base URL and key provided to the init method are valid, this will fetch lots of information about the community map, and store it in the object. This includes drawings, levels, and entities.
Since doing this is asynchronous, subsequent operations on the MaplyMicelloMap object should go in the success block passed to this method.
This can be done in two ways. You can give the MaplyMicelloMap object default drawing attributes. These are currently fillColor, outlineColor, selectedOutlineColor, lineWidth, and selectedLineWidth. The basic properties for fill and outline apply to the map as it’s normally displayed. The selected properties apply to rooms selected by a user.
You can also add style rules, represented by the MaplyMicelloStyleRule class, to draw geometry features that match certain criteria. We’ve provided some default style rules.
After fetching the map information and styling the map, set the z-level using the setZLevel:viewC: method. This selects one of the levels to draw and it’s the one you will see.
This code, which does all of the above, goes after our MaplyMicelloMap initialization:
Run this code now and you’ll see the bottom level of the Westfield Valley Fair mall displayed on your globe.
If a community map has more than one level, it’s simple to change. Just call setZLevel:viewC: again. Here we modify the code from above to allow the user to select a z-level:
Add the onSegChange callback to handle the user interaction and change the displayed z-level of the community map.
If you run the example now, you’ll see what the upper levels of the mall look like.
Now we’re going to let the user select shops and restaurants in the mall to learn more about them. The MaplyMicelloMap object will return information about a selected entity using the MaplyMicelloMapEntity class. Call the MaplyMicelloMap select:viewC: method to get a MaplyMicelloMapEntity object, which has a properties dictionary property which contains metadata we can be display.
In the example, we use a simple form view controller to display the properties (the SimpleAnnotationViewController, which is among the files to download that are listed above). The MaplyAnnotation object anchors this view to the appropriate location in the map.
Add the following two method implementations after onSegChange :
Now if you run the example and select a store or restaurant, you’ll see the entity in question highlighted, with a custom annotation displayed over it.
The Westfield Valley Fair mall straddles two cities: Santa Clara and San Jose. In 2012 San Jose raised its minimum wage from $8 to $10 per hour, while Santa Clara kept its fixed at $8. Different stores within the mall fall within those different cities and some (such as The Gap) straddle both. In this optional part of the tutorial let’s see which!
Here we will overlay the city boundaries over top of the mall map, to display which stores have the higher minimum wage.
That rounds our the tutorial. Enjoy your building maps!