-
Notifications
You must be signed in to change notification settings - Fork 493
Add magnifying glass example #613
Comments
@langsmith very cool. I'm interested in an experience like this for a 'history window' that exposes views of the past, and doesn't actually magnify. Any plans to implement or have you identified if there are any blockers? I'm envisioning that the history 'window' can be moved around the screen, and the two map views stay in sync. Even drag resizing of the window. I can see a couple potential approaches. Layout and event handling seems like the crux. Ultimately I'd like to implement it with the react-native-mapbox-gl wrapper but we'll see. Cheers |
Hey @twelch !
I'm not sure what you mean by this. Can you point me to an example or something? Anyways, the point is that two maps can communicate with one another. I made the demo app's InsetMapActivity a while ago. It has some fun map interaction 👇 For this magnifying glass example, I was imagining having a second map in a fragment (the satellite map in this ticket's original post). As I (somehow) drag the fragment box around, the middle of the fragment box gets translated to coordinates on the bottom main map. Once I have the coordinates, I can tell the fragment map to move to those coordinates, so that the effect appears to be me moving the "glass" on top of the bottom map. Not sure if any of that made sense, lol. Basically I'm re-creating the example in the GIF above, but also adding the ability to move the small box around to where I want. Preventing the bottom map from moving (e.g. disabling gestures, etc.) is also key. cc @nitaliano who's our react guru here at Mapbox |
Thanks @langsmith. I chatted Nick up briefly on Gitter just today, he pointed me at what upcoming for the next version of the React Native component. So, here's the concept. The 'window' can be moved around revealing a view of the past underneath. In practice, I think the window map view is actually on top but the shadow makes it look like it's below. I see now the map synching I'm proposing would be much more like the compare plugin than your InsetMap example, so that it's a seamless transition, a 'perfect' sync if you will -- https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/ |
That's so awesome. The shadow is an amazing trick. I'm afraid this is the extent of advice that I can give you about this. If/when I get around to this example on Android, I'll probably explore the inset map way of doing it. You're correct that the JS example is probably worth you looking into. I'd worked on some slider compare stuff for the demo app a while go. Ran out of steam and it was very low priority 🤷♂️ |
Came across this and thought it'd be cool to try to pull off with our maps
The text was updated successfully, but these errors were encountered: