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

D

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.

1611381803064.png


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.
1611383174438.png


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:
Sort by date Sort by votes
TILogistic

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
    Screenshot_20210123-153903.png
    328.7 KB · Views: 416
Last edited:
Upvote 0
D

Daica

Active Member
Licensed User
oparra said:
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)
Click to expand...

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)

1611428265732.png
 
Upvote 0
TILogistic

TILogistic

Expert
Licensed User
Longtime User
Daica said:
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)

View attachment 106781
Click to expand...

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

TILogistic

Expert
Licensed User
Longtime User
Daica said:
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?
Click to expand...

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
D

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

TILogistic

Expert
Licensed User
Longtime User
Daica said:
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
Click to expand...
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
D

Daica

Active Member
Licensed User
oparra said:
upload your project if you want help.
Click to expand...

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: 258
Last edited:
Upvote 0
TILogistic

TILogistic

Expert
Licensed User
Longtime User
just modify

x.SetAnchor(m, 0.4, 0.5)

here is the result
 

Attachments

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

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):
1611435059152.png


(0.4, 0.5)
1611435079370.png


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

TILogistic

Expert
Licensed User
Longtime User
Daica said:
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
Click to expand...
x.SetAnchor(m, 0.35, 0.5)
 
Upvote 0
You must log in or register to reply here.
Top