Creating front end loop to dynamically set leafy map markers

Tips
1

Leafy Maps - Dynamic pins/markers to a map with number using google charts api.

image
image1397×692 498 KB

To get dynamic numbered (using the index) markers there are a couple of things you will need to do.

Once you have the Leafy map rendering on the page you can use a recursive front end driven loop - read link below for details and see my images for implementation.
[thanks to @jgellis gellis for this tip on front end recursive workflows herehttp://forum.bubble.io/t/front-end-loops-using-two-custom-events/191937 ]

Workflows - Custom Event - pics on the flow.

image
image362×652 14.3 KB

image
image531×654 19.4 KB

image

image
image407×654 15.3 KB

image

Then to trigger it - On Page load

image
image762×537 22.4 KB

you can see Ive counted the number of items in the repeating croup that I want to work on.

Notes about the dynamic marker option

image
Leafy adds its own ‘http:’ to the url so forget that:

//chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FFF|20|_|ITERATION

then on the end you add iteration for the index value to be added dynamically to the marker.

I have used the Google Charts api here as its quite flexible with adding data to reflect what you need… but quite ugly.

More chart styling: Ícones dinâmicos  |  Image Charts  |  Google for Developers

NOTE: this google charts api is deprecated, so if you use it … use at your own risk, it may just stop.

With this method you could use your own custom markers for each item I suppose.

You could also use this API: https://img.icons8.com/color/{NUMBER}
[This is a paid api]
e.g https://img.icons8.com/color/4

API: https://img.icons8.com

With the latter:

image
image1287×703 461 KB

5 Likes
2

Hi! Thanks for the great research and sharing you foundation!

1 Like
3

That is what this great community is all about :blush:

4

I have found another alternative marker option hosted on Github

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png

image
image843×732 22.5 KB

5

Plus here is a more upto date Google maps pin with variable charachter

Red
https://mt.google.com/vt/icon?psize=20&font=fonts/Roboto-Regular.ttf&color=ff330000&name=icons/spotlight/spotlight-waypoint-b.png&ax=44&ay=48&scale=2&text=1

Green
https://mt.google.com/vt/icon?psize=20&font=fonts/Roboto-Regular.ttf&color=ff330000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=2&text=1

Another good list of uptodate maps icons:

And some more: Google Map icons with VisualRefresh - Stack Overflow

A star Icon
https://www.google.com/maps/vt/icon/name=assets/icons/poi/tactile/pinlet_shadow-1-small.png,assets/icons/poi/tactile/pinlet_outline_v2-1-small.png,assets/icons/poi/tactile/pinlet-1-small.png,assets/icons/poi/quantum/pinlet/constellation_star_pinlet-1-small.png&highlight=ff000000,ffffff,fbc02d,ffffff?scale=2

and a random pink marker
https://www.google.com/maps/vt/icon/name=assets/icons/spotlight/spotlight_pin_v2_shadow-1-small.png,assets/icons/spotlight/spotlight_pin_v2-1-small.png,assets/icons/spotlight/spotlight_pin_v2_dot-1-small.png,assets/icons/spotlight/spotlight_pin_v2_accent-1-small.png&highlight=FF00FF,FF00FF,960a0a,FF00FF&color=FF00FF?scale=3

That is it for this research.

1 Like
6

This helped me achieve individual marker images Thank you.
However, it seems very slow when loading 1000+ markers, taking 1 second to process 2-5 items initially, and getting even slower as it continues. How about on your end? Does it process immediately, or does it take some time? I set 0 seconds for scheduled events. Map test Page (revamp365.ai)