1

I'm trying to show a map in xamarin using a WebView component, try passing this code to an html file and it works fine. The WebView is from Xamarin.Forms

The line alert('test'); and the word App in the body of the html is shown without problems, but the map doesn't show.

The devise for test was running android 9

    var browser = new WebView();
    browser.HeightRequest = 600;
    browser.WidthRequest = 600;

    var htmlSource = new HtmlWebViewSource();
    htmlSource.Html = @"<html>
                           <head>
                              <script src='http://www.openlayers.org/api/OpenLayers.js'></script>
                            </head>
                            <body>
                                 App
                                  <div id='mapdiv'></div>
                                  <script>
                                       alert('test');  
                                       map = new OpenLayers.Map('mapdiv');
                                       map.addLayer(new OpenLayers.Layer.OSM());

                                       var lonLat = new OpenLayers.LonLat(-0.1279688, 51.5077286)
                                      .transform(
                                       new OpenLayers.Projection('EPSG:4326'), 
                                       map.getProjectionObject() 
                                    );

                                      var zoom = 16;

                                      var markers = new 
                                      OpenLayers.Layer.Markers('Markers');
                                      map.addLayer(markers);

                                      markers.addMarker(new OpenLayers.Marker(lonLat));

                                      map.setCenter(lonLat, zoom);
                                </script>
                      </body></html>";

                    browser.Source = htmlSource;
                    Children.Add(browser);
luciano cba
  • 185
  • 2
  • 13

1 Answers1

1

1st: Change your script link use https (vs. http)

2nd: The OpenLayers.js script itself uses a lot of non-secure links and that is a problem on iOS and new Android API levels from Google as by default all links should be secure (https).

If you review the application output you will see log messages such as:

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

iOS:

So on iOS, you will have to add an exception to your app's Info.plist such as:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

re: https://stackoverflow.com/a/40299837/4984832

Android:

Starting with Android 9 (API level 28), cleartext support is disabled by default.

On Android 9+ you will have add a security exception to your app (cleartextTrafficPermitted)

re: https://stackoverflow.com/a/55997456/4984832

Note: My Xamarin-based answer is linked, or edit the manifest directly via the other answers to that question.

BTW: The ultimate answer would be to file a bug with OpenLayers to use secure endpoints in all their scripts so application security exceptions do not have to be applied for...

SushiHangover
  • 73,120
  • 10
  • 106
  • 165
  • It's work, thanks, but there is other way to implement OpenLayers in xamarin, I search for some good libraries in nugets repository without results. I want an alternative to google maps – luciano cba May 30 '19 at 17:12
  • 1
    @lucianocba OpenLayers/OpenStreetMap have Rest-API endpoints (that is what their JS libraries use) so you "could" write a C#/Xamarin interface/frontend, but not sure that is worth the effort (of course I do not know your app's requirements)... There are projects such as OsmSharp, but I not used any of them, just the javascript/browser interface. – SushiHangover May 30 '19 at 17:21
  • There's point in filing a bug report with OpenLayers for that library, it's version 2 last updated in 2013. The next release will be version 6. – Mike May 30 '19 at 21:54