Search code examples
androidkotlinmapboxmapbox-android

MapBox dynamic Iconsize based on zoom


I have MapBox set up with a few cars as PointAnnotations at various points.

When I zoom the map, the car icons stay the same size instead of dynamically getting smaller, the further I zoom out.

fun addCar(carId : Long, carPosition: Point, rotation: Double) {

        // Set options for the resulting symbol layer.
        val pointAnnotationOptions: PointAnnotationOptions = PointAnnotationOptions()
            // Define a geographic coordinate.
            .withPoint(carPosition)
            .withIconRotate(rotation)
            .withIconImage(BitmapFactory.decodeResource(context.resources,R.drawable.car_icon))
        // Add the resulting pointAnnotation to the map.
        val robotPointAnnotation = pointAnnotationManager.create(pointAnnotationOptions)
    }
}

While searching the web I found clues of using their expression language along the lines of:

iconSize: ['interpolate', ['exponential', 2], ['zoom'], 15, 0.0015, 23, 1],

But I really cannot translate that into kotlin. I treied creating a new styleExtension:

getMapboxMap().loadStyle(
    styleExtension = style(Style.OUTDOORS) {
        +image("CAR") {
            bitmap(BitmapFactory.decodeResource(resources, R.drawable.car_icon))
        }
    }
)

But I cannot figure out where I can add any kind of zoom interpolation for my PointAnnotations.

I really would like to learn more about expressions. But I do not see the connection between them and the PointAnnotations. Can someone point me in the right direction?


Solution

  • So over the weekend I worked this out:

                        +symbolLayer("car-layer", "car-source") {
    
                        iconImage("CAR")
                        iconSize(
                            interpolate {
                                exponential { literal(2)}
                                zoom()
                                literal(5)      // Furthest zoom
                                literal(0.5)    // Target furthest icon size
                                literal(22)     // Nearest zoom
                                literal(1)      // Target nearest icon size
                            }
                        )
                    }
    

    Took me a while to piece everything together, but then again... I am a total DSL noob. Hope this can help someone looking to do something similar.