My Outdoor Adventure with Mapbox

A three week journey using Mapbox technologies

Felix Erdmann
Sep 2, 2018 · 5 min read

I got lost in my daily routines and needed to take a break. A time-out in the wild nature was just what I needed. Preparation is however the most important step. Mapbox’ #ExploreOutdoors18 competition came at the right moment.


Chapter 1 — Designing the map

To find your ways in the nature a detailed map is necessary and Mapbox Studio is the right tool for that. You can literally change everything in your map style.

I used Mapbox’ Cali Terrain style as a template as it already highlights outdoor features like hill shades, mountains or parks. Additionally, it features contour lines which are great to perceive height from a 2D map. There were however some things I changed:

  • Brownish to greenish color scheme as the vegetation should look green and healthy
  • Remove border lines (in the nature there are no borders)
  • Play around with different fonts to enhance readability
  • Hide human made features like airports and ferry connections on small scale
  • Show extruded buildings on large scale

To add my favorite POIs, I created a new dataset in Mapbox Studio, added some points and labeled them depending on their type and name. Furthermore, I converted three of my GPS tracks from Strava (downloaded them beforehand as GPX files) to GeoJSON files with this tool. I then imported the GeoJSON files into my dataset, exported it as a tileset and imported this tileset into my map style.

To style my markers I did the following:

  • Designing custom markers using Mapbox Maki Icons
  • Displaying markers depending on POI type
  • Place label below marker
  • Show all markers but only labels without overlap

To style my GPS tracks I did the following:

  • Color depending on track type
  • Opacity depending on zoom level (only show on large scale)
  • Add labels on top of track

You can see the outcome of my map here:


Chapter 2 — Navigation app to reach POIs

Even with the greatest map it can be hard to find the fastest route to your destination. Especially when you want to choose between different means of transportation. My Android App is the perfect solution for this situation.

I started with the helpful Mapbox tutorial of creating a navigation app with Android. My app however is written in Kotlin which resulted in some minor Java to Kotlin conversion issues. After the simple navigation worked, it was time to modify my app. I set the background map to my custom map but without markers and tracks. Afterwards, I imported the markers as drawables into the Project and imported my POIs as a GeoJSON file which I got from Mapbox Studio. The following code describes how to import the GeoJSON file and add markers with corresponding icons.

In a function called addOnMapClickListener I am checking if a marker got clicked and show the corresponding route.

After the initial routing functionality, I added the option to change the mode of transportation. The user can decide between car with traffic information, bicycle or walking. The UI element is a SeekBar which I styled so that it fits to the card layout at the bottom. The SeekBar has a horizontal layout by default, therefore I needed to rotate the SeekBar element by 90° as well as all drawable elements that are used for styling. The onSeekBarChangeListener detects changes on the SeekBar, changes the global movingCriteria variable, changes the SeekBar icon and recalculates the route.

Three possible states for SeekBar to choose mode of transportation

To achieve the in and outgoing animations, I used the KotlinPleaseAnimate library which handles animations really easy.

The overall application looks like this

Screengrab of my navigation app

Chapter 3 — AR visualization of my POIs

To let my family and friends explore my POIs, they don’t need to go there by themselves but just use my Unity AR App. Initially I played around with the Mapbox Tabletop AR Example. I didn’t like the plane detection though, therefore I decided to dig into Googles Augmented Images Example.

My first step was to download the Mapbox Explore Outdoors logo. I grabbed the SVG code of the logo using the Chrome Developer Tools and printed it on a sheet of paper. Additionally, I filled an AugmentedImageDatabase with the image so that it can be detected by the sample application.

As this worked quite well I went on and placed a Mapbox AbstractMap (from the Mapbox Tabletop AR Example) object on top of the image when it gets recognized. Styling and adding terrain was really easy to do. Next step was adding markers to the map. To do so, I needed to create 3D GameObjects out of my 2D markers that I created in the first week. I imported the SVG files into Blender, extruded them and exported them as .obj files. After I got the markers, I needed to import my POI data into unity. The GeoJSON file from my Android App can be imported as a TextAsset in Unity. A custom script is looping over all Features and creating GameObjects accordingly.

After all GameObjects are created, they can be positioned correctly in the Update() function.

To move the AbstractMap I used the ARTableTopCameraMovement script provided by Mapbox which allows to pan the map.

In the two screenshots below, you can see the settings of my AbstractMap object. The initial location, map style and terrain settings were set in the AbstractMap Script. The Add Markers To Map Script adds the markers to the map in case you have not guessed it. The JSON File takes the GeoJSON file from Mapbox Studio and all elements below are the markers as GameObjects.

Below is a tweet with a screencast of the Unity AR App.

Source Code

You can find the source code of my applications here: https://github.com/felixerdy/mapbox-explore-outdoors-18

Acknowledgements

Thanks Mapbox for this amazing competition. The challenges were fun and your documentation and tutorials helped me a lot to accomplish my results. Especially working with different technologies and programming languages was a welcomed change. Keep on going with these fun challenges!