Developing custom maps application using Mapbox and Bing Maps API

Every developer first things about Google Maps SDK, before thinking about any third party Map's SDK. Well Mapbox is a third party SDK which is available for Android, iOS and the web. In Mapbox you can choose a map style or completely customize your own map, add custom marker points, satellite imagery etc. The main idea behind Mapbox is flexibility.

Mapbox demo for Android

WHAT IS MAPBOX?

According to Mapbox

Mapbox is a mapping platform for developers. Our building blocks make it easy to integrate location into any mobile or online application. We want to change the way people move around cities and understand our planet.

Mapbox is used by tech giants including Foursquare, Pinterest, Evernote, The Financial Times and Uber technologies. It has SDK's for Android, iOS and Javascript. And Open GL-based rendered for Mapbox Vector Tiles is available right now.

LET'S GET IT STARTED

First import the required dependencies

compile('com.mapbox.mapboxsdk:mapbox-android-sdk:2.2.0@aar') {
    transitive = true
}
compile 'com.getbase:floatingactionbutton:1.10.1'
compile 'com.squareup.retrofit:retrofit:2.0.0-beta2'
compile 'com.squareup.retrofit:converter-gson:2.0.0-beta2'

I'll be discussing about these libraries below.

BUILDING THE UI

I am getting rid of ActionBar by setting base theme to Theme.AppCompat.Light.NoActionBar. Also to make full use of screen estate, I'm setting status bar and navigation bar to translucent.

Translucent Status and Navigation

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

FrameLayout is the base layout, with MapView covering the entire screen. Followed by it there's an EditText and a FAB button in the bottom. FAB Button is created using android-floating-action-button. I'm not using the FAB button which is part of design library, since android design library is a very big library which not only has FAB Button, but also the classes for CoordinatorLayout, TabLayout NavigationDrawer, AppbarLayout and so on.

MAPBOX SDK

First you have to sign-up on Mapbox and then create a project. Once you create a project you will get the required access token. Mapbox library for Android is fairly simple. You have to introduce the library as a gradle dependency. Then you have to add MapView in XML.

<com.mapbox.mapboxsdk.views.MapView
    android:id="@+id/mapview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    mapbox:access_token="@string/mapbox_api_token" />

@string/mapboxapitoken has the access token which was received while creating the project.

Then in the Java side

MapView mapView = (MapView) findViewById(R.id.mapview);
mapView.setStyleUrl(Style.MAPBOX_STREETS);
mapView.setCenterCoordinate(new LatLng(40.73581, -73.99155));
mapView.setZoomLevel(11);
mapView.onCreate(savedInstanceState);

Once you get the reference to the view, you can set style, coordinates, zoom level etc.

mapView.setStyleUrl() method can be used to set different styles to the Map. There are 5 styles that are provided by Mapbox in general. They are

There is one more, which I forgot to include in project which is Style.SATELLITE_STREETS. If you want to know which is which look at the gif on top which is aligned in the right order as the list above.

EDITTEXT

Rectangular EditText

android:singleLine="true"
android:imeOptions="actionSearch"

imeOptions="actionSearch" is used to set the keyboard enter action to search. But this needs to be used along with singleLine="true". Otherwise the keyboard will still show the enter action rather than search button.

android:elevation="@dimen/_4dp"

Elevation is added to the keyboard, so the EditText will not appear as if it's on the same level as the base MapView.

android:inputType="textCapWords|textNoSuggestions"

textNoSuggestions will remove the underline under the word, as well as the suggestions that pop up on the keyboard.

Hiding and showing keyboard on selecting enter location from FAB Button

400: Invalid request

GEOCODING - BING MAPS API - RETROFIT - GSON

Now you have to sign up for Bing Maps API which will give you access token. This is the phase where you enter the destination, and hit the go button, which in the background will send a HTTP GET request to Bing Maps server using their API. The response will have the geo codes (both latitude and longitude) which can be used to draw a marker on the MapView.

I am using Retrofit for making HTTP Requests, since it is way simpler to use and better when compared to volley according to some reviews. Retrofit along with it's Gson converter and POJO Modal classes, can convert the JSON response directly to their respective data types without any more difficulties.

public interface BingApi {

    @GET("/REST/v1/Locations")
    Call<Destination> getCoordinates(@QueryMap Map<String, String> options);
}

This is the Retrofit Interface. The annontation @GET is used to describe the HTTP Request. There are five built-in annotations: GET, POST, PUT, DELETE, and HEAD. The Model POJO classes are generated using www.jsonschema2pojo.og. And finally in the MainActivity

400: Invalid request

Here baseUrl is the URL of the API, addConverterFactory() sets the JSON converter which in our case is Gson. Once I get the latitude and longitude from the response, I call the addMarker(LatLng location) method of MapView to put a marker on the map. Then call the setCenterCoordinates(LatLng location) method to automatically scroll the MapView to the required location.

MAPBOX DEMO VIDEO

The entire project is on GitHub