Hands on

Location-aware Snapchat stickers with Snap Kit + HERE

By Dylan Babbs | 27 June 2018

Earlier this month, Snap released its developer kit, allowing developers to harness some of Snapchat's features and content. Snap Kit enables developers to include a "Login with Snapchat" button at login, send content to the Snapchat camera, display public Snapchat Stories outside the app, and use Bitmoji outside the app.

In this tutorial, we'll be focusing on the Creative Kit component of Snap Kit for iOS. Creative Kit lets developers send custom 3rd party content into the Snapchat app to be used as stickers and overlays. We'll be creating a demo iOS app that lets a user insert a map of the iPhone's current location as a Snapchat sticker. In order to achieve this, we'll take advantage of the nifty HERE Map Image API.

In about 15 minutes, you'll be able to start snapping some selfies with a slick map sticker on Snapchat, just like the image below:

IMG_1220

Our Head of Developer Relations, Mithun Dhar, smiling for the camera.

Sound fun? Let's get started!

Setup

Before we can start coding, we'll have to get some housekeeping out of the way first. You'll need accounts from both:

Go ahead and register on both of those sites. Don't worry, they're both free!

On HERE Developer, create a new project and grab a JavaScript/REST app id and code. Save these for later, we'll be using them in our code shortly. Do the same process on the Snap Kit portal; register a new app. Take a note of the oauth client id in the "Development App Info" as well.

Navigate to SnapKit > Docs > Downloads and download the iOS SDKs. Go ahead and unzip the file while we're at this step, since we'll be using the frameworks in Xcode shortly.

More Setup: Xcode

It's time to fire up Xcode and start coding! Create a new single view project. Using "File >  Add files to..." in the top menu bar, select both "SCSDKCoreKit.framework" and "SCSDKCreativeKit.framework" from your downloads folder (or the directory they were downloaded to).

Screen Shot 2018-06-26 at 3.25.29 PM

Your project directory should look something like this now:

image2018-6-26_15-29-5

Next, head over to General > Embedded Binaries and add the two frameworks using the "+" button. Upon completion, the Embedded Binaries view should look like this:

Screen Shot 2018-06-26 at 3.33.55 PM

Once that is complete, we'll need to edit and add some information in the Info.plist file. I prefer to edit as source code (right click > Open As > Source Code), but this can be done in the default Property List view as well.

Add the following to the file:

The first few entries are Snap Kit related, while the last two have to do with accessing the native location APIs in iOS.

Make sure to swap YOUR-SNAPKIT-KEY with the Snap Kit development key you copied in the previous section.

Now that our info.plist is configured, we need to configure some additional information for Snap Kit to function properly.

Navigate back to the Snap Kit Portal and select the app you created for this tutorial. Two very important things must be done here:

  • Add your Snapchat username to the Demo Users section
  • Add your iOS Bundle Identifier of your recently created Xcode project into the Development App Info

Caution, your app will not work if Snapchat doesn't have these two pieces of information!

iOS Location Services

The first component of the app we'll tackle is the native iOS location services. We've already configured some of the necessary location privacy properties in the Info.plist, so we can dive straight into some code.

Modify your ViewController.swift to look like below:

Don't forget to add the "Import CoreLocation" in the header and "CLLocationManagerDelegate" in the class declaration.

I won't dive into how iOS CoreLocation works in this tutorial. If you're interested in learning more, I recommend taking a look at Andrew's Tutorial: Location Services.

Now, whenever you'd like to access the current location of the iPhone, all you need to do is call this one line of code:

HERE Map Image API

Now that we've written the necessary code to access the iPhone's location, let's work on getting the Map Image API setup.

The Map Image API is fairly straightforward; it returns a static map image of a location (coordinates). Additionally, it can do some advanced features like appending markers and polygons onto the map canvas. It wouldn't hurt to get familiar with the API by checking out the documentation, but if you prefer to live life dangerously, feel free to keep moving on.

In this situation, we'd like the API to return a map with a marker of our current location. Create a new function in ViewController.swift with the following code:

Be sure to replace "YOUR-HERE-APP-ID" and "YOUR-HERE-APP-CODE" with your HERE app id and code.

In the above code, we do the following things:

  • Access the iPhone's location via the locationManager
  • Set some parameters for the Map Image API, such as the zoom level, the image quality, the marker type, and the map style. All of these can be customized.
  • Create an HTTP request for the image and return it

Now, whenever our app requires a ready-to-go map image, we have a function prepared to provide it! We'll be using this in the next section.

Sending the image to Snapchat

We'll now take a look at the code required to send a sticker to Snapchat.

First things first, import SCSDKCreativeKit in the header of ViewController.swift. Your header should now have the following imports:

We need a button for users to click inside the app to kick off the handover to Snapchat. In the viewDidLoad() function, let's create one:

As well as the button's target function, send():

In our send function, we've written code that:

  • Calls our createMapImage() function, returning a map image
  • Creates a sticker object containing our map image
  • Creates a snap object containing our sticker object
  • Sends the snap object to the Snapchat app

Voila! And just like that, you've created a location-enabled Snapchat sticker app!

The file ViewController.swift file should look like this:

The Map Image API was just one of the options available for creating a location-enabled sticker app. HERE Developer offers many location APIs that can be used with not only Snap Kit, but also any other REST/JavaScript, iOS, or Android app. 

For example, in place of the Map Image API, we could have used the:

  • Places API to search for nearby places and create a POI sticker
  • Geocoder API to translate coordinates to addresses to easily let your friends know where you are

Let us know your experience building location-enabled Snapchat stickers in the comments below.

Happy snapping!

Fork or clone the project on Github.

For more interesting location technology content, follow @dbabbs or @heredev on Twitter.