Dynamic styling of Icons on google map

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

Community Page
Last updated: