Osmdroid insert text inside marker

Question

How I can insert text inside Osmdroid marker? Suppose i need place several markers on map, and each marker should have number inside it. How I can make it? I try #setTitle() method, but it place text in balloon.

Update:

for(int i = 0; i < orders.size(); i++) {
    mOrderPoint = orders.get(i).getStart();
    final Order order = orders.get(i);
    Marker orderMarker = new Marker(mMap);
    orderMarker.setIcon(ContextCompat.getDrawable(mContext,R.drawable.order_pin));
    orderMarker.setPosition(mOrderPoint);
}

Cockahoop

what you needed xactly..? you need something same as the image you have attached with the question? – Recurrent

Yes, but number inside icon should be different for each marker – Cockahoop

please add some code you have tried.. – Recurrent

what is the problem you are facing while using settitle method? – Recurrent

When I use setTitle method, number added to balloon and show only on click, but I need number inside icon. – Cockahoop

Answer 1

This method takes a drawable from your resources, draws some text on top of it and returns the new drawable. All you need to do is give it the resource id of your bubble, and the text you want on top. Then you can pass the returned drawable wherever you want it.

public BitmapDrawable writeOnDrawable(int drawableId, String text){

        Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);

        Paint paint = new Paint(); 
        paint.setStyle(Style.FILL);  
        paint.setColor(Color.BLACK); 
        paint.setTextSize(20); 

        Canvas canvas = new Canvas(bm);
        canvas.drawText(text, 0, bm.getHeight()/2, paint);

        return new BitmapDrawable(bm);
    }

Note:

To preserve density you need this constructor

BitmapDrawable (Resources res, Bitmap bitmap)

So, keeping your context, last return should be something like

    return new BitmapDrawable(context.getResources(), bm);

This prevent an undesired resized drawable.

Recurrent

Answer 2

You want to look at osmdroid bonus pack.

Website: https://github.com/MKergall/osmbonuspack

There are many examples of stylized bubbles with text in it.

Selfsealing

Answer 3

The answer by Blue_Alien does not work with vector drawables in Kotlin. The reason is due to BitmapFactory: it returns an error.

If you are programming in kotlin, there is a significantly simpler solution than using BitmapFactory.

Firstly, get the drawable:

val drawable = ContextCompat.getDrawable(context, R.drawable.order_pin)!!

Then simply use the toBitmap() function:

val bitmap = drawable.toBitmap()

And then the rest of the solution is effectively the same.

Final code:

val drawable = ContextCompat.getDrawable(context, R.drawable.order_pin)!!
val bitmap = drawable.toBitmap()

val paint = Paint(); 
paint.style = Style.FILL  
paint.color = Color.BLACK 
paint.textSize = 20 

val canvas = Canvas(bitmap)
// Note, this code places the text in the center of the Bitmap (both vertically and horizontally)
// https://stackoverflow.com/a/11121873
canvas.drawText(text, bm.width / 2f,
                    bm.height / 2f - (paint.descent() + paint.ascent() / 2), paint)

val iconWithText = BitmapDrawable(context.resources, bitmap)

// Marker has to be initialised somewhere in your code
marker.icon = iconWithText

Of course, this code if for one time use. If you want to move it to a function, the parameter could either be the drawable or drawableID, and it would return the icon:

return BitmapDrawable(context.resources, bitmap)

Junkie