Help with Custom Markers dynamically according to json value obtained with PHP MySQL

[Airam_Costa]

Dear all, I would like to thank anyone who can help me.
My server returns a json in the following format. {
"STATUS": "SUCCESS",
"vehicles": [
{
"vehicle_id": 1,
"vehicle_type": "Car",
"manufacturer": "Fiat",
"model": "Uno",
"color": "White",
"license plate": "ABC1234",
"driver": "João Silva",
"latitude": -23.550520,
"longitude": -46.633308,
"last_update": "2025-01-06 12:30:00"
},
...
]
}

I can create markers in Map1 using the call Map1.CreateMarker ... block.
But this block does not allow me to customize the marker image according to the vehicle_type that is in the json. I would also like to define the marker title and description.
There is a Marker1 component that I added to the project, but I can't get it to be applied.

Suppose you have a type 1 vehicle (motorcycle) and a type 2 vehicle (car). The image of 1 car and 1 motorcycle should appear on the Map and clicking on each one would show the corresponding information.

I've read something about Lists and Dictionaries but I haven't been able to implement it.

I would like to thank you in advance for any and all help, it is very welcome!

[ABG]

FAQ section: Maps

Bugs Map Save does not serialize GeoJSON properly for polygons 2776 - @ewpatton How To Breadcrumbs on Google Maps - CoderDojo Driving Distance APIs Find ... near me - SteveJG Google Earth from Activity Starter Google Maps Route from Activity Starter - SteveJG Google Maps With App Inventor Intro! - Gordon_Lu How to Build a Circular GeoFence - SteveJG How to save and show waypoints on a map - SteveJG Images on Maps Markers - Borgonovo, SteveJG, TimAI2 Map component tutorial - MIT Ma…

Using the Web component block JSONDecodeWithDictionaries, your vehicles would be a list of dictionaries under tag "vehicles".

[Airam_Costa]

Yes, my friend.
I have already decoded the json.
The issue, as explained, is that I can already place the marker.
I want the marker to be different depending on the type of vehicle received in the json.

[Airam_Costa]

[ABG]

Your JSON sample uses key "vehicles", but you used the block "veiculos"?

Where is this translation happening?

[SteveJG]

[quote="Airam_Costa, post:1, topic:136181"
I can create markers in Map1 using the call Map1.CreateMarker
[/quote]

Those are Runtime Markers. You can use a custom Marker with them using the AnyComponent AnyMarker.ImageAsset Block

@Airam_Costa

There is a Marker1 component that I added to the project

That is a Designtime Marker. You can change it to a custom marker by using Marker1.ImageAsset Block

@Airam_Costa

I want the marker to be different depending on the type of vehicle

So for your Project you need a Block with this and a List of all the Runtime Markers you use so you can associate your png images with the component name (which is autogenerated) which means you have to 'collect' its 'name' in a List of runtime markers.

[Airam_Costa]

sorry
it's caused by traduction

[ABG]

In data structures as in locks, the key must match the lock.

[Airam_Costa]

I will rephrase the problem. The site returns json in the following format:

{
"STATUS": "SUCCESS",
"veiculos": [
{
"veiculo_id": 1,
"tipo_veiculo": "carro",
"fabricante": "Fiat",
"modelo": "Palio",
"cor": "azul",
"placa": "XYZ-1234",
"motorista": "João Silva (Unidade: 123)",
"latitude": "-23.550520",
"longitude": "-46.633308",
"ultima_atualizacao": "2025-01-06 10:30:00"
},
{
"veiculo_id": 2,
"tipo_veiculo": "moto",
"fabricante": "Honda",
"modelo": "CG 160",
"cor": "preta",
"placa": "ABC-5678",
"motorista": "Maria Souza",
"latitude": "-23.551000",
"longitude": "-46.633600",
"ultima_atualizacao": "2025-01-06 10:28:00"
}
]
}

I hope for a result like this

but what I get is this.

and thus there is no way of knowing what type of object the marker is. the images are in the project, the jsonDecodeText too. I just need to make sure that the correct image is applied to the marker location and that it is not duplicated. I need the map to be cleaned with each update or the marker to have its position updated. I need someone more experienced to show me the way. Thanks!

[SteveJG]

something like this

is possible.

@Airam_Costa

make sure that the correct image is applied to the marker location

this too is possible with some complex coding. You will have to experiment. Working with Runtime markers is fussy and can be complicated. Your possible Blocks image is impossible to read.

You might find Designtime markers a bit more developer friendly.

[TIMAI2]

The basics with a runtime marker

The data would come from your json for title, description and icon

[ABG]

If you want blocks, we need blocks.

(Canned Reply: ABG- Export & Upload .aia)
Export your .aia file and upload it here.

.

[Airam_Costa]

Obrigado pela ajuda.
As dicas me ajudaram a entender melhor.
Mas percebo que muitas funções (opções) na minha area de trabalho são diferentes.
A opção Marker1.ImageAsset é diferente da imagem.

Preciso fazer algo para que esta opção seja disponibilizada. Mas o quê? Parece que uso uma versão diferente. Será?!

[Airam_Costa]

Thanks for the help.
The tips helped me understand better.
But I notice that many functions (options) in my workspace are different.

The Marker1.ImageAsset option is different from the image.
I need to do something to make this option available. But what? It seems that I use a different version. Could it be?!

[Airam_Costa]

Thank you to everyone who cooperated to help me learn a little more and solve the problem.

This is the part1.

This is the part2

(APP)

(WEBSERVER)