9-patch image
Add 9-patch image to the style.
package com.mapbox.maps.testapp.examples import android.graphics.BitmapFactoryimport android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.mapbox.geojson.Featureimport com.mapbox.geojson.Pointimport com.mapbox.maps.CameraOptionsimport com.mapbox.maps.MapViewimport com.mapbox.maps.Styleimport com.mapbox.maps.extension.style.image.image9Patchimport com.mapbox.maps.extension.style.layers.generated.SymbolLayerimport com.mapbox.maps.extension.style.layers.generated.symbolLayerimport com.mapbox.maps.extension.style.layers.getLayerimport com.mapbox.maps.extension.style.layers.properties.generated.IconTextFitimport com.mapbox.maps.extension.style.sources.generated.geoJsonSourceimport com.mapbox.maps.extension.style.styleimport com.mapbox.maps.testapp.R /*** Example showcasing of adding 9-patch image to style* and demonstrating how it works when stretching image.*/class NinePatchImageActivity : AppCompatActivity() { private var appendTextCounter = 1private lateinit var style: Styleprivate lateinit var mapView: MapViewoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)mapView = MapView(this)setContentView(mapView)mapView.mapboxMap.loadStyle(styleExtension = style(Style.STANDARD) {+image9Patch(NINE_PATCH_ID,BitmapFactory.decodeResource(resources, R.drawable.blue_round_nine))+geoJsonSource(SOURCE_ID) {feature(Feature.fromGeometry(CENTER))}+symbolLayer(LAYER_ID, SOURCE_ID) {iconImage(NINE_PATCH_ID)// make sure we stretch image both in X and YiconTextFit(IconTextFit.BOTH)iconTextFitPadding(listOf(5.0, 5.0, 5.0, 5.0))textField(TEXT_BASE)}}) {style = itupdateIconText()}mapView.mapboxMap.setCamera(CameraOptions.Builder().center(CENTER).zoom(ZOOM).build())} private val runnable = {if (style.isValid()) {val layer = (style.getLayer(LAYER_ID) as SymbolLayer)layer.textField("${layer.textField?.getTextAsString()} $TEXT_BASE")appendTextCounter++if (appendTextCounter.rem(3) == 0) {layer.textField("${layer.textField?.getTextAsString()}\n")}updateIconText()}} // start appending text in a loop, stretching icon in both X and Yprivate fun updateIconText() {mapView.postDelayed(runnable,TEXT_UPDATE_TIME_MS)} override fun onStop() {super.onStop()mapView.removeCallbacks(runnable)}companion object {private const val NINE_PATCH_ID = "red"private const val SOURCE_ID = "source_id"private const val LAYER_ID = "layer_id"private val CENTER = Point.fromLngLat(12.554729, 55.70651)private const val ZOOM = 9.0private const val TEXT_BASE = "Hi!"private const val TEXT_UPDATE_TIME_MS = 1500L}}
Was this example helpful?