-
Notifications
You must be signed in to change notification settings - Fork 63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(map): cover map with HTMLElements #84
Comments
Thanks for creating this, will be easier to document all the progress/blockers on this feature here. I'm aware of an embarrassing workaround for this, that we can hide and show the map with CapacitorGoogleMaps.show(), CapacitorGoogleMaps.hide() by listening to the modal events 🤦 This hack kind of works for the side menu use-cases for small apps, but that's where it is limited to. |
closing and showing the map would, as you said, lead to a poor user experience with larger apps, as you would expect to see parts of the map anyway. I would like to thank you for working on this plugin. I'm always happy to see your plugin at the top of the capacitor community repo (so there were new updates pushed 😄). |
I think it would be wise to close the other issues in favor of this one @hemangsk :) |
As far as I understand cordova google maps solves this by rendering the MapView behind the WebView. The WebView should then be made transparent in order to show the map. But because of that, another problem rises. The MapView can now not be touched anymore because all the touch events are delegated to the overlapping WebView of course. But I honestly have no idea of how to accomplish this. Anyone got an idea? |
Related SO questions: |
https://github.com/capacitor-community/camera-preview has a |
@hemangsk Yes that's exactly what I mean. It is not even that hard to implement. I already did it with capacitor-community/barcode-scanner. But we will have to tackle to problems I mentioned before first. Because otherwise the whole map will be unusable because it will not register any touch events. |
Ah okay! lets figure out a solution for click events delegation. going through the resources linked SO resources |
Just food for thought: Maybe we can do something like this:
I have no idea if what it does to the performance or if it would work in the first place, but I guess we can just test it out./ Unfortunately, at the moment, I do not have time for this. So if anyone would like to volunteer to test out this idea. It would be more than welcome :) Edit: On closer inspection, I think that only adding a listener to |
As alternative you can intercept all touch events on the native side. So on web you just declare the div element which should be intercepted. There are API's on ios and android side
I referenced some examples here Since i'm not a ios/android developer this is also some food for thoughts and needs investigation. |
Yes that could also be used maybe. But the thing with that is: how would you know if the user tapped on an overlay element or on the map? |
you would never actively click on the map with this approach, but would have to programmatically transfer each event (click, swipe, pinch, doubleclick ...) to the map. I can imagine it like this:
this is where it gets interesting when it comes to pinch gestures. |
There should also be a listener of parent scroll events to dynamically change the map offset on page scroll. I.e. on init there could be a check starting from the map parent container up to the document and checking each container for something like:
|
Only one native listener cant be the solution. As you mentioned, the semantic cases of the user interaction with different overlays inside the webview must always be checked in parallel. Any user interaction on the map div itself inside the webview must release/activate or lock the native listener.
But is it useful to use the native listener if the webview events always needed to be tracked too, or is it a better approach to pass the javascript events to the native code? Performance etc.? |
found a useful link to handle pointer events, including pinch gestures on javascript side |
Amazing news guys: I found a way to make this work on Android. It is actually very fast, efficient and reliable as far as I could figure out. Not sure if the method I used can also work on iOS, but I guess we will find that out soon enough. Will share a working example as soon as I finish some last tests! |
As mentioned in #85 this plugin is going to be refactored altogether. As I have already made quite some progress (mainly Android), I implemented this functionality on top of that rewrite. Progress can be seen here: https://github.com/DutchConcepts/capacitor-googlemaps-native/tree/next I have also just created a new repo with examples on how to use it. Please check it out and share your feedback. Unfortunately I do not have the time to implement this functionality for iOS. I might do in a month or so. But I think the concept should be clear and it shouldn't be to hard to implement it on iOS for someone else if anyone has time available. |
@tafelnl This look great! 🚀 I'll also test it over the weekend and get back, it looks way better than the existing plugin already. |
Very nice plugin, i'm waiting for this feature |
Hi, I'm working on your fork on the iOS version. Also, I implemented a method to get VisibleRegion and already created PR for you. |
@ludufre Per my conversations with @tafelnl the iOS implementation should be the last part that needs to get taken care of for that repo to be ready and it should have almost all of these features implemented. I contracted @tafelnl out to build most of that but he's gotten busy and has been unable to wrap up the iOS features. |
@ludufre Have you had any luck getting the iOS version working on your fork? |
@selected-pixel-jameson unfortunately no. I give up and migrated to the slow javascript sdk... |
I have figured out how to allow map elements to overlap the map in iOS. It comes with a few caveats though and I wanted to run it by the community. In order to allow for the elements defined within the Webview to overlap the MapView the WebView needs to be placed above the map view in the iOS ViewControllers View Hierarchy. In the capacitor framework documentation they give you access to
Then within the custom parent view I had to override the hitTest function and test to see if the point that gets passed is within the GSMapView and userInteractioinEnabled is true then return that subview, otherwise just proceed as normal. Furthermore I'm grabbing all of the bounds of child elements within the specified map element on the ionic side of things and testing to see if the point is within any of those. This allows buttons to be laid over the top of the map.
Lastly, I had to implement calls that
Then when the Menu is hidden we will have to listen for it using The biggest caveat right now is dynamically sized elements that layover the map (i.e. ion-fab). The initial button will work, but the dynamic buttons that show up after you click will not be clickable. This is because the bounds of those elements has changed. While we could update them when the button is clicked I'm not sure how we would reset them back. Right now enabling and disabling the map would probably be an easier solution. I know this is a lot. I'm working on getting this all polished and will get a repo out there for people to test with as soon as I can. |
@selected-pixel-jameson just for reference, I have a similar solution but is for my needs. Maybe it can help to do a better solution. Also, I used this with the main package, not with the DutchConcepts fork. But it should work in both packages. In the same Plugin.swift file after the imports I added:
And I replaced in the create method this line with the next code:
Using the main example, this how the HTML element should looks like:
|
Is your feature request related to a problem? Please describe.
Currently it's not possible to implement an application using sidemenu or modals while the map is active in background.
Therefore you can't implement many use cases that you find in many apps (compare various scooter sharing apps etc.)
Here you can see a sample application which is using sidemenu and modals with the latest version of capacitor-google-maps plugin
Describe the solution you'd like
The map should be able to run in the background with HTML elements overlapping (sidemenu, modals, drawer...)
Additional context
here a some reference applications with complex UI covering the map (LiveParking is a ionic application using google maps cordova).
I am aware that it is not an easy task, you also mentioned that there is currently no solution for it.
Nevertheless, I would like to place the feature request here.
this feature request is related to #18 #14
The text was updated successfully, but these errors were encountered: