Leaflet: La tuile de carte ne se charge pas dans la vue Web ios

Créé le 23 nov. 2016 · 3Commentaires · Source: Leaflet/Leaflet

Salut,

J'utilise React Native.
Voici mon fichier 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>

et je charge map.html dans la vue Web :

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')}/>
    );
  }
}

Mais la tuile ne se charge pas dans le simulateur ios, mais ça va dans l'émulateur Android.
Voici ce que je vois dans le simulateur ios :
simulator screen shot nov 23 2016 11 31 41 pm

Source

arminghm

Commentaire le plus utile

Merci de votre réponse.

J'étais à cause des requêtes http, et lorsque j'ai désactivé l'ATS (App Transport Security), cela fonctionne bien et les tuiles sont chargées. Mais comme vous le savez, désactiver l'ATS n'est pas la solution.

Selon la réponse @F1LT3R dans le problème Streaming Leaflet Tiles over HTTPS / SSL #3186, nous pouvons utiliser https pour charger les tuiles et changer l'osm pour openstreetmap dans l'url de la tuile ( http://{s}.tile.osm.org/{z}/{x}/{y}.png -> https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png ).

arminghm le 24 nov. 2016

👍3

Tous les 3 commentaires

Bonjour, ce problème concerne React, WebView et le simulateur iOS. L'équipe Leaflet ne travaille pas avec, ou ne prend pas en charge ces outils, donc je crains que nous ne puissions pas vous aider avec celui-ci.

Compte tenu de l'exemple très simple, il est assez évident que le problème ne réside pas dans Leaflet lui-même, mais plutôt dans la façon dont il interagit avec l'un des autres composants.

Nous sommes prêts à apporter des modifications à Leaflet pour qu'il fonctionne mieux avec d'autres outils, mais nous n'avons malheureusement pas les ressources nécessaires pour résoudre les problèmes dans d'autres cadres ou outils.

Si vous pouvez fournir un exemple d'échec en utilisant uniquement Leaflet, JavaScript et HTML/CSS, nous sommes bien sûr très ouverts à l'idée de travailler avec cela.