In this Code Pattern, we will create an indoor map using Apple's MapKit framework and a Cloud Foundry app for the iOS app's backend. The iOS app will use the existing framework MapKit to display the map while the Cloud Foundry app will generate a PDF file of an indoor map which is consumed by the iOS app. With the use of a backend data that is separate from the iOS app, developers would not need to keep updating their iOS app if they want to modify their indoor map's floor plan. This app extends the sample code in Footprint: Indoor positioning from Apple.
When the reader has completed this Code Pattern, they 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
- 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. This should update the colors of the heatmap.
- The iOS app sends requests to the backend through RESTful API.
- The backend retrieves or updates the documents in the database. The backend would also generate the PDF based on the data received.
- The database gets or updates the data based on the request from the server.
- Cloud Foundry: Build, deploy, and run applications on an open source cloud platform.
- Compose for MongoDB: MongoDB with its powerful indexing and querying, aggregation and wide driver support, has become the go-to JSON data store for many startups and enterprises.
- Mobile: Systems of engagement are increasingly using mobile technology as the platform for delivery.
- Node.js: An open-source JavaScript run-time environment for executing server-side JavaScript code.
- Clone the repo
- Create Compose for MongoDB
- Deploy the Cloud Foundry app
- Configure the iOS application
- Run the iOS application
- Turn heatmap on
$ git clone https://github.com/IBM/ios-mapkit-indoor-map
cd ios-mapkit-indoor-map
Create Compose for MongoDB and name it heatmap-compose-mongodb:
It is important to have the Compose for Mongodb instance be named
heatmap-compose-mongodbsince the Cloud Foundry app will be binding to that instance name. If you have named it to a different one, modify theheatmap-backend/manifest.ymlfile.
After the provisioning is complete, you'll need to insert some documents in the database.
In the IBM Cloud Dashboard of the compose instance you just created, copy the Mongo command line connection string
Generate the documents using real-data.js. Add this filename at the end of the command line connection string
You may need to install mongo shell if you don't have it yet
$ mongo --ssl --sslAllowInvalidCertificates <url> -u <user> -p <password> --authenticationDatabase admin real-data.js
Go to heatmap-backend folder and push the app in Cloud Foundry in your account. After the app is pushed, you'll need to copy the app url which you will need after this step. The url will be formatted like heatmap-backend-<random-name>.mybluemix.net
$ cd heatmap-backend $ bx cf push ... ... Showing health and status for app heatmap-backend in org Developer Advocacy / space dev as [email protected]... OK requested state: started instances: 1/1 usage: 128M x 1 instances urls: heatmap-backend-unvillainous-washout.mybluemix.net last uploaded: Mon Mar 12 00:02:39 UTC 2018 stack: cflinuxfs2 buildpack: SDK for Node.js(TM) (ibm-node.js-6.12.3, buildpack-v3.18-20180206-1137) state since cpu memory disk details #0 running 2018-03-11 05:04:56 PM 0.0% 0 of 128M 0 of 1G
Open heatmap.xcodeproj with Xcode. This loads all the source which you need to build the iOS app.
In ViewController.swift, modify the line (line 13) to use your own backend URL (CF_APP_URL in the swift file) which you just deployed in Cloud Foundry.
... let CF_APP_URL:String = "https://heatmap-backend-unvillainous-washout.mybluemix.net" ...
Once you have modified and saved the ViewController.swift to use your own backend, run the app using a simulator or your own iPhone.
You should see Apple Maps using the PDF from your backend as an indoor map.
The sample debugging annotations should show you the origin (0,0) of your pdf and the anchors. The anchors are there so that the MapView will know where to place the PDF. It needs the longitude and latitude of the location of the place of your indoor map. These data are in real-data.js which you have inserted in MongoDB.
With custom overlays and the data from the backend, you could create a heatmap over your indoor map. You can turn on the heatmap using the toggle at the bottom right corner of the app.
You'll see that the app will render some overlays above the indoor map. To update the data from the backend, use random.js to generate random data which should change colors of the overlay depending on the number of events from each zone. The overlays will update every 5 seconds when the toggle is on.
random.js is in the root directory of this repo
Use the URL of your own Cloud Foundry app $ export CF_APP_URL="https://heatmap-backend-unvillainous-washout.mybluemix.net" $ npm install $ node random.js Sending 6 number of events to zone: 8 Sending 5 number of events to zone: 5 Sending 9 number of events to zone: 1 Sending 10 number of events to zone: 3 ...
In a real setting, the iOS app can be used to trigger these events.
- Mobile Code Patterns: Enjoyed this Code Pattern? Check out our other Mobile Code Patterns.
- Node.js Code Patterns: Enjoyed this Code Pattern? Check out our other Node.js Code Patterns.
This code pattern is licensed under the Apache Software License, Version 2. Separate third party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the Developer Certificate of Origin, Version 1.1 (DCO) and the Apache Software License, Version 2.