How to make Map markers to trigger Hype functions?

Using JavaScript with Hype
1

I made this demo site:
http://zanate.com.mx/rosca2018/

When you click each icon on the map, individual information for each location appear.

The map is not a map, is .png so I can have more control over the contents and I do manually positioned the markers which each one are symbols.

In an attempt to create something similar but using an actual map, I made a demo using mapbox:
http://zanate.com.mx/rosca2018/demo/

The thing is, I can’t find a way to trigger hype functions when I click each marker, specifically, I can’t find a way to create an unique ID or a way to know which marker I’m clicking.

Is this possible with Mapbox, or even Google maps?

Here is the mapbox hype file
Rosca
Mapbox.hype.zip (2.9 MB)

And here is the original hype demo (png map)
rosca_img.hype.zip (904.7 KB)

2

Rosca Mapbox.hype.zip (1.6 MB)
… just adapted the desktopversion …

3 Likes
3

H O L Y S H….

I have been trying to make this work
function(){hypeDocument.startTimelineNamed(marker.properties.title, hypeDocument.kDirectionForward)};

But it never worked for me, maybe Im too easy to impress, but your solutions are always so elegant and simple, it always put a big grin on my face.

This was my last attempt to make it work, I got the feeling marker.properties.title was the wrong way to go, but I just was doing it all wrong.

Thanks a lot… again

4

Its online! Its working using your solution:
http://zanate.com.mx/rosca2018/

Thanks for your time.

3 Likes
5

I come again in require your assistance with a new issue at hand:

Using your solution i managed to trigger functions using custom behaviors inside Hype:

The thing is, Im starting to get too many custom behaviors:

While this, at this moment is not a big problem, I may start to add some 10 to 20 new functions and this means 10 to 20 new custom behaviors, not sure if that could mean problems with hype performance, but I’m trying to avoid anything that could compromise stability.

Is there a way to trigger the hype functions directly, by matching the name of the function with the title of each marker?

I tried with
hypeDocument.functions().marker.properties.title(hypeDocument, element, event);

And with
var myfunction = marker.properties.title
hypeDocument.functions().myfunction(hypeDocument, element, event);

but doesn’t work.

6

NVM, I did it!, using the example on this site: http://www.techtamasha.com/how-to-dynamically-call-javascript-functions/116, I found it works using this code:

hypeDocument.functions()[marker.properties.title](hypeDocument, element, event);

2 Likes