Earlier this month, we saw this tweet from Aaron Ng showing how he used the Mapbox Unity SDK, Apple's ARKit, and Foursquare to visualize his check-ins. We wanted to break down the steps required for you to do this and turn more magic into reality for others.
This is a brief technical tutorial on building out a Foursquare powered Augmented Reality app using Unity w/the Mapbox Unity SDK, ARKit and Foursquare's API. We'll be building an iOS app displaying nearby coffee shops using Foursquare Venue Search.
<iframe frameborder="0" height="360" scrolling="no" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F226833018&url=https%3A%2F%2Fvimeo.com%2F226833018&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F646544670_640.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=vimeo" width="640">https://medium.com/media/9281e41cce9420c7822faf81f5b5f42d/href</iframe>
Note: At the time of writing, this project requires an iPhone 6S (or later) running a pre-release of iOS 11.3 w/Metal, a pre-release version of Xcode 9, and a patched version of Unity (Unity 5.6.1.p1 or later). Some experience with both Unity and iOS development is helpful, but not required.
Additionally we'll continue to produce content as the Mapbox SDK evolves to support streaming map providers 😍.
Before getting started, you'll need to:
- Install Unity (Unity 5.6.1.p1 or later)
- Create an empty Unity Project
- Install, Configure and Setup the Mapbox Unity SDK.
- Install the ARKit Plugin.
Step 1: Setup your environment
As a reference point during the tutorial here is our Unity Scene Hierarchy
Further to this here is a breakdown of our GameObjects and details.
- LocationProvider is shipped with the Mapbox Unity SDK
- Map has three additional components (BuildMapAtLocation.cs, AbstractMap.cs, RangeTileProvider)
- MainCamera has two additional components (UnityARVideo.cs, UnityARCameraManager.cs)
- Player is added with PositionWithLocationManager.cs
- Attribution provides attribution to Mapbox and Foursquare.
- FoursquareFactory is added with FoursquareProvider.cs
Step 2: Setup the Foursquare API
In order to call the Foursquare API we can utilize UnityWebRequest to send a request to the Foursquare API and then use the built in JsonUtility to parse the response. We've chosen to keep this sample simple to find “coffee" utilizing our Venue Search API.
In the below we setup the function GetFoursquareVenueData to call the Foursquare API.
<iframe frameborder="0" height="0" scrolling="no" src="" width="0">https://medium.com/media/3bcd0ec837bb4bd30e577b0b55084fb5/href</iframe>
Once we do this we now need to parse the response with some models. In order to simplify things, we've included some sample models below. You can also utilize our extensive C-Sharp library too if preferred.
<iframe frameborder="0" height="0" scrolling="no" src="" width="0">https://medium.com/media/4aa5aaf5be32ca299139b9d1a0f909a2/href</iframe>
Now that we have our models setup we need to connect them to our GetFoursquareVenueData function.
<iframe frameborder="0" height="0" scrolling="no" src="" width="0">https://medium.com/media/4a6c2dff6f61bfccda9d6690c8948cf4/href</iframe>
Step 3: Create Foursquare Provider
In order to utilize the FoursquareAPI we plan to utilize Mapbox's LocationProvider. This allows us to easily convert between the Unity World and Earth World (latitude and longitude). Additionally we could leverage the real-world location of the phone via LocationService.
We start by creating a GameObject named “FoursquareFactory" and attaching a “FoursquareProvider" which we will use as a function to display and surface Foursquare data.
Here you will need to add your CLIENT_ID and CLIENT_SECRET after signing up for a Foursquare Developer Account via developer.foursquare.com.
We can then call the function GetFoursquareVenueData inside our FoursquareProvider and create a Foursquare Map Object for venues near the phone.
Here is the final script for FoursquareProvider.
<iframe frameborder="0" height="0" scrolling="no" src="" width="0">https://medium.com/media/fd64ed3d187207640a28d504e06bb17e/href</iframe>
Finally let's link everything together by creating a GameObject inside Unity with the name Player.
We then can attach the script PositionWithLocationProvider to this GameObject. We make some minor modifications here to allow us to push LocationData (lat,lng) over to the FoursquareProvider.
Step 4: Build and Deploy
You can now build your Unity Project and deploy this magic to your phone/tablet.
At Foursquare, our mission is to make the world more delightful through location intelligence products including building illustrations like the one above. If this sounds like fun feel free to reach out and learn more.