Vector tile source
This examples shows how to add a vector source and a corresponding line layer to a map using the Mapbox Maps SDK for Android. In the onCreate method, the Mapbox Light style is loaded, and a vectorSource is used to add the Mapbox Terrain v2 vector tileset. A line layer is then created in the same style block using the lineLayer function with specific properties like source layer, line join, line cap, line color, and line width configured to display the vector data. Finally, the line layer is positioned below the layer road-label-simple on the map. By visualizing the vector source with a line layer, developers can effectively display geographical data on the map with customization options like color and width.
This example code is part of the Maps SDK for Android Examples App, a working Android project available on GitHub. Android developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.
See our Run the Maps SDK for Android Examples App tutorial for step-by-step instructions.
package com.mapbox.maps.testapp.examples
import android.graphics.Color
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.maps.Style
import com.mapbox.maps.extension.style.layers.generated.lineLayer
import com.mapbox.maps.extension.style.layers.properties.generated.LineCap
import com.mapbox.maps.extension.style.layers.properties.generated.LineJoin
import com.mapbox.maps.extension.style.sources.generated.vectorSource
import com.mapbox.maps.extension.style.style
import com.mapbox.maps.testapp.databinding.ActivityStyleVectorSourceBinding
/**
* Add a vector source to a map using an URL and visualize it with a line layer.
*/
class VectorTileSourceActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val binding = ActivityStyleVectorSourceBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.mapView.mapboxMap.loadStyle(
style(Style.LIGHT) {
+vectorSource("terrain-data") {
url("mapbox://mapbox.mapbox-terrain-v2")
}
+layerAtPosition(
lineLayer("terrain-data", "terrain-data") {
sourceLayer("contour")
lineJoin(LineJoin.ROUND)
lineCap(LineCap.ROUND)
lineColor(Color.parseColor("#ff69b4"))
lineWidth(1.9)
},
below = "road-label-simple"
)
}
)
}
}