Membuat ubin TileMill leaflet dengan urutan yang salah

14

Saya bingung, dan cukup banyak pencarian ternyata tidak membantu.

Saya berada di langkah pertama dari apa yang akhirnya akan menjadi peta dengan tiga layer raster dan tiga layer marker (dengan kontrol untuk beralih antara raster dan data terkait, dengan popup / tooltips untuk data), tetapi saya tidak bisa dapatkan ubin Tilemill untuk ditampilkan dengan benar. (Saya membuat raster di QGIS, menjalankannya melalui GDAL untuk mewarnai dan memproyeksikannya kembali, dan kemudian memasukkannya ke TileMill.)

Intinya: masukkan deskripsi gambar di sini Itu ada di Chrome. Ini Safari:

Dan inilah kodenya, yang terlihat sangat tidak berbahaya bagi saya (saya sudah berkomentar semuanya kecuali ubin pada saat ini, jadi hanya itu yang saya sertakan):

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

Adakah yang pernah mengalami masalah ini? Jika demikian, bagaimana Anda mengatasinya? Saya ingin memulai proses pembuatan peta ini (yang tentu saja saya maksudkan "mengungkap masalah berikutnya untuk dipecahkan").

Diedit untuk menambahkan: Saya mencoba mengekspor kembali file MBTiles baru, mengunggahnya sebagai data baru, dan membuat proyek Mapbox baru dari data itu. Tidak ada dadu. Langkah selanjutnya dalam mengisolasi masalah ini adalah dengan mengatur file MBTiles di server, melewatkan Mapbox, tetapi itu tampaknya lebih mungkin menimbulkan masalah daripada memperbaikinya.

— Dani
sumber

25

Anda lupa menambahkan Leaflet CSS:

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

Juga ada banyak kesalahan ketik dalam kode Anda: misalnya, dalam html, body{}baris stylesheet. Periksa untuk mereka sebelum digunakan untuk produksi.

— Ilja Zverev
sumber

1

Anda memang benar, dan itu berhasil! Saya hanya tahu itu sesuatu yang bodoh seperti itu. Terima kasih banyak atas bantuannya !!

— Dani

0

Saya tahu pertanyaan ini sudah lama dan sudah diselesaikan, tetapi saya memiliki solusi lain untuk siapa saja yang saat ini memiliki masalah yang sama. Jika Anda telah dimuat di CSS Anda dan masih tidak menampilkan ubin dengan benar, Anda perlu menyertakan tms: truedalam Anda TileLayer pilihan.

Contoh kode saya:

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

Semoga ini bisa membantu orang lain dengan masalah yang sama.

— bijx
sumber