Leaflet: Map tile not loading in ios webview

Created on 23 Nov 2016 · 3Comments · Source: Leaflet/Leaflet

Hi,

Im using react native.
This is my map.html file :

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  </head>
  <body>
    <div id="map" style="height: 100%;">
    </div>
    <script>
        var osmUrl = 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, {
              maxZoom: 18,
              attribution: osmAttrib
            });
        var map = L.map('map').setView([19.04469, 72.9258], 12);
        map.addLayer(osm);
    </script>
  </body>
</html>

and Im loading map.html into webview :

import React, { Component } from 'react';
import {
  WebView
} from 'react-native';

export default class MapScreen extends Component {
  render() {
    return (
      <WebView style={{flex:1}} javaScriptEnabled={true} source={require('./map.html')}/>
    );
  }
}

But the tile not loading in ios simulator, but its fine in android emulator.
This is what I see in ios simulator :
simulator screen shot nov 23 2016 11 31 41 pm

Source

arminghm

Most helpful comment

Thank you for reply.

I was because of http requests, and when I disabled the ATS ( App Transport Security ) it works fine and the tiles are loaded. But as you know disabling the ATS is not the solution.

According to the @F1LT3R answer in the issue Streaming Leaflet Tiles over HTTPS / SSL #3186 we can use https for loading tiles and changing the osm to openstreetmap in the tile url ( http://{s}.tile.osm.org/{z}/{x}/{y}.png -> https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png).

arminghm on 24 Nov 2016

👍3

All 3 comments

Hi, this issue involves React, WebView and the iOS simulator. The Leaflet team does not work with, or support these tools, so I'm afraid we can't help you with this one.

Given the very simple example, it's pretty apparent that the problem does not lie in Leaflet itself, but rather how it interacts with one of the other components.

We are open to making changes to Leaflet the make it work better with other tools, but unfortunately do not have the resources to work out issues in other frameworks or tools.

If you can provide a failing example using just Leaflet, JavaScript and HTML/CSS, we're of course very open to working with this.

perliedman on 24 Nov 2016

Thank you for reply.

I was because of http requests, and when I disabled the ATS ( App Transport Security ) it works fine and the tiles are loaded. But as you know disabling the ATS is not the solution.

arminghm on 24 Nov 2016

👍3

@arminghm, thanks a lot, it works for me :)