Integrating Mapbox for Pinitiative


Today, I’ll share with you how I intergrated Mapbox for our final project for The Flatiron School.

Our project is called Pinitiative, fostered from the White House opportunity project. We focused on creating a community interested in creating initiatives i.e. cleaning the park, starting a fund raising project, and organizing playdates or after school programs.

We used data from NYC database - Pluto and used this information to present the schools, hospitals, fire stations and police stations in our map. We could’ve used the built-in MapKit or Google Maps. But I found Mapbox to be faster, aesthetically appealing, and highly customizable.

I had no previous experience with any type of map framework. It was daunting and overwhelming at first but the Mapbox documentation is pretty good. You just have to know the requirements for your project and read the documentation over and over, you’d eventually get it.


Let’s start by setting up the Mapbox Framework:

  • Get a Mapbox Access Token
  • Download and install the Mapbox SDK in your app.

Access Token:

To get an access token, you need to create an account in the Mapbox website. You can use the default access token or create your own. I generated one for our project.

An access token can look like this:

https://api.mapbox.com/v4/mapbox.emerald/page.html?access_token=pk.eyJ1IjoiamhhbnRlbGxlYiIsImEiOiJjaXZpajI2ZWYwMWR5MnRsdmx0cHY0NTRpIn0.uS2Uc4CBTEC4l-r9382CHg
  • In the Project Navigator -> Info.plist->Information Property List, add the ‘MGLMapboxAccesToken’ as key and your access token as value.
  • You also need to have a Privacy — Location Always Usage Description as key and a relative description such as ‘Shows your location on the map and helps improve OpenStreetMap.’.
This message pops up at the initial load of MapBox in your phone.

Download and Install Mapbox using CocoaPods:

Since we’re maintaining our project, best practice in installing any framework is through CocoaPods, let the pods do the work in keeping your frameworks updated.

  1. In terminal, go to your project folders and create a podfile using ‘pod init’

2. Use a text editor, open the Podfile and copy paste the code to the file.

Open Podfile in any Text Editor. I use Atom.
platform :ios, '8.0'

target 'TargetNameForYourApp' do
pod 'Mapbox-iOS-SDK', '~> 3.3.7'
end

3. Save and close the Podfile.

4. Back to your terminal, still in your project folder, execute ‘pod install’.

5. Open your Xcode .xcworkspace file not the .xcodeproj file. (Whenever you see .xcworkspace, it means CocoaPods are installed in the project.)

Sample Project

You can finally use Mapbox in your app.


Add a 🗺 to your app

You can either use storyboards or do this entirely in code.

  1. I integrated the map via storyboard. I added a View Controller that contains a View for the map.
  2. I assigned a custom MapViewController as the custom class of the View Controller.
Map in storyboard

3. Inside the MapViewController class, subclass the MGLMapViewDelegate to gain access to the components of Mapbox.

import Foundation
import Mapbox
import CoreLocation
import SnapKit
class MapViewController: UIViewController, MGLMapViewDelegate, CLLocationManagerDelegate {
let store = MapDataStore.sharedInstance
var mapView: MGLMapView!
override func viewDidLoad() {
createMap()
}
func createMap() {
mapView = MGLMapView(frame: view.bounds, styleURL: MGLStyle.streetsStyleURL(withVersion: 9)) //1
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight] //2
mapView.showsUserLocation = true //User Location shown
mapView.zoomLevel = 13.7 //the value is arbitrary
view.addSubview(mapView) //adds the mapView to the screen
mapView.delegate = self //3
}

createMap() function

Each time the app is loaded, the MapViewController is initialized with the createMap() function in the viewDidLoad. Here’s a step by step on what it does.

  1. Create a mapView object instantiating MGLMapView. Initialize the mapView to the bounds of the super view. I chose the street style as the map style.
  2. Set the autoresizing mask to flexible height and width to enable resizing.
  3. Delegate is assigned to self so we can customize and add annotations to our map (other post).

To select a location in the simulator during runtime, choose Debug -> Simulate Location or you’ll end up in a light blue ocean part in the map. I chose New York City.

At the initial run of the app, this popup will show up.

Privacy — Location Always Usage Description. Choose Allow to show the map.

When you choose allow, you get your map displayed in your View.

Zoom level set to 11 to show the map of New York (Manhattan)

Hooray!!!! You got a map!

Yes it was

If you want to learn more about Mapbox, you can check out their SDK here. Next post, I’ll show you how you can make annotations in Mapbox.

If you like this post don’t forget to hit the ♡ button below.