Mapbox Tutorial for Unity
By Anessa Petteruti
Table of Contents
1. Introduction
2. Setup
3. Visualizing the Map
4. Displaying Manhattan Skyscrapers
5. Mapbox Vision SDK
Introduction
In this tutorial, you will learn how to build a simple map using the Mapbox Maps SDK for Unity. You will then learn about the basic functions common in mobile applications that use the Mapbox Vision SDK.
Setup
1. Install Unity here: https://unity3d.com/get-unity/download
2. Download the Mapbox Maps SDK for Unity here: https://docs.mapbox.com/unity/maps/overview/
3. Create a new 3D project in Unity (File --> New Project --> 3D --> Create)
4. In Unity, go to Assets --> Import Package --> Custom Package... and select the downloaded Mapbox Maps SDK.
5. Configure your Mapbox Access Token in Unity (more information on how to do so here: https://docs.mapbox.com/unity/maps/overview/#token)
Visualizing the Map
1. In the Project Navigator on the left side of Unity, click on Assets --> Mapbox --> Prefabs:
2. Click on the Map scene to visualize a simple map. This scene comes with an Abstract Map script in which you can set the location, elevation, map style, and more. You can visualize the map by hitting the play button in the top bar and making sure you are in the Scene panel:
Displaying Manhattan Skyscrapers
1. We will now style the map to show Manhattan buildings. This is called displaying vector data in which you will tweak Abstract Map settings to change the map's location, elevation, vector layers, and overall style.
2. To make the map of downtown Manhattan, first set the location to 40.706845, -74.011368.
3. In Terrain Settings, change the Elevation Layer Type to Flat Terrain, and in Image Settings, change the Data Source to Mapbox Dark.
4. In Vector Settings, change the Data Source to Mapbox Streets.
5. Create a new visualizer by clicking Add Visualizer. Click Enter and rename the layer to Buildings.
6. Press the Buildings visualizer that you just created and change the Extrusion Type to Property Height.
7. Select BuildingMaterial for Wall Material and Roof Material under Material Options. This will make the buildings appear solid with walls.
8. Press the play button to visualize Manhatttan!
Mapbox Vision SDK
The Mapbox Vision SDK is an SDK available for developing both iOS and Android applications. It can be used for augmented reality and fleet management to display traffic and dangerous driving and primarily uses image detection to do so.
Using the Mapbox Vision SDK to monitor road speed and calculate trip estimated time of arrival
(courtesy of Venture Beat)
1. Download the Mapbox Vision SDK here: https://www.mapbox.com/vision/
2. We will learn about a few functions commonly used to develop applications with the Mapbox Vision SDK.
3. Common functions in any Mapbox mobile application are:
@Override
protected void initViews() {
setContentView(R.layout.activity_ar_navigation);
}
protected void setArRenderOptions(@NotNull final VisionArView visionArView) {
visionArView.setFenceVisible(true);
}
@Override
protected void onPermissionsGranted() {
startVisionManager();
startNavigation();
}
@Override
protected void onStart() {
super.onStart();
startVisionManager();
startNavigation();
}
@Override
protected void onStop() {
super.onStop();
stopVisionManager();
stopNavigation();
}
onStart() will "activate" the Mapbox vision on a button click, for example, and onStop() will similarly "deactivate" vision.
4. These functions will call startVisionManager() and stopVisionManager(), respectively:
private void startVisionManager() {
if (allPermissionsGranted() && !visionManagerWasInit) {
// Create and start VisionManager.
VisionManager.create();
VisionManager.setModelPerformanceConfig(new Merged(new On(ModelPerformanceMode.DYNAMIC, ModelPerformanceRate.LOW)));
VisionManager.start();
VisionManager.setVisionEventsListener(new VisionEventsListener() {
@Override
public void onAuthorizationStatusUpdated(@NotNull AuthorizationStatus authorizationStatus) {
}
@Override
public void onFrameSegmentationUpdated(@NotNull FrameSegmentation frameSegmentation) {
}
@Override
public void onFrameDetectionsUpdated(@NotNull FrameDetections frameDetections) {
}
@Override
public void onFrameSignClassificationsUpdated(@NotNull FrameSignClassifications frameSignClassifications) {
}
@Override
public void onRoadDescriptionUpdated(@NotNull RoadDescription roadDescription) {
}
@Override
public void onWorldDescriptionUpdated(@NotNull WorldDescription worldDescription) {
}
@Override
public void onVehicleStateUpdated(@NotNull VehicleState vehicleState) {
}
@Override
public void onCameraUpdated(@NotNull Camera camera) {
}
@Override
public void onCountryUpdated(@NotNull Country country) {
}
@Override
public void onUpdateCompleted() {
}
});
VisionArView visionArView = findViewById(R.id.mapbox_ar_view);
// Create VisionArManager.
VisionArManager.create(VisionManager.INSTANCE);
visionArView.setArManager(VisionArManager.INSTANCE);
setArRenderOptions(visionArView);
visionManagerWasInit = true;
}
}
private void stopVisionManager() {
if (visionManagerWasInit) {
VisionArManager.destroy();
VisionManager.stop();
VisionManager.destroy();
visionManagerWasInit = false;
}
}
5. Finally, in order to visually start and stop navigation:
private void startNavigation() {
if (allPermissionsGranted() && !navigationWasStarted) {
// Initialize navigation with your Mapbox access token.
mapboxNavigation = new MapboxNavigation(
this,
getString(R.string.mapbox_access_token),
MapboxNavigationOptions.builder().build()
);
// Initialize route fetcher with your Mapbox access token.
routeFetcher = new RouteFetcher(this, getString(R.string.mapbox_access_token));
routeFetcher.addRouteListener(this);
locationEngine = LocationEngineProvider.getBestLocationEngine(this);
LocationEngineRequest arLocationEngineRequest = new LocationEngineRequest.Builder(0)
.setPriority(LocationEngineRequest.PRIORITY_HIGH_ACCURACY)
.setFastestInterval(1000)
.build();
locationCallback = new LocationEngineCallback<LocationEngineResult>() {
@Override
public void onSuccess(LocationEngineResult result) {
}
@Override
public void onFailure(@NonNull Exception exception) {
}
};
try {
locationEngine.requestLocationUpdates(arLocationEngineRequest, locationCallback, Looper.getMainLooper());
} catch (SecurityException se) {
VisionLogger.Companion.e(TAG, se.toString());
}
initDirectionsRoute();
// Route need to be reestablished if off route happens.
mapboxNavigation.addOffRouteListener(this);
mapboxNavigation.addProgressChangeListener(this);
navigationWasStarted = true;
}
}
private void stopNavigation() {
if (navigationWasStarted) {
locationEngine.removeLocationUpdates(locationCallback);
mapboxNavigation.removeProgressChangeListener(this);
mapboxNavigation.removeOffRouteListener(this);
mapboxNavigation.stopNavigation();
navigationWasStarted = false;
}
}
And now you can begin adding the interface and customizing your own mobile app with the Mapbox Vision SDK!