Add magnifying glass example

[langsmith]

Came across this and thought it'd be cool to try to pull off with our maps

[twelch]

@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

[langsmith]

Hey @twelch !

a 'history window' that exposes views of the past, and doesn't actually magnify

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

[twelch]

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/

[langsmith]

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 🤷‍♂️
#526 (comment)

[sansumbrella]

I'm making some progress building a demo in this vein, though our map isn't compositing nicely with other Android views. I'm curious if anyone else has tried masking out a Mapbox map inside an android view.

Basic approach:

• create a custom parent view type to perform masking
• set parent and child views as hardware layers android:layerType="hardware"
• override dispatchDraw on the parent view
• blend a DST_IN circle over the child layers

This works well for image assets and TextViews, but the actual map that we render is unaffected by the mask. You can see the result below, where the text layer behind the map gives you a sense of the circular shape of the mask.

[sansumbrella]

Progress: