Renderização de folhetos TileMill na ordem errada

14

Estou perplexo, e muitas pesquisas não resultaram em nada útil.

Estou no primeiro passo do que, em última análise, será um mapa com três camadas raster e três camadas de marcadores (com controles para alternar entre os rasters e seus dados associados, com pop-ups / dicas de ferramentas para os dados), mas não posso obtenha as peças Tilemill para renderizar corretamente. (Criei os rasters no QGIS, executei-os no GDAL para colorir e re-projetá-los e depois os coloquei no TileMill.)

A saber: insira a descrição da imagem aqui isso está no Chrome. Este é o Safari: insira a descrição da imagem aqui

E aqui está o código, que me parece bastante inócuo (já comentei tudo, exceto os blocos neste momento, então é tudo o que incluí):

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

Alguém já encontrou esse problema? Se sim, como você superou isso? Estou ansioso para começar o restante do processo de criação deste mapa (pelo qual, é claro, quero dizer "descobrir o próximo problema a ser resolvido").

Editado para adicionar: tentei reexportar um novo arquivo MBTiles, enviá-lo como novos dados e criar um novo projeto Mapbox a partir desses dados. Sem dados. O próximo passo para isolar o problema seria configurar o arquivo MBTiles em um servidor, ignorando o Mapbox, mas isso parece mais provável de criar problemas do que de corrigi-los.

raster javascript leaflet tilemill browser Dani
fonte

Respostas:

25

Você esqueceu de adicionar o CSS do folheto:

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

Além disso, existem vários erros de digitação no seu código: por exemplo, na html, body{}linha da folha de estilo. Verifique-os antes de implantar na produção.

Ilja Zverev
fonte
1
Você está absolutamente certo, e isso cuidou disso! Eu só sabia que era algo estúpido assim. Muito obrigado pela sua ajuda !!
Dani
0

Sei que essa pergunta é antiga e já foi resolvida, mas tenho outra solução para quem está atualmente com o mesmo problema. Se você carregou seu CSS e ele ainda não está exibindo os blocos corretamente, é necessário incluir tms: truenas opções do TileLayer .

Um exemplo do meu código:

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

Espero que isso ajude alguém com o mesmo problema.

bijx
fonte