Karte rendert nicht in LeafletJS - immer leere Seite und keine Fehler

Ich versuche, eine Kartenansicht zu implementieren, die entweder online oder offline Fliesen mit der LeafletJS Bibliothek für Europa (Zoom-Ebene 6 & 7) zeigt.Karte rendert nicht in LeafletJS - immer leere Seite und keine Fehler

Ich habe die Offline-Kartenkacheln mit einem Programm erzeugt Mobile Atlas Creator 2.0.0 beta 1 mit diesen Einstellungen genannt:

Wenn der Atlas erzeugt wird, erstellt es eine Zip-Datei den Ordner MapQuest mit mehreren Unterordnern enthält, und Bilder kacheln.

So habe ich die Broschüre JS-Bibliothek Version 0.7.7 aus http://leafletjs.com/ und extrahierte in die folgenden Verzeichnis-Struktur zusammen mit den Offline-Kartenkacheln heruntergeladen

Hier sind die Inhalte meines index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Europe Zoom Level 6 & 7</title> 
     <link rel="stylesheet" type="text/css" href="leaflet.css"> 
     <script type="text/javascript" src="leaflet.js"></script> 
    </head> 
    <body> 
     <div id="map" style="width: 100%; height: 100%;"></div> 
     <script type="text/javascript"> 

      (function() { 

       // Objects 
       var isOnline = true; 
       var map = L.map('map').setView([51.505, -0.09], 6);; 

       // Generate tile layer url 
       var tileLayerUrl = isOnline 
        ? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
        : 'MapQuest/{z}/{x}/{y}.jpg'; 

       // Set tile layer & set to map 
       L.tileLayer(tileLayerUrl, { 
        minZoom : 6, 
        maxZoom : 7, 
        attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
       }).addTo(map); 

      })(); 

     </script> 
    </body> 
</html>

ich habe versucht, dies in offline Modus ausgeführt sowie online Modus ohne Erfolg; Ich bekomme nur eine leere Seite. In der Konsole sind keine Fehler aufgetreten.

Irgendwelche Ideen, was ich hier falsch machen könnte?

Quelle

2016-04-01 Latheesan

Okay, ich habe es herausgefunden. Das Problem wurde dadurch verursacht, dass keine benutzerdefinierten Stile zur Steuerung der Höhe festgelegt wurden.

Hier ist die feste Arbeitsversion:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Europe Zoom Level 6 & 7</title> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" type="text/css" href="leaflet.css"> 
     <style type="text/css"> 
      html { height: 100% } 
      body { height: 100%; margin: 0; padding: 0;} 
      #map { height: 100% } 
     </style> 
     <script type="text/javascript" src="leaflet.js"></script> 
    </head> 
    <body> 
     <div id="map"></div> 
     <script type="text/javascript"> 

      (function() { 

       // Objects 
       var isOnline = false; 
       var map = L.map('map').setView([51.505, -0.09], 6);; 

       // Generate tile layer url 
       var tileLayerUrl = isOnline 
        ? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
        : 'MapQuest/{z}/{x}/{y}.jpg'; 

       // Set tile layer & add to map 
       L.tileLayer(tileLayerUrl, { 
        minZoom : 6, 
        maxZoom : 7, 
        attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
       }) 
       .addTo(map); 

      })(); 

     </script> 
    </body> 
</html>

Quelle

2016-04-01 11:57:29 Latheesan

Karte rendert nicht in LeafletJS - immer leere Seite und keine Fehler

Antwort

Verwandte Themen