Possible to overlay html elements on top of MKMapView?

[iori57]

Firstly, thanks for the plugin it works great!

Is it possible to put the MKMapView under the webview, such as how cordova-plugin-googlemaps (https://github.com/mapsplugin/cordova-plugin-googlemaps) do it? most part of the webview will be transparent to allow the MKMapView to be displayed but this way we can overlay html elements such as menus if we wanted to.

Not sure if this is possible in iOS, found several cordova plugins for MapKit but so far none are doing this, there must be a reason or simply impossible?

Thanks!

[victorzimmer]

Happy to hear that it works for you!

Already working on it. From what I can see it should be possible, I currently have transparent webViews working. It will be in version 0.0.4.

The webView will of course be transparent and you’ll be able to choose wether or not it should have UserInteraction (If it does the map underneath cant respond to touch).

—
Victor Zimmer

On Thu, Nov 19, 2015 at 2:33 AM, iori57 notifications@github.com wrote:

Firstly, thanks for the plugin it works great!
Is it possible to put the MKMapView under the webview, such as how cordova-plugin-googlemaps (https://github.com/mapsplugin/cordova-plugin-googlemaps) do it? most part of the webview will be transparent to allow the MKMapView to be displayed but this way we can overlay html elements such as menus if we wanted to.
Not sure if this is possible in iOS, found several cordova plugins for MapKit but so far none are doing this, there must be a reason or simply impossible?

Thanks!

Reply to this email directly or view it on GitHub:
#3

[iori57]

Thanks for the fast response!

That is great news.. looking forward to it :)

If you have a development branch I can help to test it too before the actual release. (the truth is I am too excited to try it out XD)

Thanks again!

[victorzimmer]

Well I should probably use branches (Everything so far has been committed directly to Master :P). It should probably be ready tonight or tomorrow so I'll notify you by posting here as soon as it's committed.

Also I'm gonna make a development branch right away.

[iori57]

Awesome, thanks!

[victorzimmer]

No problem!

[victorzimmer]

Thought you might like this ;)

[iori57]

Neat stuff!

[victorzimmer]

The version in the development branch will now make a web view with every map view. It will look in your "www" folder for a file named with the ID you gave your map.

So if you create the map as MKInterface.MKMap('supercool') it will look in www for supercool.html.

[iori57]

Anyway to make it work with existing webview?

For example cordova loads my index.html. Pressing one button will then display the mapkit mapview behind it.

Will try out the development branch when I am able :)

[victorzimmer]

As far as I can see there is no good way to modify the existing Cordova webView without breaking things. However I am working on communication between the MapKit WebView and the Cordova WebView so you'll be able to click things in the overlay and have the app react to the event.

[iori57]

I have initial success in trying to put the mapview behind of existing cordova webview if you are interested.

I followed how https://github.com/mapsplugin/cordova-plugin-googlemaps did it with Android + GoogleMap, just apply the same concept to iOS + MapKit

Steps:

• In MapKit.m createMapView(), instead of adding the mapview as a subview to cordova webview, add it as a sibling instead, as such

[webView.superview insertSubview:mapView belowSubview:webView];
[webView setBackgroundColor:[UIColor clearColor]];

• In MainViewController.m of cordova, uncomment the block of code for webViewDidStartLoad() and add the below:

[self.webView setOpaque:NO];

For some reason this line does not work if I put it in createMapView(), based on some answers in stackoverflow there are comments that it will only work if we set it earlier, right after we create the webview.

• In the HTML side of things, set the div that suppose to show the mapview, along with all its parent divs, to have background-color: rgba(0, 0, 0, 0) !important;

With this the native map can be shown in the app, while opening menu/side panel and stuff can be properly overlay on top of it.

What is missing is that we just need to add two more plugin methods, to disable/enable webview interaction depending whether we want to interact with the webview (menu/side panel) or the map itself.

[victorzimmer]

Well that might work. I do still believe that a separate view is a better approach though. Especially since that view will appear and disappear with the map. All I need to do is to implement a way for the views to message each other.

—
Victor Zimmer

On Fri, Nov 20, 2015 at 5:36 AM, iori57 notifications@github.com wrote:

I have initial success in trying to put the mapview behind of existing cordova webview if you are interested.
I followed how https://github.com/mapsplugin/cordova-plugin-googlemaps did it with Android + GoogleMap, just apply the same concept to iOS + MapKit
Steps:

• In MapKit.m createMapView(), instead of adding the mapview as a subview to cordova webview, add it as a sibling instead, as such

  [webView.superview insertSubview:mapView belowSubview:webView];
  [webView setBackgroundColor:[UIColor clearColor]];

• In MainViewController.m of cordova, uncomment the block of code for webViewDidStartLoad() and add the below:

  [self.webView setOpaque:NO];
  For some reason this line does not work if I put it in createMapView(), based on some answers in stackoverflow there are comments that it will only work if we set it earlier, right after we create the webview.

• In the HTML side of things, set the div that suppose to show the mapview, along with all its parent divs, to have background-color: rgba(0, 0, 0, 0) !important;
  With this the native map can be shown in the app, while opening menu/side panel and stuff can be properly overlay on top of it.
  What is missing is that we just need to add two more plugin methods, to disable/enable webview interaction depending whether we want to interact with the webview (menu/side panel) or the map itself.

  Reply to this email directly or view it on GitHub:
  Possible to overlay html elements on top of MKMapView? #3 (comment)

[victorzimmer]

Join me on Freenode IRC? In the #cordova channel

—
Victor Zimmer

On Fri, Nov 20, 2015 at 5:36 AM, iori57 notifications@github.com wrote:

I have initial success in trying to put the mapview behind of existing cordova webview if you are interested.
I followed how https://github.com/mapsplugin/cordova-plugin-googlemaps did it with Android + GoogleMap, just apply the same concept to iOS + MapKit
Steps:

• In MapKit.m createMapView(), instead of adding the mapview as a subview to cordova webview, add it as a sibling instead, as such

  [webView.superview insertSubview:mapView belowSubview:webView];
  [webView setBackgroundColor:[UIColor clearColor]];

• In MainViewController.m of cordova, uncomment the block of code for webViewDidStartLoad() and add the below:

  [self.webView setOpaque:NO];
  For some reason this line does not work if I put it in createMapView(), based on some answers in stackoverflow there are comments that it will only work if we set it earlier, right after we create the webview.

• In the HTML side of things, set the div that suppose to show the mapview, along with all its parent divs, to have background-color: rgba(0, 0, 0, 0) !important;
  With this the native map can be shown in the app, while opening menu/side panel and stuff can be properly overlay on top of it.
  What is missing is that we just need to add two more plugin methods, to disable/enable webview interaction depending whether we want to interact with the webview (menu/side panel) or the map itself.

  Reply to this email directly or view it on GitHub:
  Possible to overlay html elements on top of MKMapView? #3 (comment)