Sneak preview: iOS 10 notifications with Mapbox maps

At WWDC this year, Apple announced some great new APIs and capabilities for notifications coming in iOS 10. Notifications are now capable of showing media and even dynamic views. This means you can feature Mapbox maps in your app notifications. Customizable maps pair really well with interactive notifications and offer great new ways to make notifications more useful and keep users engaged with your app.

We spent some time with the Xcode 8 and iOS 10 betas and put together a demo app that shows off our maps in a customized notification view. Although you can’t ship any of this to the App Store quite yet, if you have the Xcode 8 beta, you can begin to prepare to ride the big iOS10 wave today!

First add one of the new Notification Content extension targets to your application.

The extension comes with a NotificationViewController.swift file with an empty implementation of the UNNotificationContentExtension protocol’s didReceive:notification method. This is the hook you can use to add custom map content to your notification.

In the Swift code shown below, we used the MapboxStatic library to create a map snapshot that reflects information contained in the notification. The map snapshot is shown in an image view that is part of the extension target’s view.

// In `NotificationViewController.swift` in our notification content extensionfuncdidReceive(_notification:UNNotification){letlatitude=notification.request.content.userInfo["latitude"]as!CLLocationDegreesletlongitude=notification.request.content.userInfo["longitude"]as!CLLocationDegreesletmapboxCoordinate=CLLocationCoordinate2D(latitude:latitude,longitude:longitude)letoptions=SnapshotOptions(mapIdentifiers:["mapbox.light"],centerCoordinate:mapboxCoordinate,zoomLevel:12,size:CGSize(width:288,height:200))letmarkerOverlay=Marker(coordinate:mapboxCoordinate,size:.small,iconName:"rocket")markerOverlay.color=.purple()options.overlays=[markerOverlay];letmapboxAccessToken=Bundle.main().infoDictionary!["MGLMapboxAccessToken"]as!String// Use MapboxStatic.swift (https://github.com/mapbox/MapboxStatic.swift) to create a map image// and assign it to the mapImageView that is defined for the view controller in the storyboard for this extensionletsnapshot=Snapshot(options:options,accessToken:mapboxAccessToken)snapshot.image{(image,error)inself.mapImageView.image=image}}

Now, any notification that is correctly configured to display its content in our custom extension will be enhanced with a Mapbox map.

In the next few weeks we’ll share more examples on how you can leverage our latest SDK to get the most out of new extensions on iOS10.

Don’t hesitate to reach out if you have any questions about implementing our SDK.Sign up for our newsletter or follow us on Twitter to stay up to date.