capacitor-community
Allow map view to scroll along with rest of the page
Congratulation for your great plugin! Do you already know, when you want to implement this? Because for me it is essential when I want to use this plugin in production.
Hey @tototares, I've a solution for this in mind using https://stackoverflow.com/a/36468377/5056792 and was hoping to try it over the weekend. Would you be interested in testing out the PR when it's ready?
Hey @tototares , unfortunately it didn't work out as expected. Here's a PR which has the stuff I tried while implementing it https://github.com/hemangsk/capacitor-googlemaps-native/pull/13. This grabs the new coordinates of the div when it is scrolled and sends to the plugin, plugin is then supposed to scroll its native scroll view, and that part is not working (not sure what's the reason).
Hey @hemangsk , damn I just checked the PR out but couldn't find the problem either 😕
@hemangsk Is there anyway we can revisit this? This along with the info boxes are the two items on my list that would prevent me from using this in a production environment.
@selected-pixel-jameson there's no way you can have the map scroll with the content - the way it works is that there's a map behind the viewport and there's a cutout of your current viewport to show the map. See here for a visual explanation. (I mean, there's always a way, but it will have to be a massively hackey-way -- my recommendation would be to use the Javascript map if you need scrolling, and use the native map for specific native viewing)
@gbrits Thank you! This definitely sheds some light on this. I think that we will probably just take your approach and instead use the JS implementation but change the UX around it so that it's not being interacted with and more or less a static image.
but keeping this pinned bc if someone can work out a reasonably hacky solution, it'll be really cool. heavy demand for this feature :D
I have managed to have something decent. Continuing with @hemangsk 's initial idea but on Android. It have some problems with performance but... it works. The idea is to update the map position when the scroll event is fired from Javascript side. It have a limitation due to the fact that the map is above the Webview, but it can be solved by assigning a visible area (padding on MapView).
https://user-images.githubusercontent.com/5394989/122239599-5b421700-cec1-11eb-93df-cb37db8e9846.mp4
You can see the red background behind the map when moving. Much more lag is appreciated because I am recording screen. But still, it is the only problem that I see and it can be improved for sure.
Do we have an approach defined for this based on the two different suggestions? Right now it seems like the two discussion points are:
Performance While this looks to have potential room for improvement it seems like it's at an acceptable level for production use in my opinion.
Overlaying HTML Elements I don't see a common UI paradigm that requires the ability to overlay HTML Elements when using the MapView inline. Typically when a MapView is used in this fashion I believe it is used as more of a static reference to a specific location or almost as a "screenshot" of a location vs. an interactive UI element, but I could be incorrect in this statement. Furthermore I think you could implement UI/UX solutions below / above the map to work around the inability to overlay HTML elements directly on top of the map.