Folleto que representa los mosaicos de TileMill en el orden incorrecto

15

Estoy perplejo, y muchas búsquedas no han resultado útiles.

Estoy en el primer paso de lo que finalmente será un mapa con tres capas ráster y tres capas de marcadores (con controles para alternar entre los rásteres y sus datos asociados, con ventanas emergentes / información sobre herramientas para los datos), pero no puedo haz que los mosaicos de Tilemill se procesen correctamente. (Creé los rásteres en QGIS, los ejecuté a través de GDAL para colorearlos y volver a proyectarlos, y luego los puse en TileMill).

Esto es: ingrese la descripción de la imagen aquí eso está en Chrome. Esto es Safari:

Y aquí está el código, que me parece bastante inocuo (he comentado todo menos los mosaicos en este punto, así que eso es todo lo que he incluido):

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

¿Alguien ha encontrado este problema? Si es así, ¿cómo lo superaste? Estoy ansioso por comenzar con el resto del proceso de hacer este mapa (con lo cual, por supuesto, me refiero a "descubrir el siguiente problema a resolver").

Editado para agregar: intenté volver a exportar un nuevo archivo MBTiles, cargarlo como nuevos datos y crear un nuevo proyecto Mapbox a partir de esos datos. No dados. El siguiente paso para aislar el problema sería configurar el archivo MBTiles en un servidor, omitiendo Mapbox, pero parece más probable que cree problemas que los solucione.

— Dani
fuente

27

Olvidó agregar el CSS del folleto:

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

También hay numerosos errores tipográficos en su código: por ejemplo, en la html, body{}línea de la hoja de estilo. Verifíquelos antes de implementarlos en producción.

— Ilja Zverev
fuente

1

Tienes toda la razón, ¡y eso se hizo cargo! Solo sabía que era algo estúpido como ese. ¡¡Muchas gracias por tu ayuda!!

— Dani

0

Sé que esta pregunta es antigua y ya se ha resuelto, pero tengo otra solución para cualquiera que actualmente tenga este mismo problema. Si ha cargado su CSS y todavía no muestra los mosaicos correctamente, debe incluirlos tms: trueen su TileLayer opciones de .

Un ejemplo de mi 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 esto ayude a alguien más con el mismo problema.

— bijx
fuente