TileMill-Kacheln werden in der falschen Reihenfolge gerendert

14

Ich bin ratlos und eine Menge Suchen hat nichts Hilfreiches ergeben.

Ich bin im ersten Schritt einer Karte mit drei Rasterebenen und drei Ebenen von Markierungen (mit Steuerelementen zum Umschalten zwischen den Rastern und den zugehörigen Daten, mit Popups / Tooltips für die Daten), kann dies aber nicht Bringe die Tilemill-Kacheln dazu, richtig zu rendern. (Ich habe die Raster in QGIS erstellt, sie in GDAL ausgeführt, um sie einzufärben und neu zu projizieren, und sie dann in TileMill abgelegt.)

Bildbeschreibung hier eingeben Das heißt : Das ist in Chrome. Das ist Safari:

Und hier ist der Code, der für mich ziemlich harmlos aussieht (ich habe bis auf die Kacheln an dieser Stelle alles auskommentiert, das ist also alles, was ich aufgenommen habe):

<html>
<head>
 <title> - Leaflet demo</title>
 <script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 <style type='text/css'>
 html, body{ width:100%; height: 100%, margin:0; padding:0; }
 #map{ width:700px; height:600px }
 img {margin:0px;padding:0px};
</style>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
//one base layer on map
var map = new L.Map( "map" ).setView([38.173,-94.384],5);
L.tileLayer('http://a.tiles.mapbox.com/v3/mtgmediagroup.beef2013/{z}/{x}/{y}.png', {
 attribution: 'Dani Friedland/MTG Media Group',
 maxZoom: 9
}).addTo(map);
</script>
</head>
<body>
<b>Map</b>
<div id="map"></div>
</body>
</html>

Hat jemand jemals auf dieses Problem gestoßen? Wenn ja, wie haben Sie es überwunden? Ich bin gespannt auf den Rest des Prozesses der Erstellung dieser Karte (womit ich natürlich "das nächste zu lösende Problem aufdecken" meine).

Bearbeitet zum Hinzufügen: Ich habe versucht, eine neue MBTiles-Datei erneut zu exportieren, sie als neue Daten hochzuladen und aus diesen Daten ein neues Mapbox-Projekt zu erstellen. Kein Würfel. Der nächste Schritt zur Eingrenzung des Problems besteht darin, die MBTiles-Datei auf einem Server einzurichten und Mapbox zu überspringen. Dies führt jedoch eher zu Problemen als zu deren Behebung.

— Dani
quelle

25

Sie haben vergessen, Leaflet CSS hinzuzufügen:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

Außerdem enthält Ihr Code zahlreiche Tippfehler, z. B. in der html, body{}Stylesheet-Zeile. Überprüfen Sie sie, bevor Sie sie für die Produktion bereitstellen.

— Ilja Zverev
quelle

1

Sie haben vollkommen recht, und das hat sich darum gekümmert! Ich wusste nur, dass es so etwas Dummes war. Vielen Dank für deine Hilfe!!

— Dani

0

Ich weiß, dass diese Frage alt ist und bereits gelöst wurde, aber ich habe eine andere Lösung für alle, die derzeit das gleiche Problem haben. Wenn Sie Ihr CSS geladen haben und die Kacheln immer noch nicht richtig angezeigt werden, müssen Sie sie tms: truein Ihre TileLayer- Optionen aufnehmen.

Ein Beispiel für meinen Code:

var mymap = L.map('mapid').setView([0, 0], 3)

L.tileLayer('http://localhost/map/MapData/sat/{z}/{x}/{y}.png', {
        minZoom: 1, maxZoom: 7,
        tms: true,
        attribution: 'World Map'
    }).addTo(mymap);

Hoffe das hilft jemand anderem mit dem gleichen Problem.

— bijx
quelle