Building a Heads-Up navigation display

By: Dan Nesfeder

With an Android or iOS phone, a $30 universal HUD mount, and the Mapbox Navigation SDK you can create a heads-up display showing a car’s speed, alerts, or even navigation information.

To start a navigation session, create a MapboxNavigationobject, provide it a LocationEngineand DirectionsRoute from our Directions API and you’re on your way. The ProgressChangeListener will provide updates that you can push to your UI as you travel along the route.

MapboxNavigation navigation = new MapboxNavigation(this, MAPBOX_ACCESS_TOKEN);
navigation.addProgressChangeListener(this);
navigation.setLocationEngine(locationEngine);
navigation.startNavigation(currentRoute);

After setting up the navigation SDK and selecting your desired user interface, the final step is to mirror your application views, so they mirror correctly on the HUD mount.

In Android, you do this from an Activity by executing:

View contentView = findViewById(android.R.id.content);contentView.setScaleY(-1);

Explore the code and try it out for yourself. Show us what you create by tweeting @Mapbox using the hashtag #BuiltWithMapbox. Have questions? Feel free to hit me up on Twitter.

Dan Nesfeder