Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Map tile not loading in ios webview #5141

Closed
arminghm opened this issue Nov 23, 2016 · 4 comments
Closed

Map tile not loading in ios webview #5141

arminghm opened this issue Nov 23, 2016 · 4 comments

Comments

@arminghm
Copy link

arminghm commented Nov 23, 2016 •
edited

Hi,

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

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.2/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
@perliedman
Copy link
Member

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.

@arminghm
Copy link
Author

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 ).

@serzhlukasohov
Copy link

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

@GninninwokyOuattara
Copy link

Thanks @arminghm, it worked for me too !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@perliedman @arminghm @serzhlukasohov @GninninwokyOuattara