LeafletMap not working


#1

The LeafletMap example works fine in Chrome using “Start in desktop browser” from AppStudio if I change the 2 items in extraheaders to read http rather than https, or if I update these items as follows to load latest versions (still with http):-

BUT LeafletMap does NOT work as a phonegap-generated apk, and it does NOT work if deployed to VOLT and then run in Chrome on Android devices, or in my MAC laptop. It starts, and shows the container but there is no map.
Any suggestions? Has anyone made it work?
Thanks, Graham


#2

You need to change the extraheaders to this:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" > 
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"</script>

Since the sample was written, Leaflet has updated their libraries and put a proper certificate on their site. Newer versions of Chrome and other browsers are now blocking sites without certificates.

We’ll update the sample in the next build.


#3

Thanks for the rapid response. However when I replace the extraheaders as you suggest, it does not work at all.
Perhaps this part of the code also needs to change:-

L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: "&amp;copy; &lt;a href='http://osm.org/copyright'&gt;OpenStreetMap&lt;/a&gt; contributors"
}).addTo(mapNSB);

…but to what??

Thanks for your help.


#4

I just noticed that you have to put this in the extraheaders too:-

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
  integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
  crossorigin=""></script>

#5

With these changes to extraheaders, it now works perfectly on Android devices.
Many thanks