B4J Question Overlapping images + text, on Google Maps markers

amorosik · Jan 23, 2021

I use jGoogleMaps to display a map and markers with the positions of some cars
For each car I have a small image that is used to display the car on the map
In addition to the position I would also like to indicate the direction of the individual cars and a text to indicate the speed and the name of the driver
So the marker should consist of: - small car image - arrow image to indicate direction - alphanumeric string to indicate speed and driver
I currently load the small car image using the function
gmap.AddMarker2 (lat, lon, "Targa =" & Targa_Auto, File.GetUri (File.DirAssets, graphic_marker))
And so I'm missing the arrow image to indicate direction, and the string image containing other information
How to "add" to the image of the car, a small arrow rotatable from 0 to 360 degrees, and then an alphanumeric string?

amorosik · Jan 25, 2021

Thank you very much, I tried to follow the directions but I can't get to a working solution
I found this link with the code that I need, but even here trying to bring it under B4J I find some difficulties probably because the libraries used on Android and on PC are not the same

B4X:

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)

Could someone help me translate these few lines into code working under B4J?

Erel · Jan 25, 2021

See GoogleMap.AddMarker2. It expects a Uri to an online image.

amorosik · Jan 25, 2021

Yes i use AddMarker2
I would like to make markers consisting of:
1- image of a small car
2- string with some information
3- an arrow indicating the current direction

To get step 2, I was thinking of using the TextToBitmap function to get the image of the information to display
Then, having the three images, I can overlay them and supply them as a single image for the marker
To get the image I need (car + text + arrow), do you think this is the best way or would you recommend another way?

Erel · Jan 25, 2021

I would have used B4XCanvas for this. If you need to draw multiline text then you can add a label and take a snapshot with Label.Snapshot.

Harris · Jan 25, 2021

I just went thru this exact process - requiring map marker(EX) images.
Here is a short example image:

I got this code from another kind contributor and modified it to suit my purposes.'
The gold map marker points are static files - all individual images built with the project.
The cyan map point was built, using the same project, from a database table that contained the lat/lon and text for the label.

I am sure that these map labels could be built on the fly, with whatever you want for text and image, stretched to fit text (or wrapped to shrink text font size) - but that's up to you. This is just an example of how to accomplish this (experimental).

Short code example to get markers - and add to a list in case I want to hide them...

B4X:

Sub AddMileMarks

Dim sloc As ABMSwitch = page.NavigationBar.ExtraContent.Component("sloc1")
Dim show As Boolean = sloc.State

If show Then
    'Log(" Making milemarks....")
        
    Dim sql As SQL = DBM.GetSQL
    Dim mile As List = DBM.SQLSelect(sql, "SELECT * FROM places")' where comp_id = "&Main.comp_id&" Order by Last_name") ' WHERE userId=" & SelectedRowId)
    DBM.CloseSQL(sql)

    If mile.Size > 0 Then
        For i = 0 To mile.Size -1
            Dim mil As Map = mile.Get(i)
            Dim lat As Double = mil.Get("lat")
            Dim lon As Double = mil.Get("lon")
            Dim nam As String  = mil.GetDefault("city","NA")
            Dim path As String
            Dim pn As String = nam&".png"
            If File.Exists(File.DirApp&"/www/"&ABMShared.AppName&"/images/pnames", pn) Then
                path = "../images/pnames/"&pn
            Else
                path = "../images/truck3brn.png"
            End If
            
    '        gm1.AddMarkerEX( "milem"&i, lat ,  lon, ABM.COLOR_YELLOW , "Place: "&nam&" ",  "{B}"& nam & "{BR}")
            gm1.AddMarkerEx( "milemark"&i , lat, lon+0.002, nam ,  nam, path, False )
            placelist.Add("milemark"&i)
        Next
        
    End If
End If
    
End Sub

Hope this helps in ur dev efforts...

amorosik · Jan 25, 2021

Thank you very much for the help
But is the WriteOnImage.zip example related in any way to the above code?
I ask this because it seems to me quite another thing

TILogistic · Jan 25, 2021

Simple use:

GMap.AddInfoWindow2
GMap.AddInfoWindowToMarker

You must create an HTML string, with the data you want to see in the marker information windows (image, Text).

TILogistic · Jan 25, 2021

See B4J:

jGoogleMaps library

It is based on this open source project: http://rterp.github.io/GMapsFX/
Under the hood it uses JavaFX WebView with GoogleMaps JavaScript API V3.

Api Doc:

Class Hierarchy (GMapsFX 2.0.9 API)

TILogistic · Jan 25, 2021

I suggest to see code the demo of @klaus with the GoogleMapsExt class.

GoogleMapsDemo

Some time ago I played a lot with GoogleMaps according to this post: https://www.b4x.com/android/forum/threads/problem-with-googlemaps-handling-polygons.84238/#post-533844 The problem was to add other shapes on a googlemap overlapping existing shapes. When you move the mouse over an existing...

www.b4x.com

Regards.

amorosik · Jan 25, 2021

There is a problem that cannot be solved
AddMarker2 allows you to load an image but taken from Dir.Assets or from external url
And if you have to load 30-40 markers it is not possible to write on an external wall and then go and read it, the work to be done becomes too heavy.
It is therefore ESSENTIAL to have a series of images in the Dir.Assets

amorosik · Jan 25, 2021

Harris said:

B4X:

Sub AddMileMarks

Dim sloc As ABMSwitch = page.NavigationBar.ExtraContent.Component("sloc1")
Dim show As Boolean = sloc.State

If show Then
    'Log(" Making milemarks....")
     
    Dim sql As SQL = DBM.GetSQL
    Dim mile As List = DBM.SQLSelect(sql, "SELECT * FROM places")' where comp_id = "&Main.comp_id&" Order by Last_name") ' WHERE userId=" & SelectedRowId)
    DBM.CloseSQL(sql)

    If mile.Size > 0 Then
        For i = 0 To mile.Size -1
            Dim mil As Map = mile.Get(i)
            Dim lat As Double = mil.Get("lat")
            Dim lon As Double = mil.Get("lon")
            Dim nam As String  = mil.GetDefault("city","NA")
            Dim path As String
            Dim pn As String = nam&".png"
            If File.Exists(File.DirApp&"/www/"&ABMShared.AppName&"/images/pnames", pn) Then
                path = "../images/pnames/"&pn
            Else
                path = "../images/truck3brn.png"
            End If
         
    '        gm1.AddMarkerEX( "milem"&i, lat ,  lon, ABM.COLOR_YELLOW , "Place: "&nam&" ",  "{B}"& nam & "{BR}")
            gm1.AddMarkerEx( "milemark"&i , lat, lon+0.002, nam ,  nam, path, False )
            placelist.Add("milemark"&i)
        Next
     
    End If
End If
 
End Sub

Where does the gm1.AddMarkerEx function come from?
On the jGoogleMaps v. 1.82, this is not present

TILogistic · Jan 25, 2021

oparra said:
Simple use:

You must create an HTML string, with the data you want to see in the marker information windows (image, Text).

See:
view the marker custom and information window custom.

You can design your custom information windows in HTML

Harris · Jan 25, 2021

amorosik said:
Where does the gm1.AddMarkerEx function come from?
On the jGoogleMaps v. 1.82, this is not present

Sorry, the EX is ABMaterial's AddMarkerEx function. It was 3 am when I replied and forgot to mention that.

amorosik · Jan 25, 2021

oparra said:
See:
view the marker and information window.

You can design your custom information windows in HTML

View attachment 106923

Info window appears only when you point to the marker and click
What I would like to obtain is the visualization of some text information directly above the marker icon, information visible even without clicking

Harris · Jan 25, 2021

That was the problem I was having, so I made markers with the Speed imprinted on them.
You have to hover or click a standard marker to get any info from it. That's the Google way - sorry....

TILogistic · Jan 25, 2021

You can make the info windows open and not close, if that's what you want.

create an html template in a string, to which you will concatenate the marker data.

you understand.

amorosik · Jan 25, 2021

Harris said:
That was the problem I was having, so I made markers with the Speed imprinted on them.
You have to hover or click a standard marker to get any info from it. That's the Google way - sorry....

How many markers ?

oparra said:
You can make the info windows open and not close, if that's what you want

View attachment 106928

Ahhhhh, this is a good news
Now I get to work

TILogistic · Jan 25, 2021

sorry I was busy with other jobs at ReactJS.

sample HTML used.

HTML:

<!-- #######  THIS IS A COMMENT - Visible only in the source editor #########-->
<h2>Welcome HTML InfoWindow!</h2>
<table style="height: 120px; width: 421px;">
    <tbody>
        <tr style="height: 139.844px;">
            <td style="width: 188px; height: 139.844px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.jdpower.com/JDPA_2021%20Nissan%20Rogue%20Platinum%20Blue%20Front%20Quarter%20View.jpg" alt="car1" width="174" height="130" /></td>
            <td style="width: 217px; height: 139.844px;">
                <p style="text-align: justify;">You can <strong>type your text</strong> directly in the editor or paste it from a Word Doc, PDF, Excel etc.</p>
                <p style="text-align: justify;">The <strong>visual editor</strong> on the right and the <strong>source editor</strong> on the left are linked together and the changes are reflected in the other one as you type! <img src="https://html5-editor.net/images/smiley.png" alt="smiley" /></p>
            </td>
        </tr>
    </tbody>
</table>
<p style="font-size: 1.5em;">&nbsp;</p>
<table class="editorDemoTable" style="width: 424px;">
    <tbody>
        <tr>
            <td style="width: 98px;"><strong>Name</strong></td>
            <td style="width: 199px;"><strong>City</strong></td>
            <td style="width: 101px;"><strong>Age</strong></td>
        </tr>
        <tr>
            <td style="width: 98px;">John</td>
            <td style="width: 199px;">Chicago</td>
            <td style="width: 101px;">23</td>
        </tr>
        <tr>
            <td style="width: 98px;">Lucy</td>
            <td style="width: 199px;">Wisconsin</td>
            <td style="width: 101px;">19</td>
        </tr>
        <tr>
            <td style="width: 98px;">Amanda</td>
            <td style="width: 199px;">Madison</td>
            <td style="width: 101px;">22</td>
        </tr>
    </tbody>
</table>
<p>This is a table you can experiment with.</p>

TILogistic · Jan 25, 2021

What I would like to obtain is the visualization of some text information directly above the marker icon, information visible even without clicking

If you want to do this.

you must construct a bitmap as a marker label.

to display all the information of the marker use info-window, clicking on the marker

see the @klaus demo code.

GoogleMapsDemo

Some time ago I played a lot with GoogleMaps according to this post: https://www.b4x.com/android/forum/threads/problem-with-googlemaps-handling-polygons.84238/#post-533844 The problem was to add other shapes on a googlemap overlapping existing shapes. When you move the mouse over an existing...

www.b4x.com

B4J Question Overlapping images + text, on Google Maps markers

Expert

Expert

B4X founder

Expert

B4X founder

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency