Dynamic styling of Icons on google map

Wappler General How To
,
#1

Hi!
I’m a new user (and new to HTML/Javascript), just starting to explore the possibilities and see if Wappler is suitable for what I’m looking to do. That said, apologies if what I’m asking is blindingly obvious, and thanks in advance for any assistance!

Background:
I’m hoping to retrieve spatial/temporal data (water quality and river level at specific locations) via API, and then display it on a map. The markers (icons?) would be styled according to the two variables (size linked to the level, and colour linked to the water quality). As this would be multiple locations over a time series, I am wanting to use the Data Iterator to allow a user to scroll backwards and forwards through time.

I’m close to having the API figured out (just running into some CamelCase/lowercase issues with parameter names - although I read there might be a fix for that? (API Connector only allows lowercase query parameter names)

The data iterator seems like a pretty good match for scrolling though time (as outlined here: Loop Through Database Records with the Data Iterator Component)

I just can’t seem to find a way to have that dynamic styling of markers on the map. I am hoping to just have a simple dot or circle icon, and from what I can tell the Maps Javascipt API supports this through the symbol functionality:
https://developers.google.com/maps/documentation/javascript/symbols

I’m not sure how to implement this through Wappler…

Thanks again for any help!

Cheers,
Ben

#2

Hi all,
is there anyone on the forums that might be able to offer some advice with regards to this? My trial has now expired, so I can’t keep progressing my testing, and unfortunately I can’t justify purchasing a business pro subscription if I can’t find some sort of resolution or at least a vague direction to work in. Even an indication of whether or not what I am trying to do is possible would be greatly appreciated!

Cheers,
Ben.

#3

You can create your own icons for the map markers very easy. Thats what I do. And then you can call a custom marker from the google maps wappler component.

If you have GPS longitude and latitude in your database, just add a map marker field also. You can just put the icon name in there. Its over simplifying the solution. But I have done it on several sites without issue.

#4

Hi Baub,
Thanks for the reply! Do you mean create a separate icon for each combination of size and colour, and then link the map icon image to the specific icon file? I was hoping to use a size or scale property to vary the size as a minimum - the colour I could get away with using a traffic light system (green, yellow, red). However, it would be nice to get finer adjustments in the size than can probably be easily done with separate images.

Thanks again!
Ben.

#5

you can use a template for the icon values.

You could create red512px.png, red128px.png, red600px.png, etc…
Something like that and then use a template for the database field with size and color you need. Or some logic to figure out the size etc. Store the info in each entry as to what the marker should look like?

Screen Shot 2020-02-26 at 8.41.46 AM
Screen Shot 2020-02-26 at 8.41.46 AM587×877 105 KB

#6

Hmm, OK. Not quite the method I was hoping to use - I imagine I’ll probably need to generate at least 30 or so icons for each colour in that case. But I guess if that’s the only way forward then that’s what I’ll have to work towards.

On the API issue that i was having with regards to lower case vs camel case… is there any reason why it is possible to define the schema and retrieve the correct parameter structure, but be unable to get data using a client side API call? Is there something that I’m missing with regards to how the client side API call should be working? If it can retrieve the schema, shouldn’t it be able to retrieve the data?

Cheers,
Ben.