Data Driven Style
Note
You can find the full source code of this example in DataDrivenStyleActivity.kt of the MapLibreAndroidTestApp.
In this example we will look at various types of data-driven styling.
The examples with 'Source' in the title apply data-driven styling the parks of Amsterdam. Those examples often are based on the somewhat arbitrary stroke-width property part of the GeoJSON features. These examples are therefore most interesting to learn about the Kotlin API that can be used for data-driven styling.
Tip
Refer to the MapLibre Style Spec for more information about expressions such as interpolate and step.
Exponential Zoom Function
layer.setProperties(
PropertyFactory.fillColor(
Expression.interpolate(
Expression.exponential(0.5f),
Expression.zoom(),
Expression.stop(1, Expression.color(Color.RED)),
Expression.stop(5, Expression.color(Color.BLUE)),
Expression.stop(10, Expression.color(Color.GREEN))
)
)
)
Interval Zoom Function
layer.setProperties(
PropertyFactory.fillColor(
Expression.step(
Expression.zoom(),
Expression.rgba(0.0f, 255.0f, 255.0f, 1.0f),
Expression.stop(1, Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f)),
Expression.stop(5, Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f)),
Expression.stop(10, Expression.rgba(0.0f, 255.0f, 0.0f, 1.0f))
)
)
)
Equivalent JSON
["step",["zoom"],["rgba",0.0,255.0,255.0,1.0],1.0,["rgba",255.0,0.0,0.0,1.0],5.0,["rgba",0.0,0.0,255.0,1.0],10.0,["rgba",0.0,255.0,0.0,1.0]]
Exponential Source Function
val layer = maplibreMap.style!!.getLayerAs<FillLayer>(AMSTERDAM_PARKS_LAYER)!!
layer.setProperties(
PropertyFactory.fillColor(
Expression.interpolate(
Expression.exponential(0.5f),
Expression.get("stroke-width"),
Expression.stop(1f, Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f)),
Expression.stop(5f, Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f)),
Expression.stop(10f, Expression.rgba(0.0f, 255.0f, 0.0f, 1.0f))
)
)
)
Categorical Source Function
val layer = maplibreMap.style!!.getLayerAs<FillLayer>(AMSTERDAM_PARKS_LAYER)!!
layer.setProperties(
PropertyFactory.fillColor(
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f),
Expression.literal("Jordaan"),
Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f),
Expression.literal("Prinseneiland"),
Expression.rgba(0.0f, 255.0f, 0.0f, 1.0f),
Expression.rgba(0.0f, 255.0f, 255.0f, 1.0f)
)
)
)
Identity Source Function
val layer = maplibreMap.style!!.getLayerAs<FillLayer>(AMSTERDAM_PARKS_LAYER)!!
layer.setProperties(
PropertyFactory.fillOpacity(
Expression.get("fill-opacity")
)
)
Interval Source Function
val layer = maplibreMap.style!!.getLayerAs<FillLayer>(AMSTERDAM_PARKS_LAYER)!!
layer.setProperties(
PropertyFactory.fillColor(
Expression.step(
Expression.get("stroke-width"),
Expression.rgba(0.0f, 255.0f, 255.0f, 1.0f),
Expression.stop(1f, Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f)),
Expression.stop(2f, Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f)),
Expression.stop(3f, Expression.rgba(0.0f, 255.0f, 0.0f, 1.0f))
)
)
)
Composite Exponential Function
val layer = maplibreMap.style!!.getLayerAs<FillLayer>(AMSTERDAM_PARKS_LAYER)!!
layer.setProperties(
PropertyFactory.fillColor(
Expression.interpolate(
Expression.exponential(1f),
Expression.zoom(),
Expression.stop(
12,
Expression.step(
Expression.get("stroke-width"),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f),
Expression.stop(1f, Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f)),
Expression.stop(2f, Expression.rgba(0.0f, 0.0f, 0.0f, 1.0f)),
Expression.stop(3f, Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f))
)
),
Expression.stop(
15,
Expression.step(
Expression.get("stroke-width"),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f),
Expression.stop(1f, Expression.rgba(255.0f, 255.0f, 0.0f, 1.0f)),
Expression.stop(2f, Expression.rgba(211.0f, 211.0f, 211.0f, 1.0f)),
Expression.stop(3f, Expression.rgba(0.0f, 255.0f, 255.0f, 1.0f))
)
),
Expression.stop(
18,
Expression.step(
Expression.get("stroke-width"),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f),
Expression.stop(1f, Expression.rgba(0.0f, 0.0f, 0.0f, 1.0f)),
Expression.stop(2f, Expression.rgba(128.0f, 128.0f, 128.0f, 1.0f)),
Expression.stop(3f, Expression.rgba(0.0f, 255.0f, 0.0f, 1.0f))
)
)
)
)
)
Identity Source Function
val layer = maplibreMap.style!!.getLayerAs<FillLayer>(AMSTERDAM_PARKS_LAYER)!!
layer.setProperties(
PropertyFactory.fillOpacity(
Expression.get("fill-opacity")
)
)
Composite Interval Function
val layer = maplibreMap.style!!.getLayerAs<FillLayer>(AMSTERDAM_PARKS_LAYER)!!
layer.setProperties(
PropertyFactory.fillColor(
Expression.interpolate(
Expression.linear(),
Expression.zoom(),
Expression.stop(
12,
Expression.step(
Expression.get("stroke-width"),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f),
Expression.stop(1f, Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f)),
Expression.stop(2f, Expression.rgba(0.0f, 0.0f, 0.0f, 1.0f)),
Expression.stop(3f, Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f))
)
),
Expression.stop(
15,
Expression.step(
Expression.get("stroke-width"),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f),
Expression.stop(1f, Expression.rgba(255.0f, 255.0f, 0.0f, 1.0f)),
Expression.stop(2f, Expression.rgba(211.0f, 211.0f, 211.0f, 1.0f)),
Expression.stop(3f, Expression.rgba(0.0f, 255.0f, 255.0f, 1.0f))
)
),
Expression.stop(
18,
Expression.step(
Expression.get("stroke-width"),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f),
Expression.stop(1f, Expression.rgba(0.0f, 0.0f, 0.0f, 1.0f)),
Expression.stop(2f, Expression.rgba(128.0f, 128.0f, 128.0f, 1.0f)),
Expression.stop(3f, Expression.rgba(0.0f, 255.0f, 0.0f, 1.0f))
)
)
)
)
)
Composite Categorical Function
val layer = maplibreMap.style!!.getLayerAs<FillLayer>(AMSTERDAM_PARKS_LAYER)!!
layer.setProperties(
PropertyFactory.fillColor(
Expression.step(
Expression.zoom(),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f),
Expression.stop(
7f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
8f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
9f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
10f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
11f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
12f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
13f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
14f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f),
Expression.literal("Jordaan"),
Expression.rgba(0.0f, 255.0f, 0.0f, 1.0f),
Expression.literal("PrinsenEiland"),
Expression.rgba(0.0f, 0.0f, 0.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
15f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
16f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
17f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
18f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f),
Expression.literal("Jordaan"),
Expression.rgba(0.0f, 255.0f, 255.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
19f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
20f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
21f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(255.0f, 0.0f, 0.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
),
Expression.stop(
22f,
Expression.match(
Expression.get("name"),
Expression.literal("Westerpark"),
Expression.rgba(0.0f, 0.0f, 255.0f, 1.0f),
Expression.rgba(255.0f, 255.0f, 255.0f, 1.0f)
)
)
)
)
)