Filed under Swift

Adding a marker with a custom image to a Mapbox map in Swift

There aren't a lot of Swift mapping tutorials out there, so I'm writing a series of blog posts on the topic. First up is how to create a map marker with a custom image in a Mapbox map.

First, install the Mapbox SDK as described here.

Next, since we're using Swift, you'll need to create a bridging header by creating a new Objective-C file (empty file) in the project and answering "Yes" to "Would you like to configure an Objective-C bridging header?" In the Project Name-Bridging-Header.h file that was just created, add:

#import <UIKit/UIKit.h>
#import "Mapbox.h"

Now, in your ViewController.swift (or wherever you choose), make sure your class is a RMMapViewDelegate.

In viewDidLoad, add your API access token. You can get your API access token here.

RMConfiguration().accessToken = "your-token-goes-here"

Next, add the map view:

var mapFrame = CGRectMake(0, 20, view.bounds.width, view.bounds.height)
var mapTiles = RMMapboxSource(mapID: "your-map-id")
var mapView = RMMapView(frame: mapFrame, andTilesource: mapTiles)
mapView.delegate = self

If you want, you can also zoom and center the map now:

mapView.zoom = 10
mapView.centerCoordinate = CLLocationCoordinate2DMake(33.755, -84.39)

Now, take the file you want to use as your map marker and add it to the Images.xcassets.

Back in your View Controller (or other file), add:

var location:CLLocationCoordinate2D = CLLocationCoordinate2DMake(33.78,-84.41)
var annotation = RMAnnotation(mapView: mapView, coordinate: location, andTitle: "Proximity Viz LLC")
annotation.subtitle = "Maps & Apps"
annotation.userInfo = "company"

Of course here you will put in your own coordinates, title, and subtitle. userInfo is a handy place to put any other information you might want, i.e. categories that the icon will be based on. E.g. "company" would have one icon and "park" would have another.

Now is when the delegate action comes in, so make sure you included RMMapViewDelegate at the beginning of your file. Let's add the function that will create a layer for each of our annotations. If you only have one image for your markers, you can use this code:

func mapView(mapView: RMMapView!, layerForAnnotation annotation: RMAnnotation!) -> RMMapLayer! {

    var marker: RMMarker = RMMarker(UIImage: UIImage(named: "proximity"))
    marker.canShowCallout = true

    return marker

}

Or if you have multiple images for different categories, you can use this code:

func mapView(mapView: RMMapView!, layerForAnnotation annotation: RMAnnotation!) -> RMMapLayer! {

    var marker: RMMarker = RMMarker(UIImage: UIImage(named: "proximity"))
    marker.canShowCallout = true

    var parkMarker: RMMarker = RMMarker(UIImage: UIImage(named: "park"))
    parkMarker.canShowCallout = true

    if(annotation.userInfo as NSString == "park"){
        return parkMarker
    } else {
        return marker
    }

}

Now when you run the app, you should see your custom marker(s)!

Mapbox map with custom marker

The code is available in a gist.

This post is one part of my series on Mapping in Swift.

Tagged , , , , , ,

LWIMW 9

I just finished my submission for Look What I Made Weekend 9. Look What I Made Weekend (LWIMW) is a chance for people to create something over the course of 48 hours. The concept is based on Ludum Dare and other game jams, but for LWIMW you don't have to make a game. Instead, you are free to pursue any creative endeavor and show off your results at the end.

NB: The content below is mostly a reprint of my submission at LWIMW.

This is my first app using Swift and also my first app using MapKit.

It's a simple app that takes an average of several GPS coordinates so that you can get a more accurate estimate of the coordinates of a point.

Main VC

Before the weekend, all I had done was a quick sketch of what the app might look like.

What I got done this weekend:

  • GPS tracking (auto mode)
  • Averaging
  • Displaying tracking and averaging on map
  • App icon
  • Sharing

Averaged Coordinates

Saved Coordinates

What still needs to be done:

  • Persistent storing of data
  • Manual mode
  • Multiple coordinate formats
  • Some testing and miscellaneous improvements

You can view the code or download the app on Github.

Tagged , , , , ,