Dépliant rendant les tuiles TileMill dans le mauvais ordre

15

Je suis perplexe, et beaucoup de recherches n'ont rien trouvé d'utile.

Je suis à la première étape de ce qui sera finalement une carte avec trois couches raster et trois couches de marqueurs (avec des contrôles pour basculer entre les rasters et leurs données associées, avec des popups / info-bulles pour les données), mais je ne peux pas obtenir le rendu correct des tuiles Tilemill. (J'ai créé les rasters dans QGIS, les ai exécutés via GDAL pour les coloriser et les re-projeter, puis les ai placés dans TileMill.)

À savoir: entrez la description de l'image ici c'est dans Chrome. Voici Safari:

Et voici le code, qui me semble assez inoffensif (j'ai tout commenté sauf les tuiles à ce stade, donc c'est tout ce que j'ai inclus):

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

Quelqu'un a-t-il déjà rencontré ce problème? Si oui, comment l'avez-vous surmonté? J'ai hâte de commencer le reste du processus de création de cette carte (j'entends par là "découvrir le prochain problème à résoudre").

Modifié pour ajouter: j'ai essayé de réexporter un nouveau fichier MBTiles, de le télécharger en tant que nouvelles données et de créer un nouveau projet Mapbox à partir de ces données. Pas de dé. La prochaine étape pour isoler le problème serait de configurer le fichier MBTiles sur un serveur, en ignorant Mapbox, mais cela semble plus susceptible de créer des problèmes que de les résoudre.

— Dani
source

27

Vous avez oublié d'ajouter CSS Leaflet:

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

Il existe également de nombreuses fautes de frappe dans votre code: par exemple, dans la html, body{}ligne de feuille de style. Vérifiez-les avant de les déployer en production.

— Ilja Zverev
source

1

Vous avez tout à fait raison, et cela a été réglé! Je savais juste que c'était quelque chose de stupide comme ça. Je vous remercie beaucoup pour votre aide!!

— Dani

0

Je sais que cette question est ancienne et a déjà été résolue, mais j'ai une autre solution pour tous ceux qui ont actuellement ce même problème. Si vous avez chargé votre CSS et qu'il n'affiche toujours pas les tuiles correctement, vous devez inclure tms: truedans vos options TileLayer .

Un exemple de mon 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);

J'espère que cela aide quelqu'un d'autre avec le même problème.

— bijx
source