Leaflet: O bloco do mapa não carrega no ios webview

Criado em 23 nov. 2016 · 3Comentários · Fonte: Leaflet/Leaflet

Oi,

Estou usando o reagente nativo.
Este é meu arquivo map.html:

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

e estou carregando map.html no 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')}/>
    );
  }
}

Mas o bloco não está carregando no simulador ios, mas está bem no emulador de Android.
Isso é o que vejo no simulador ios:
simulator screen shot nov 23 2016 11 31 41 pm

Fonte

arminghm

Comentários muito úteis

Obrigado por responder.

Fiquei por causa de solicitações de http, e quando desativei o ATS (App Transport Security) ele funciona bem e os tiles são carregados. Mas como você sabe desabilitar o ATS não é a solução.

De acordo com a resposta @ F1LT3R no problema Streaming Leaflet Tiles over HTTPS / SSL # 3186 , podemos usar https para carregar blocos e alterar o osm para openstreetmap no url do bloco ( http://{s}.tile.osm.org/{z}/{x}/{y}.png -> https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png )

arminghm em 24 nov. 2016

👍3

Todos 3 comentários

Olá, este problema envolve React, WebView e o simulador iOS. A equipe do Leaflet não trabalha ou oferece suporte a essas ferramentas, portanto, não podemos ajudá-lo com esta.

Dado o exemplo muito simples, é bastante aparente que o problema não está no próprio folheto, mas sim em como ele interage com um dos outros componentes.

Estamos abertos para fazer alterações no Leaflet para fazê-lo funcionar melhor com outras ferramentas, mas infelizmente não temos os recursos para resolver problemas em outras estruturas ou ferramentas.

Se você puder fornecer um exemplo de falha usando apenas Leaflet, JavaScript e HTML / CSS, é claro que estamos muito abertos para trabalhar com isso.

perliedman em 24 nov. 2016

Obrigado por responder.

Fiquei por causa de solicitações de http, e quando desativei o ATS (App Transport Security) ele funciona bem e os tiles são carregados. Mas como você sabe desabilitar o ATS não é a solução.

arminghm em 24 nov. 2016

👍3

@arminghm , muito obrigado, funciona para mim :)