iOS 11 includes amazing new drag and drop features that allow developers to give users new ways to move media between applications. We’ve been experimenting at Mapbox with how drag and drop can work with maps, and are excited to show a demo of how you can use it too.
Here’s a sample project containing all of the Swift code needed to get a basic drag activity running with a Mapbox map. Don’t forget to add your access token in the Info.plist! Note: This code only runs on a pre-release version of Xcode 9, and can only be run on a device using a pre-release of iOS 11. The code in this demo may become outdated as these features are still in beta.
How it works
Step 1: Create an interactive map
To create the above drag activity, we first create a ViewController containing a new map view. You can use any of our beautiful template styles, or use any custom style created in Mapbox Studio.
Step 2: Configure the drag and drop activities
The drag activity (UIDragInteraction) consists of creating a static image from the interactive map view. This can be done with with MapboxStatic.swift, our library that allows you to create static map images, powered by the Mapbox Static API.
The static image of the map, called a Snapshot, is created by passing in size and style options that are taken from the map view of the interactive map. This allows the static snapshot to retain the same size and custom style implemented in the interactive map.
The drop activity (UIDropInteraction) consumes the drag items - in this case, a UIImage returned by the image property of the Snapshot.
To learn more about configuring drag and drop activities, check out Apple’s developer documentation.
Step 3: Try it out!
Open the demo application and run it on an iPad or simulator running iOS 11. This demo application will be the source application for the drag activity. Set up a destination for the drag activity by enabling Split View with another application that accepts images as media input (such as the messages or notes application). This will be the application that you drop our static map into. Once Split View is set up, you can now press and hold on the interactive map, and a new static snapshot of the map will be created, which you can then drag into the destination application.
Want to see what else you can do with iOS 11 and Mapbox? Check out Jesse’s blog on building an augmented reality app with the Mapbox Unity SDK and ARKit.