Tint a fill layer
This example demonstrates adding an image to a map's style and using it to present a pattern within the landuse FillLayer of the Mapbox Streets style.
The implementation dynamically changes the fill pattern color on a button click event, configuring the opacity based on zoom level transitions, and applying filters to specific features within the map layer. Key components utilized in this example include the style class for defining the map style, fillLayer for creating the landuse fill layer, addImage for adding the image used for the pattern, and linearInterpolator for setting opacity levels based on zoom levels. The code showcases how to customize map layers with unique patterns and colors for enhanced map visualization.
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.Bitmap
import android.graphics.BitmapFactory
import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.PorterDuff
import android.graphics.PorterDuffColorFilter
import android.os.Bundle
import androidx.annotation.ColorInt
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.maps.Style
import com.mapbox.maps.extension.style.expressions.dsl.generated.eq
import com.mapbox.maps.extension.style.expressions.dsl.generated.literal
import com.mapbox.maps.extension.style.expressions.dsl.generated.zoom
import com.mapbox.maps.extension.style.expressions.generated.Expression.Companion.linearInterpolator
import com.mapbox.maps.extension.style.image.image
import com.mapbox.maps.extension.style.layers.generated.fillLayer
import com.mapbox.maps.extension.style.style
import com.mapbox.maps.testapp.R
import com.mapbox.maps.testapp.databinding.ActivityRtsFillPatternTintBinding
/**
* Add an image to a style and use it to display a pattern in the landuse
* FillLayer in the Mapbox Streets style.
*/
class TintFillPatternActivity : AppCompatActivity() {
private lateinit var initialBitmap: Bitmap
public override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val binding = ActivityRtsFillPatternTintBinding.inflate(layoutInflater)
setContentView(binding.root)
initialBitmap = BitmapFactory.decodeResource(resources, R.drawable.fill_pattern)
binding.fabPaint.setOnClickListener {
binding.mapView.mapboxMap.style?.apply {
addImage(FILL_PATTERN_ID, changeBitmapColor(initialBitmap, randomColor()))
}
}
binding.mapView.mapboxMap.loadStyle(
style(Style.MAPBOX_STREETS) {
+image(FILL_PATTERN_ID, changeBitmapColor(initialBitmap, randomColor()))
+fillLayer(FILL_LAYER_ID, STREETS_SOURCE_ID) {
sourceLayer(SOURCE_LAYER)
fillPattern(FILL_PATTERN_ID)
fillOpacity(
linearInterpolator(
input = zoom(),
stops = arrayOf(
literal(13.0) to literal(0.0),
literal(15.0) to literal(0.5),
literal(17.0) to literal(0.75)
)
)
)
filter(
eq {
get { literal(FILTER_FIELD) }
literal(FILTER_VALUE)
}
)
}
}
)
}
private fun changeBitmapColor(sourceBitmap: Bitmap, @ColorInt color: Int): Bitmap {
val resultBitmap: Bitmap = sourceBitmap.copy(sourceBitmap.config, true)
val paint = Paint()
paint.colorFilter = PorterDuffColorFilter(color, PorterDuff.Mode.SRC_IN)
val canvas = Canvas(resultBitmap)
canvas.drawBitmap(resultBitmap, 0f, 0f, paint)
return resultBitmap
}
private fun randomColor(): Int {
return (Math.random() * 16777215).toInt() or (0xFF shl 24)
}
companion object {
private const val FILL_LAYER_ID = "fill_layer_id"
private const val FILL_PATTERN_ID = "fill_pattern_id"
private const val STREETS_SOURCE_ID = "composite"
private const val SOURCE_LAYER = "landuse"
private const val FILTER_FIELD = "class"
private const val FILTER_VALUE = "parking"
}
}