Build a dynamic indoor map in iOS

Get the code View the demo


Finding your way around a convention center or conference hotel can be tricky. But, a dynamic indoor map in a mobile app for conference attendees can make it quicker and easier to help them find their way to sessions or your booth!

This code pattern helps you build a dynamic indoor map using Apple’s existing framework, MapKit. You can use this MapKit framework to use the Apple Maps APIs in your own iOS app to add in the floor plan of your conference. The framework also lets you add in more overlays other than just a floor plan. This pattern uses a Node.js app and a MongoDB for the web server and storage. It hosts the app in Cloud Foundry and uses Compose for MongoDB for the database which binds to our Cloud Foundry app. This forms the backend for your dynamic indoor map mobile app. The app uses a heat map to represent the use of dynamic data.


With this code pattern, you create an indoor map using the Apple MapKit framework and a Cloud Foundry app for the iOS app’s backend. The iOS app uses the MapKit framework to display the map while the Cloud Foundry app generates a PDF file of an indoor map that the iOS app displays. By using backend data that is separate from the iOS app, you do not need to keep updating the iOS app when you need to modify the indoor map’s floor plan.

This app extends the sample code in Footprint: Indoor positioning from Apple.

After completing this code pattern, you will understand how to:

  • Deploy a Cloud Foundry app
  • Build an iOS map using MapKit
  • Integrate the iOS map to get data from the Cloud Foundry app
  • Make custom overlays with MapKit



  1. The user opens the iOS application and can toggle the heatmap on or off. The user will also generate random data of events in the zones of the indoor map, which updates the colors of the heatmap.
  2. The iOS app sends requests to the backend through RESTful API.
  3. The backend retrieves or updates the documents in the database. The backend generates the PDF based on the data received.
  4. The database gets or updates the data based on the request from the server.


Find the detailed steps for this pattern in the README. The steps show you how to:

  1. Create the MongoDB database
  2. Deploy the Cloud Foundry app
  3. Configure the iOS app
  4. Run the iOS app
  5. Turn the heatmap on