Rendering di volantini TileMill nell'ordine sbagliato

14

Sono sconcertato e molte ricerche non hanno rivelato nulla di utile.

Sono sul primo passo di quella che alla fine sarà una mappa con tre livelli raster e tre livelli di marcatori (con i controlli per passare da un raster ai dati associati, con popup / tooltip per i dati), ma non posso ottenere il rendering corretto delle tessere Tilemill. (Ho creato i raster in QGIS, li ho passati attraverso GDAL per colorarli e riproiettarli, e poi li ho inseriti in TileMill.)

In altre parole: inserisci qui la descrizione dell'immagine è in Chrome. Questo è Safari:

Ed ecco il codice, che mi sembra abbastanza innocuo (ho commentato tutto tranne le tessere a questo punto, quindi è tutto ciò che ho incluso):

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

Qualcuno ha mai riscontrato questo problema? Se è così, come l'hai superato? Sono impaziente di iniziare il resto del processo di creazione di questa mappa (con il quale ovviamente intendo "scoprire il prossimo problema da risolvere").

Modificato per aggiungere: ho provato a riesportare un nuovo file MBTiles, caricandolo come nuovi dati e creando un nuovo progetto Mapbox da quei dati. Niente da fare. Il prossimo passo per isolare il problema sarebbe quello di impostare il file MBTiles su un server, saltando Mapbox, ma ciò sembra più probabile che crei problemi piuttosto che risolverli.

— Dani
fonte

25

Hai dimenticato di aggiungere Leaflet CSS:

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

Inoltre ci sono numerosi errori di battitura nel tuo codice: ad esempio, nella html, body{}riga del foglio di stile. Controllali prima di distribuirli alla produzione.

— Ilja Zverev
fonte

1

Hai assolutamente ragione, e questo se ne è occupato! Sapevo solo che era qualcosa di stupido come quello. Grazie mille per il vostro aiuto!!

— Dani

0

So che questa domanda è vecchia ed è già stata risolta, ma ho un'altra soluzione per chiunque abbia attualmente lo stesso problema. Se hai caricato nel tuo CSS e continua a non visualizzare correttamente i riquadri , devi includere tms: truenelle opzioni di TileLayer .

Un esempio del mio codice:

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

Spero che questo aiuti qualcun altro con lo stesso problema.

— bijx
fonte