B4J Question Overlapping images + text, on Google Maps markers

amorosik

Well-Known Member
Licensed User
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

Well-Known Member
Licensed User
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?
 
Upvote 0

amorosik

Well-Known Member
Licensed User
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?
 
Upvote 0

Harris

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

spdlab44.png


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

Attachments

  • WriteOnImage.zip
    5.4 KB · Views: 99
Upvote 0

amorosik

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

oparra

Well-Known Member
Licensed User
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).
 
Last edited:
Upvote 0

oparra

Well-Known Member
Licensed User
I suggest to see code the demo of @klaus with the GoogleMapsExt class.


Regards.
 
Upvote 0

amorosik

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

amorosik

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

oparra

Well-Known Member
Licensed User
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


1611606375921.png
 
Last edited:
Upvote 0

Harris

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

amorosik

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

Harris

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

oparra

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

1611606752128.png
 
Last edited:
Upvote 0

oparra

Well-Known Member
Licensed User
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>
 
Last edited:
Upvote 0

oparra

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

 
Upvote 0
Top