Android Question Is it possible to have label/text on Google Map circle and Polygons?

[Daica]

Hello, is it possible to have text/labels on a polygon and circles in Google Map on Android?
Something like this, more centered in the middle.

Thank you.

My "solution" to this only works for Circles. For circle, you need to find the center of the circle and then create a marker using (gmap.AddMarker3) to add in a bitmap marker that is just the text.
I'm not sure how to apply this "solution" to a polygon since polygons can have a weird shape.

Example for circle: Using TextToBitmap function by Erel here

Dim co As CircleOptions
co.Initialize
co.Center2(40, 40).Radius(1609).FillColor(Colors.ARGB(150, 255, 229, 179)).StrokeColor(Colors.ARGB(150, 240, 58, 23)).StrokeWidth(2.0)
gmapExtra.AddCircle(gmap, co)

'Here we will add the text for the circle, using the center's LatLng      
Dim bmp As Bitmap = TextToBitmap(100dip, xui.CreateDefaultBoldFont(10), xui.Color_Black, "Text for Circle")
Dim m As Marker = gmap.AddMarker3(RadaiiSection.Get("Lat"), RadaiiSection.Get("Lng"),"", bmp)

You would get something like this:
I don't know how to perfectly center the text, or how to auto calculate how big the text needs to be, but it works.

Anyways, I guess to clarify what my questions are:

1. Is there a built-in method of adding text/labels to Circles/Polygon?
2. If there isn't, if I use my solution, how can I calculate the center of a polygon?
3. Is there a way to calculate so that the text is in the center of the circle and the font size is automatic?

thank you !

 

[TILogistic]

test:
co.Center2 (40, 40)
gmap.AddMarker3 (40, 40, "", bmp)
MarkerExtras1.SetAnchor (m, 0.4, 0.5)

use:
TextToBitmap ( 100dip,
TextToBitmap ( DipToCurrent (100)

Dim co As CircleOptions
co.Initialize
co.Center2 (40, 40) .Radius (1609) .FillColor (Colors.ARGB (150, 255, 229, 179)). StrokeColor (Colors.ARGB (150, 240, 58, 23)). StrokeWidth (2.0)
gmapExtra.AddCircle (gmap, co)

Dim bmp As Bitmap = TextToBitmap (100dip, xui.CreateDefaultBoldFont (10), xui.Color_Black, "Texto para círculo")
Dim m As Marker = gmap.AddMarker3 (40, 40, "", bmp)

'MarkerExtras from the GoogleMapsExtras library
Dim MarkerExtras1 como MarkerExtras
MarkerExtras1.SetAnchor (m, 0.4, 0.5)

 

[TILogistic]

Polygon:
must calculate the centroid of the points that make up the Polygon:

How find center of polygon

Hi all, I have a polygon on google map and I want to find center.

www.b4x.com

search:

Search Results

www.b4x.com

 

[Daica]

test:
co.Center2 (40, 40)
gmap.AddMarker3 (40, 40, "", bmp)
MarkerExtras1.SetAnchor (m, 0.4, 0.5)

use:
TextToBitmap ( 100dip,
TextToBitmap ( DipToCurrent (100)

Dim co As CircleOptions
co.Initialize
co.Center2 (40, 40) .Radius (1609) .FillColor (Colors.ARGB (150, 255, 229, 179)). StrokeColor (Colors.ARGB (150, 240, 58, 23)). StrokeWidth (2.0)
gmapExtra.AddCircle (gmap, co)

Dim bmp As Bitmap = TextToBitmap (100dip, xui.CreateDefaultBoldFont (10), xui.Color_Black, "Texto para círculo")
Dim m As Marker = gmap.AddMarker3 (40, 40, "", bmp)

'MarkerExtras from the GoogleMapsExtras library
Dim MarkerExtras1 como MarkerExtras
MarkerExtras1.SetAnchor (m, 0.4, 0.5)

Thank you for the answer, however, my text isn't perfectly centered like yours

Dim co As CircleOptions
co.Initialize
co.Center2(lat, lng).Radius(radius).FillColor(Colors.ARGB(150, 255, 229, 179)).StrokeColor(Colors.ARGB(150, 240, 58, 23)).StrokeWidth(2.0)
gmapExtra.AddCircle(gmap, co)
                            
Dim bmp As Bitmap = TextToBitmap(DipToCurrent(100),xui.CreateDefaultBoldFont(10), xui.Color_Black, "Text for Circle")
Dim m As Marker = gmap.AddMarker3(lat, lng ,"", bmp)
Dim x As MarkerExtras
x.SetAnchor(m, 0.4, 0.5)

 

[TILogistic]

Thank you for the answer, however, my text isn't perfectly centered like yours

Dim co As CircleOptions
co.Initialize
co.Center2(lat, lng).Radius(radius).FillColor(Colors.ARGB(150, 255, 229, 179)).StrokeColor(Colors.ARGB(150, 240, 58, 23)).StrokeWidth(2.0)
gmapExtra.AddCircle(gmap, co)
                        
Dim bmp As Bitmap = TextToBitmap(DipToCurrent(100),xui.CreateDefaultBoldFont(10), xui.Color_Black, "Text for Circle")
Dim m As Marker = gmap.AddMarker3(lat, lng ,"", bmp)
Dim x As MarkerExtras
x.SetAnchor(m, 0.4, 0.5)

View attachment 106781

Modify anchor settings:

x.SetAnchor(m, 0.4, 0.5)

U (0.4) from 0 to 1
V (0.5) from 0 to 1

Test:
x.SetAnchor(m, 0.5, 0.5)

See:

B4A - GoogleMapsExtras

 

[Daica]

Modify anchor settings:

x.SetAnchor(m, 0.4, 0.5)

U (0.4) from 0 to 1
V (0.5) from 0 to 1

Test:
x.SetAnchor(m, 0.5, 0.5)

See:

B4A - GoogleMapsExtras

Does it matter the size of the circle? For example, 1609 meter is about 1-mile radius. Can I use x.SetAnchor(m, 0.5, 0.5) on all circles whatever the size?

 

[TILogistic]

Does it matter the size of the circle? For example, 1609 meter is about 1-mile radius. Can I use x.SetAnchor(m, 0.5, 0.5) on all circles whatever the size?

co.Center2(lat, lng)
the center of the circle is the one that indicates where to place the marker
gmap.AddMarker3(lat, lng ,"", bmp)

on all circles? yes
x.SetAnchor(m, 0.5, 0.5)

Does it matter the size of the circle? No

 

[TILogistic]

However:

zooming in on the map will place the text larger than the radius drawing.

Solution:
Capture map camera zoom and resize marker text

see:

Camera and view | Maps SDK for Android | Google for Developers

developers.google.com

 

[Daica]

For some reason even though im using (0.5, 0.5) its not centered like yours. I guess I have to keep messing with the values?
If you dont mind, can you post that project in your screenshot or the code?
Thank you

 

[TILogistic]

For some reason even though im using (0.5, 0.5) its not centered like yours. I guess I have to keep messing with the values?
If you dont mind, can you post that project in your screenshot or the code?
Thank you

I guess I have to keep messing with the values? Yes

x.SetAnchor(m, 0.4, 0.5)

U (0.5) from 0.0 to 1.0 ---- playing with the values (horizontal)

V (0.5) from 0.0 to 1.0 ---- playing with the values (vertical)

 

[TILogistic]

upload your project if you want help.

 

[Daica]

upload your project if you want help.

I have posted my project, I removed the google API key in the manifest file.

EDIT: I played with the anchor position and for me, (0.3, 0.5) looks like it fits in the center.

 

[TILogistic]

just modify

x.SetAnchor(m, 0.4, 0.5)

here is the result

 

[Daica]

Thank you, for some reason x.SetAnchor(m, 0.3, 0.5) works for my project. Not sure if it's a screen resolution thing or something in my code.

(0.3, 0.5):

(0.4, 0.5)

I will try to do the same for the polygons, thanks so much for your help!
I just need to figure out how to change text size based on camera zoom but I think I should open new thread for that

 

[TILogistic]

Thank you, for some reason x.SetAnchor(m, 0.3, 0.5) works for my project. Not sure if it's a screen resolution thing or something in my code.

(0.3, 0.5):
View attachment 106791

(0.4, 0.5)
View attachment 106792

I will try to do the same for the polygons, thanks so much for your help!
I just need to figure out how to change text size based on camera zoom but I think I should open new thread for that

x.SetAnchor(m, 0.35, 0.5)