Monday, 11 February 2019

Creating a two layer marker icon in GoogleMap

In my application I add a set number of markers to my map like this:

private fun addMarker(googleMap: GoogleMap, location: Location) {
    val options = MarkerOptions()
    options.position(LatLng(location.latitude, location.longitude))
    options.rotation(location.bearing)
    options.anchor(0.5f, 0.5f)
    options.flat(true)

    val drawable = ContextCompat.getDrawable(context, R.drawable.background_vehicle) as LayerDrawable
    val bitmap = Bitmap.createBitmap(drawable.intrinsicWidth, drawable.intrinsicHeight, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    drawable.setBounds(0, 0, canvas.width, canvas.height)
    drawable.draw(canvas)

    options.icon(BitmapDescriptorFactory.fromBitmap(bitmap))
    googleMap.addMarker(options)
}

And this is my drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/icon_vehicle_marker" />
    <item android:id="@+id/vehicle_image" android:bottom="5dp" 
          android:drawable="@drawable/icon_car" android:left="5dp" 
          android:right="5dp" android:top="10dp" />

</layer-list>

Which makes something like this:

example

My problem is that making the icon flat and setting a rotation, makes the car icon inside the drawable rotate to. I just want for the first layer to rotate. Ideally, I just want the first layer (the blue arrow) to be flat and rotate and the second layer (the car icon) to not be flat and not rotate.

Is there any way to make a two-layer marker icon with different options or something like that?



from Creating a two layer marker icon in GoogleMap

No comments:

Post a Comment