How to Add XYZ Tile Layers to an Android Map

This article teaches you how to create a simple Google Maps SDK for Android app with XYZ tile layers. You can use any of the layers on our categorized layer list to add to the app.

We'll use Android Studio to set up a project and the Google Maps Activity template for our app. Follow Google's instructions to get the template app up and running. You will need to:

Create a new project with Google Maps Activity and select Kotlin as the development language.
Create an API key and add it to your app.
Deploy and run the app. When you do it successfully, it will display a map that is centered on Sydney Australia with a marker on the city.

Now, if you completed these steps successfully, we can make our modifications to the app. Open the MapsActivity.kt file and replace its contents with the following:

MapsActivity.kt

package com.geohowtos.demos

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

import com.google.android.gms.maps.CameraUpdateFactory
import com.google.android.gms.maps.GoogleMap
import com.google.android.gms.maps.OnMapReadyCallback
import com.google.android.gms.maps.SupportMapFragment
import com.google.android.gms.maps.model.LatLng
import com.google.android.gms.maps.model.TileOverlayOptions
import com.google.android.gms.maps.model.UrlTileProvider
import java.net.URL

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_maps)
        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    override fun onMapReady(map: GoogleMap) {
        map.mapType = GoogleMap.MAP_TYPE_NONE

        val cartoDBDarkMatter = object : UrlTileProvider(256, 256) {
            @Synchronized
            override fun getTileUrl(x: Int, y: Int, zoom: Int): URL {
                val urlTemplate = "https://%s.basemaps.cartocdn.com/dark_all/%d/%d/%d.png"
                val s = String.format(urlTemplate, listOf("a", "b", "c", "d").random(), zoom, x, y)
                return URL(s)
            }
        }

        map.addTileOverlay(TileOverlayOptions().tileProvider(cartoDBDarkMatter))
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(LatLng(52.2, -1.5), 8f))
    }
}

What's happening here:

On lines 20-21, we add a SupportMapFragment object to the activity that will manage the life cycle of the map.
With the getMapAsync method on line 22, we get notified when the map is ready to be used.
On line 26, we set the Google map not to display any basemap tiles because we are about to add our own tiles to the map.
We create the layer provider on lines 28-35 (the highlighted part).
We add the created layer to the map on line 37. You can also set the transparency of the layer by defining transparency on TileOverlayOptions in the range [0.0f, 1.0f].
Finally, we move the map's camera to our chosen geographical coordinates and zoom level (here we use coordinates for some place in England).

You can pick any of our layer provider configurations to add to your application. Just copy the code to create the layer provider in the preview application, paste it into your Kotlin file in place of the highlighted part and add the map.addTileOverlay(TileOverlayOptions().tileProvider(layer)) command.

Tags