#8 Interactive Map: Pinch & Rotate, Multi-touch map | Daily Design Challenge

What I used 🪄

• Trigger: Drag > Move, Pinch > Scale (Limit 1000~5000), Rotate > Rotate

Today I Learned 👀
I learned how to make a multi-touch experience using an interactive map prototype in ProtoPie. To preview, I downloaded the ‘Protopie Player’ from App store. That’s because the Pinch interaction only works when I run the prototype on a mobile device.

[Download ‘ProtoPie Player’ App]

• iOS: https://apps.apple.com/us/app/protopie-player/id1015837511
• Android: https://play.google.com/store/apps/details?id=io.protopie.companion&hl=en_US&pli=1

Issues I met 🤔
1. After I add Drag > Move Trigger, It didn’t work at Preview.
This is because ‘UI’ Layer positioned on top of the layer named ‘Map’.
This is preventing our touch interaction from passing through to the Map layer.

How I fixed the problem ✅
Click the ‘UI’ layer, then enable ‘Make Lower Layers Touchable.’
Then, it works!

2. I noticed how far I can zoom in and out on the map. The more I zoom in, the more the map quality was broken.

How I fixed the problem ✅
To fix this problem, I set a limit under the ‘Pinch Trigger’
*Limit) Min W: 1000, Min H: 1000 / Max W: 5000, Max H: 5000

I feel amazing that I made a interactive Map! 🗺️