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

Daica

Active Member
Licensed User
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

B4X:
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 !
 
Last edited:

TILogistic

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


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



B4X:
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)
 

Attachments

  • Screenshot_20210123-153903.png
    328.7 KB · Views: 402
Last edited:
Upvote 0

Daica

Active Member
Licensed User

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

B4X:
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)

 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User

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:
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
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
 
Last edited:
Upvote 0

Daica

Active Member
Licensed User
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
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
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)
 
Upvote 0

Daica

Active Member
Licensed User
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.
 

Attachments

  • Google Map.zip
    10.3 KB · Views: 251
Last edited:
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
just modify

x.SetAnchor(m, 0.4, 0.5)

here is the result
 

Attachments

  • Screenshot_20210123-174433.png
    244.6 KB · Views: 250
Upvote 0

Daica

Active Member
Licensed User
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
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
x.SetAnchor(m, 0.35, 0.5)
 
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…