Adjust layer order
This example demonstrates how to add a GeoJsonSource to a Mapbox Maps SDK for Android application. The GeoJsonLayerInStackActivity class loads a MapView with a MapboxMap instance. It utilizes the Mapbox Maps SDK to load a map style with the MAPBOX_STREETS base style and adds a GeoJsonSource representing urban areas from a remote URL. A fill layer is then added to render the GeoJson polygons with a specific fill color and opacity, positioned below the "water" layer in the style stack. Additionally, the map's camera focuses on a specific geographical point with a predefined zoom level using the CameraOptions class and Point from the Mapbox GeoJson library.
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.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.geojson.Point
import com.mapbox.maps.CameraOptions
import com.mapbox.maps.MapView
import com.mapbox.maps.MapboxMap
import com.mapbox.maps.Style
import com.mapbox.maps.extension.style.layers.generated.fillLayer
import com.mapbox.maps.extension.style.sources.generated.geoJsonSource
import com.mapbox.maps.extension.style.style
class GeoJsonLayerInStackActivity : AppCompatActivity() {
private lateinit var mapboxMap: MapboxMap
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = MapView(this)
setContentView(mapView)
mapboxMap = mapView.mapboxMap
mapboxMap.loadStyle(
style(style = Style.MAPBOX_STREETS) {
+geoJsonSource("urban-areas") {
data("https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson")
}
+layerAtPosition(
fillLayer(layerId = "urban-areas-fill", sourceId = "urban-areas") {
fillColor("#ff0088")
fillOpacity(0.4)
},
below = "water"
)
}
)
mapboxMap.setCamera(
CameraOptions.Builder()
.center(Point.fromLngLat(-84.381546, 33.749909))
.zoom(8.471903)
.build()
)
}
}