Streaming live at 10am (PST)

Make pins on top of map follow map when scaling


#1

Hi all

I want to make a world map that has pins that fades in when scrolling to the map.

So far:
I have put the map (svg file) inside a 'Section' and then a 'Column'. I then put the pin graphic and text label inside a div that is set to 'Position Absolute' with z-depth 1 in the same column as the map. Now I can move the pin to the right position.

The problem:
When I scale down the site to tablet/phone, the map scale down, but the div with the pin inside do not scale, thereby moving to the wrong position on the map.

Question:
How can I set it up so that the pin scales with the map, keeping the right position on the map?

Printscreen of set up:


#2

Hey @Christoffer . Nice concept there. Did you use percentage based values when positioning the pins?


#3

Hi Alex

Ah, stupid me! With percentage it worked great! Thanks!


#4

Very welcome @Christoffer


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.