This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Oli Askew
Posted Nov 23 - Read on Facebook

Hey everyone,

I’m new to Framer (thoroughly enjoying it so far!) and in the process of making an app wireframe prototype for user testing. It includes a map view with various POI points across it. However, I’m having difficulty setting up the map layer itself. Hope somebody might be able to help?

See http://share.framerjs.com/i8h3y08twv56/ for a clean demonstration of the issue. I only need a single layer image of a map for prototyping purposes. I’d like the map layer to be scrollable AND pinchable, which is where the problem arises. The mapScroller.content layer constraints do not seem to update on pinch, which means that the scrollable area stays the same whether the content is scaled in or out,.

To replicate the problem, do the following:

1. - Scroll left and right, you will only be able to scroll up to the edges of the image layer (over dragging is disabled) - this is desired behaviour.
2. - Re-center the map and pinch-out to zoom in to a sale around 4x as printed in the console.
3. - Try to scroll left and right. You can only scroll to the edges of the original dimensions of the image, meaning that you won’t be able to scroll to the edges of the illustration, let alone the map layer itself. This is undesired behaviour. I would like the user to be able to scroll al the way to the layer’s edges (and no further), even if they are pinched in to a 4x scale.

The inverse happens when you pinch-inwards to zoom out to a scale of 0.6. Because the content width and height constraints do not update to the smaller image dimensions, you can drag the entire image layer partly off the screen. I would like the constraints to not allow the user to be able to scroll off the edge of the map, even if they have scaled out to 0.5.

I have tried to solve this problem by:

-Making the map layer itself pinchable rather than the content. But this has the same problem; the mapScroller.content won’t update to the new size of the map layer. Using this method I would also be challenged to organise the POI points (I’ve added a POI to show what i’m after, somewhere in the middle of the map) - so if this was part of the solution I would have to wrap the map and POIs with another abstract layer to keep everything in.

-Calling mapScroller.updateContent() which doesn’t seem to update the constraints. If I hover over map in the inspector, I can see that it’s x, y, width and height have all changed to reflect the scale, but the original dimensions are always printed in the console, which is what the mapScroller.content also uses as it’s scrolling constraints.

-Using an existing dragging example here: http://share.framerjs.com/nl07nufelqe4/, trying to dynamically resize the constraints frame upon pinching. I reduced the scaleFactor so that it is the resizing of the layers themselves which predominantly cause the scaling effect. It’s getting there, but quickly starting to blow my mind when I think about keeping it all proportionally displayed in the viewport, let alone adding POIs. Also layerA’s size doesn’t get updated And pinching back in to zoom out again seems to be giving weird results.

So I think I’ve run out of talent for the time being! I’m not a programmer by trade, so fully expecting that I’ve missed something quite obvious, or not realising that actually I need maths abilities way beyond mine :D. I saw a member mention mapBox further down the timeline but, having never used it before, I’m worried it might take more time than I can reasonably invest in setting up for now! I could make this so that the layer isn’t pinchable but when I add POIs I’d like to user-test with different POIs being visible at different map scales according to importance so there isn’t too much on the screen at once :)

If anyone can "pinch in" with an idea to help me get this working I’d be really grateful!

1 Comments

Krijn Rijshouwer

Check out this prototype by Claudio Guglieri. Which covers pretty much everything you'd like to have in your design. Let me know if it helps! — https://share.framerjs.com/2u9j7l4ka0fp/

Read the entire post on Facebook