Show a Map

Last updated: 6/14/2023

Your environment is now fully configured, and you have the necessary Google Maps and MapsIndoors API keys. Next you will learn how to load a Google Maps map with MapsIndoors.

Show a Map with MapsIndoors

Please note that data in MapsIndoors is loaded asynchronously. This results in behavior where data might not have finished loading if you call methods accessing it immediately after initializing MapsIndoors. Best practice is to set up listeners or delegates to inform of when data is ready. Please be aware of this when developing using the MapsIndoors SDK.

Initialize MapsIndoors

We start by initializing MapsIndoors. MapsIndoors is used to get and store all references to MapsIndoors-specific data. This includes access to all MapsIndoors-specific geodata.

Place the following initialization code in the onCreate method in the MapsActivity that displays the Google map. You should also assign the mapFragment view to a local variable, as we will use this later to initialize MapControl inside the onCreate, after it has been created:

MapsActivity.java

protected void onCreate(Bundle savedInstanceState) {
    ...
    mMapView = mapFragment.getView();
    MapsIndoors.load(getApplicationContext(), "YOUR_MAPSINDOORS_API_KEY", null);
    ...
}

MapsActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    MapsIndoors.load(applicationContext, "YOUR_MAPSINDOORS_API_KEY", null)

    mapFragment.view?.let {
        mapView = it
    }
    ...
}

MapsActivity.java

protected void onCreate(Bundle savedInstanceState) {
    ...
    MapsIndoors.load(getApplicationContext(), "YOUR_MAPSINDOORS_API_KEY", null);
    ...
}

MapsActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    MapsIndoors.load(applicationContext, "YOUR_MAPSINDOORS_API_KEY", null)
    ...
}

If you are not a customer you can use this demo MapsIndoors API key d876ff0e60bb430b8fabb145.

Initialize MapsControl

We now want to add all the data we get by initializing MapsIndoors to our Google map. This is done by initializing MapControl onto the Google map. MapControl is used as a layer between Google Maps and MapsIndoors.

Here we use Google Maps logic to apply geodata onto the map. This also means we append logic onto many Google Maps listeners, which means that using Google Maps listeners directly might break intended behavior of the MapsIndoors experience. We recommend to check our reference docs, and see if you can add a specific Listener through the MapControl and always use those when possible.

Start by creating an initMapControl method which is used to initiate the MapControl and assign it to our Google map:

MapsActivity.java

void initMapControl(View view) {
    MPMapConfig mapConfig = new MPMapConfig.Builder(this, mMap, getString(R.string.google_maps_key), view, true).build();
    MapControl.create(mapConfig, (mapControl, miError) -> {
        mMapControl = mapControl;
        //Enable Live Data on the map
        enableLiveData();
        if (miError == null) {
            //No errors so getting the first venue (in the white house solution the only one)
            MPVenue venue = MapsIndoors.getVenues().getCurrentVenue();
            runOnUiThread( ()-> {
                if (venue != null) {
                    //Animates the camera to fit the new venue
                        mMap.animateCamera(CameraUpdateFactory.newLatLngBounds(LatLngBoundsConverter.toLatLngBounds(venue.getBounds()), 19));
                }
            });
        }
    });
}

MapsActivity.kt

private fun initMapControl(view: View) {
    MPMapConfig mapConfig = new MPMapConfig.Builder(this, mMap, getString(R.string.google_maps_key), view, true).build();
    //Creates a new instance of MapControl
    MapControl.create(config) { mapControl, miError ->
        if (miError == null) {
            mMapControl = mapControl!!
            //Enable live data on the map
            enableLiveData()
            //No errors so getting the first venue (in the white house solution the only one)
            val venue = MapsIndoors.getVenues()?.currentVenue
            venue?.bounds?.let {
                runOnUiThread {
                    //Animates the camera to fit the new venue
                    mMap.animateCamera(CameraUpdateFactory.newLatLngBounds(LatLngBoundsConverter.toLatLngBounds(it), 19))
                }
            }
        }
    }
}

MapsActivity.java

void initMapControl() {
    MPMapConfig mapConfig = new MPMapConfig.Builder(this, mMapboxMap, mMapView, getString(R.string.mapbox_access_token),true).build();
    //Creates a new instance of MapControl
    MapControl.create(mapConfig, (mapControl, miError) -> {
        mMapControl = mapControl;
        //Enable Live Data on the map
        enableLiveData();
        if (miError == null) {
            //No errors so getting the first venue (in the white house solution the only one)
            MPVenue venue = MapsIndoors.getVenues().getCurrentVenue();
            runOnUiThread( ()-> {
                if (venue != null) {
                    //Animates the camera to fit the new venue
                    CameraAnimationsUtils.flyTo(mMapboxMap, mMapboxMap.cameraForCoordinateBounds(CoordinateBoundsConverter.toCoordinateBounds(venue.getBounds()), new EdgeInsets(0,0,0,0), null, null));
                }
            });
        }
    });
}

MapsActivity.kt

private fun initMapControl() {
    //Creates a new instance of MapControl
    val config = MPMapConfig.Builder(this, mMap, mapView, getString(R.string.mapbox_access_token),true).build()
    MapControl.create(config) { mapControl, miError ->
        if (miError == null) {
            mMapControl = mapControl!!
            //Enable live data on the map
            enableLiveData()
            //No errors so getting the first venue (in the white house solution the only one)
            val venue = MapsIndoors.getVenues()?.currentVenue
            venue?.bounds?.let {
                runOnUiThread {
                    //Animates the camera to fit the new venue
                    mMap.flyTo(mMap.cameraForCoordinateBounds(CoordinateBoundsConverter.toCoordinateBounds(it)))
                }
            }
        }
    }
}

In your onMapReady callback function, assign the mMap variable with the GoogleMap you get from the callback and call the initMapControl method with the mMapView you assigned in the onCreate to set up a Google map with MapsIndoors Venues, Buildings and Locations:

MapsActivity.java

@Override
public void onMapReady(GoogleMap googleMap) {
   mMap = googleMap;

   if (mMapView != null) {
       initMapControl(mMapView);
   }
}

MapsActivity.kt

override fun onMapReady(googleMap: GoogleMap) {
    mMap = googleMap

    mapView?.let { view ->
        initMapControl(view)
    }
}

MapsActivity.java

protected void onCreate(Bundle savedInstanceState) {
    ...
    initMapControl();
    ...
}

MapsActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    initMapControl();
    ...
}

Expected result:

Map result

See the full example of MapsActivity here: MapsActivity.java or MapsActivity.kt

The Mapbox examples can be found here: MapsActivity.java or MapsActivity.kt

Next up: Search