Kartografi dengan TileMill

tilemill logo

TileMill adalah aplikasi untuk mendesain dengan rinci yang akan menghasilkan peta-peta yang indah. Hal ini tidak dimaksudkan untuk mengedit data atau melakukan analisis, melainkan untuk kartografi. Dengan TileMill Anda menggunakan:

  • data (ini bisa menjadi database OpenStreetMap Anda, atau data shapefile)
  • simbol (Anda dapat menggunakan simbol yang tersedia atau desain sendiri)

TileMill menyediakan sebuah platform dimana Anda dapat mendesain data Anda dengan cara cara yang elegan dan mengaplikasikan simbol yang Anda desain sendiri. Kemudian Anda dapat mengeksport peta Anda berupa gambar atau dalam format MBTiles, yang dapat di host ke dalam MapBox dan ditempatkan di dalam situs Anda sebagai peta interaktif.

Pada bab ini kita akan menjalankan:

  1. Menginstal TileMill
  2. Mengeksplor TileMill (Peta, Legenda, Teaser, CartoCSS)
  3. Menambahkan Data (Shapefile dan Database OSM) (Mengedit Data OSM dengan Plugin JOSM)
  4. Mendesain dengan CartoCSS (Mendesain Garis, Poligon, Titik, Tingkat Perbesaran, Variabel Warna, Komentar)
  5. Membuat Legenda
  6. Mengeksport Peta (Gambar PNG dan MBTiles)

demo map

Instalasi TileMill

Kita akan mendemonstrasikan bagaimana menginstal TileMill di Windows. Anda dapat mendownload untuk sistem operasi yang lain di http://mapbox.com/tilemill/.

tilemill setup

  • Jalankan instaler untuk mengatur TileMill di dalam komputer Anda. Pilihan pengaturan standar dalam wizard instalasi sudah cukup bagus.

  • Setelah TieMill terinstal pergilah ke Menu Start Anda dan klik “Start TileMill”.

start tilemill

  • Ini akan memuat tab proyek aplikasi. TileMill datang dengan beberapa contoh projek yang dapat Anda gunakan untuk memulai.

sample projects

Eksplorasi TileMill

Mari kita lihat salah satu contoh proyek untuk mendapatkan ide dari fitur- TileMill dan apa yang bisa kita lakukan. Buka proyek contoh bernama “Geography Class”. Ini membutuhkan waktu sekitar 10-20 detik untuk menampilkan petanya.

tilemill interface

Perhatikan elemen kunci pada TileMill:

Peta

Jendela peta menampilkan apakah peta Anda terlihat sesuai dengan desain yang Anda inginkan. Ini akan memperbarui dengan sendirinya ketika Anda melakukan perubahan datan dan desain di dalam proyek Anda. Anda harus klik tombol “save” untuk setiap melakukan perubahan untuk melihat hasil dari perubahan tersebut. Biasanya ini membutuhkan waktu untuk merender semua data OSM dan lainnya Anda mungkin melihat grid kosong pada layar untuk beberapa menit.

Legenda

Anda dapat membuat sebuah legenda di dalam peta Anda menggunakan HTML. Untuk melihat dan mengedit HTML digunakan untuk membuat legenda, klik pada tombol di sebelah kiri bawah berbentuk seperti tangan. Gunakan proyek sebelumnya, seperti Openstreetmap DC, untuk mendapatkan ide tentang bagaimana bentuk legenda sesuai dengan keinginan Anda.

hand button

Teaser

Teaser, mendefinisikan pop-up atau informasi yang menunjukkan ketika Anda meng-scroll atau mengklik pada bagian fitur peta, dibuat dengan HTML seperti legenda. Pada peta ini teaser membuat bendera-bendera yang muncul sesuai dengan negara yang dipilih oleh pengguna.

CartoCSS

Ini adalah bagian terpenting dari TileMill dalam mendesain peta. Setiap proyek TileMill memiliki sejumlah file seperti menggambarkan cara data peta ini didesain. Bahasa yang digunakan bernama CartoCSS, karena ini hampir sama dengan CSS tetapi lebih khusus didesain untuk mendesain peta. Kita akan melihat lebih dekat pada CartoCSS nanti di bab ini, tetapi untuk sekarang kita lihat pada tiga file yang digunakan untuk mendesain peta “Geography Class”. File pertama, stye.mss berisi kode dasar untuk mendesain peta, mendefinisikan warna badan air dan garis terluar dataran. label.mss mendeskripsikan penamaan nama negara yang akan ditampilkan. Hal ini termasuk informasi di bagian depan, ukuran teks, dan lainnya. Ini juga mengindikasikan bahwa ketika pengguna memperkecil terlalu jauh, peta harus menampilkan singkatan negara bukan nama lengkap mereka. Terakhir, rainbow.mss mendeskripsikan bagaimana setiap negara harus berwarna. Pada file ini, hampir setiap negara secara manual diberi sebuah warna pada peta tersebut.

Jangan ragu untuk bermain-main dengan contoh proyek ini untuk melihat bagaimana perbedaan fitur tersebut bekerja. Kapanpun Anda mengubah file CartoCSS Anda dapat memuat petanya dengan mengklik “Save”. Ketika peta memuat akan menggabungkan perubahan peta Anda ke dalam desain yang sudah dibuat. TileMill cukup cerdas, dan jika Anda membuat kesalahan pada CSS itu akan mengingatkan Anda bahwa terdapat sebuah kesalahan ketika Anda mencoba untuk menyimpannya.

Jika Anda ingin mengubah pengaturan proyek, klik simbol kunci pas di pojok kanan atas. Proyek Geography Class hanya membiarkan Anda memperbesar sekitar peta. Jika Anda memasukkan pengaturan Anda dapat mengatur tingkat perbesaran lebih jauh. Cobalah menggesernya dari 0 ke 8 ke 0 ke 12. Ini akan memungkinkan Anda untuk memperbesar lebih lanjut pada peta.

zoom control

Menambahkan Data

Proyek ini sudah memiliki beberapa layer, yang Anda dapat lihat dengan mengklik tombol “Layers” di pojok kiri bawah.

tilemill layers

Daftar ini menampilkan semua layer di proyek Anda. Simbol di sebelah kiri setiap nama layer mengindikasikan apakah layer titik, garis, atau poligon. Di sebelah kanan setiap nama layer adalah tombol dimana Anda dapat melihat layer data atau mengedit pengaturan.

Menambahkan Layer Shapefile Baru

  • Tambahkan layer shapefile baru ke peta. Klik “Add Layer”. tilemill add layer

  • ID adalah nama yang ingin Anda beri untuk layer Anda. Layer ini dapat diberi nama apa pun sesuai keinginan Anda, tetapi hanya dapat dituliskan huruf, angka, tanda hubung dan garis bawah, dan layer ini tidak boleh diberikan nama yang sama dengan layer lain dalam proyek Anda.

    Anda dapat mengaplikasikan sejemulah kelaske layer Anda . Sebuah kelas dapat membantu Anda mengdentifikasi layer ketika mendesain CSS. Untuk contoh, jika Anda memiliki layer yang semuanya berisi poligon air, Anda dapat memberi nama setiap layer dengan kelas “air”. Kemudian Anda dapat menggunakan nama kelas ini untuk mendesain mereka dengan mudah pada waktu bersamaan di CSS Anda.

    Sumber data adalah file yang Anda memuat sebagai layer. Ini dapat menjadi sebuah CSV, shapefile, GeoJSON, KML, atau GeoTIFF. Sebagai contoh, kita menggunakan shapefile yang berisi poligon suatu wilayah di negara Georgia. Field ini harus disediakan ketika membuat sebuah layer baru.

    SRS adalah Sistem Referensi Spasial pada data Anda. Biasanya TileMill dapat secara otomatis mendeteksi SRS yang benar.

  • Ketika Anda telah menyelsaikan dengan pilihan ini, klik “Save” untuk menambahkan layer baru ke proyek. Jika Anda mengikuti bersama, klik “Save & Style”. Ini akan secara otomatis membuat desain dasar untuk layer baru.

  • Pada tab layer carilah layer baru Anda dan klik tombol “Zoom to extent”

zoom to extent

  • Ini akan melakukan perbesaran ke layer baru Anda. Jika Anda memilih “Save & Style” ini akan berisi dengan beberapa desain dasar.

georgia basic styling

  • Perhatikan bahwa layer baru akan ditampilkan di atas semua layer lainnya. Jika Anda menginginkannya, misalnya, untuk menampilkan di bawah label, Anda dapat mengambil simbol di sebelahnya pada tab layer, dan menggesernya di bawah layer country-name. Ingatlah bahwa Anda harus menyimpan proyek Anda sebelum peta diperbarui.

Menambah Database OSM Anda

Sekarang mari kita lihat bagaimana cara menambahkan database PostGIS yang kita isi dengan data OpenStreetMap di Bab 1 pada tutorial ini.

  • Pergilah ke tab Layers dan klik “Add Layer”.

  • Klik pada tombol “PostGIS”

    Hal ini hampir sama caranya ketika kita menambahkan layer shapefile di atas. Perbedaannya adalah kita harus memberikan parameter koneksi ke database PostGIS kita.

db connection parameters

  • Di sebelah “Connection”, masukan data berikut ini:

    host=localhost dbname=osm user=postgres password=my_password

    Ganti my_password dengan kata sandi Anda yang sebenarnya

  • Di sebelah “Table or subquery”, masukan: planet_osm_roads Perhatikan bahwa Anda juga dapat memasukkan

    planet_osm_point, planet_osm_line, or planet_osm_polygon.

  • Terakhir, Anda harus mengubah SRS ke WGS 84.

  • Klik pada “Save & Style” dan layer baru Anda akan ditambahkan ke proyek, bersama dengan beberapa desain dasar. Perbesar ke layer sejauh terlihat tampilannya.

layer extent

Plugin JOSM

TileMill memiliki sebuah plugin JOSM dimana dapat digunakan untuk memulai dan memuat data OpenStreetMap untuk daerah yang Anda sedang lihat. Ini dapat berguna jika Anda menggunakan data OSM dan Anda melihat kesalahan yang Anda ingin perbaiki ketika Anda mendesain peta Anda. Anda boleh melewati bagian ini jika Anda tidak berpikir Anda membutuhkannya, tetapi disini kita akan mendemonstrasikan bagaimana mengaktifkan plugin ini:

  • Pergilah ke tab Plugin dan Install JOSM Editor.

josm plugin

  • Buka JOSM. Perhatikan bahwa Anda harus memiliki fitur Remote Control yang aktif di pengaturan JOSM.

  • Di TileMill, arahkan ke daerah yang Anda ingin edit. Klik “Edit in JOSM.

edit in josm

  • JOSM akan memulai mendownload data OpenStreetMap untuk daerah yang Anda lihat di TileMill. Anda dapat membuat editan Anda ke data OSM dan mengupload perubahan Anda ke server.

Perhatikan bahwa editan yang Anda buat tidak akan muncul di TileMill, karena Anda telah mengedit database OSM utama. Anda perlu memperbarui data yang Anda gunakan di TileMill untuk menggabungkan perbuahan terbaru ke OpenStreetMap.

Mendesain dengan CartoCSS

Sekarang saatnya untuk bagian yang menyenangkan, mendesain peta kita! Seperti yang disebutkan sebelumnya, TileMill menggunakan sebuah bahasa yang bernama CartoCSS untuk mendesain data peta. Jika Anda tidak asing dengan CSS, CartoCSS akan menjadi tidak asing untuk Anda. Jika Anda asing dengan CSS, ini akan cukup dimengerti nantinya.

Dengan TileMill Anda diizinkan untuk mendesain tipe layer yang berbeda dengan cara yang berbeda. Untuk Layer Garis Anda dapat mendesain garis dan label, membuat sebuah pola untuk garis, menambahkan penanda, dan menambahkan sebuah perisai, seperti ketika Anda ingin memasukkan angka di dalam jalan. Untuk Layer Poligon Anda dapat mendesain poligon dan label, membuat sebuah pola di dalam poligon atau di dalam garis terluar dan menambahkan sebuah penanda. Untuk Layer Titik Anda dapat mendesain titik dan label, menambahkan perisai atau penanda.

Perhatikan bahwa ada file yang berbeda dalam proyek Geography Class. Membuat beberapa file hanya sebuah masalah kenyamanan, karena mereka semua dikompilasi ke dalam stylesheet yang sama pada akhirnya. Tetapi ini adalah ide yang baik untuk menyimpan informasi desain tertentu secara bersamaan - sebagai contoh, semua label dalam satu file, dan sebagainya.

Mendesain Garis

Mari memulai dengan mendesain garis. Ketika kita telah menambahkan layer planet_osm_roads dari database PostGIS kita, TileMill secara otomatis dibuat beberapa desain dasar di bawah file style.mss.

#planetosmroads {
 line-width:1;
 line-color:#168;
}

Kode ini cukup sederhana. #planetosmroads dikenal sebagai penyeleksi. Dalam hal ini, kita katakan, “pilih semuanya dengan ID planetosmroads dan menerapkan desain berikut”. Setelah kita telah menggunakan penyeleksi ini untuk mendefinisikan desain yang kita inginkan, kita menerapkan beberapa desain dasar. line-width:1; menunjukkan bahwa garis-garis harus menjadi satu piksel yang tebal. line-color:\#168; menunjukkan bahwa garis-garis harus menjadi warna kebiruan. Warna didefinisikan menggunakan heksa, dan mungkin dalam format #xxx atau #xxxxxx.

Catatan bahwa jika Anda menentukan desain yang sama untuk sebuah layer yang lebih dari sekali, desain terakhir yang Anda tentukan itu yang akan digunakan. Jadi:

#planetosmroads {
 line-width:1;
 line-color:#168;
}

#planetosmroads {
 line-width:1;
 line-color:#861;
}

akan menyebabkan layer yang akan diwarnai dengan #861. Pernyataan pertama akan diabaikan.

Ada banyak pernyataan yang dapat Anda buat untuk garis. Berikut contohnya:

#planetosmroads {
 // sets the line width to 0.5 pixels
 line-width: 0.5;
 // sets the line color to #1a6e8a
 line-color: #1a6e8a;
 // makes the line 80% opaque (20% transparent)
 line-opacity: 0.8;
 // lines will be rounded at the end
 line-join: round;
 // lines will be a series of dashes; in this
 // case, the dashes will go 6px line, 2px empty,
 // 2px line, 2px empty, and then repeat
 line-dasharray: 6,2,2,2;
}

Mendesain Poligon

Mendesain poligon hampir sama dengan mendesain garis. Catatan bahwa Anda dapat menggunakan semua atribut yang sama yang Anda gunakan untuk garis, selain atribut baru. Hal ini karena ketika sebuah poligon tergambar, memiliki karakteristik untuk desain di dalam poligon, dan untuk garis disekitarnya. Dengan demikian, setiap atribut garis disediakan untuk poligon yang akan diterapkan digarisnya. Mari kita lihat contohnya:

#georgia_regions {
 line-color:#000;
 line-dasharray: 6,6;
 line-width:0.5;
 polygon-opacity:0.5;
 polygon-fill:#ae8;
}

Ini menyebabkan layer terlihat seperti ini: georgia 1

Catatan bahwa atribut garis mempengaruhi garis terluar poligon. Kita menggunakan polygon-fill untuk mempengaruhi warna di dalam poligon, dan polygon-opacity untuk mengubah transparansinya.

Mendesain Titik

Untuk layer titik, Anda akan sering menggunakan simbol Anda sendiri untuk mewakili titik. Hal ini dapat dengan mudah dilakukan dengan menyediakan path simbol Anda ke dalam file CartoCSS. Misalnya:

#cities {
 point-file: url(icons/star-10.png);
}

Anda bisa mendapatkan daftar lengkap atribut desain dengan mengklik pada tombol tanda kurung di kiri bawah pada TileMill.

parentheses

Penjelasan tentang Tiles

Mari kita luangkan waktu untuk memahami cara bahwa peta slippy bekerja, lebih memahami apa yang dimaksud dengan tingkat perbesaran. Anda mungkin telah memperhatikan di pojok kiri atas peta adalah tombol yang berfungsi untuk memperbesar dan memperkecil peta, dan tulisan “Zoom” dengan angka di sebelahnya.

zoom buttons

Ini menunjukkan tingkat perbesaran peta. Tingkat perbesaran berkisar dari 0 hingga 22, tergantung pada pengaturan proyek Anda. Semakin tinggi tingkat perbesarannya, semakin kecil peta yang terlihat. Jika Anda memperbesar ke tingkat 0, Anda akan melihat seluruh dunia.

Seperti yang telah disebutkan pada pendahuluan, slippy maps bekerja karena mereka membuat banyak tiles gambar kecil pada tingkat perbesaran yang berbeda. Setiap tiles adalah sebuah gambar dengan 256x256 piksel. Pada tingkat perbesaran 0, TileMill hanya menghasilkan satu tile, dan seluruh dunia berada pada satu tile. Pada tingkat perbesaran 1, satu tile dibagi menjadi 4 tile. Pada tingkat perbesaran 2, masing-masing dari 4 tile tersebut dibagi menjadi empat, menghasilkan 16 tiles. Pola ini berlanjut sebagai tingkat perbesaran yang Anda inginkan.

Tingkat Perbesaran 0 - Satu Tile one tile

Tingkat Perbesaran 1 - Empat Tiles four tiles

Tingkat perbesaran penting untuk dipahami pada saat mendesain, karena seperti yang akan kita lihat pada sesi selanjutnya, biasanya Anda ingin desain yang berbeda untuk menampilkan pada tingkat perbesaran yang berbeda.

Penyeleksi Kompleks

Kita membahas mengenai penyeleksi sebelumnya, tetapi sekarang kita akan mempelajari lebih lanjut bagaimana menggunakan mereka pada peta kita. Kita sudah melihat bagaimana kita dapat menggunakan layer ID untuk memilih layer yang lebih spesifik dan menerapkan pernyataan desain:

#cities { point-file: url(icons/star-10.png); }

Bagaimana jika kita hanya ingin memilih beberapa fitur di layer tersebut, berdasarkan data? Kita dapat mengubah penyeleksi kita dan diterapkan dalam argumen menggunakan tabel data kita. Berikut ini akan menampilkan simbol bintang untuk kota di Uruguay:

#cities[SOV0NAME='Uruguay'] {
 point-file: url(icons/star-10.png);
}

Hal yang sama dapat dilakukan untuk setiap kolom pada tabel atribut dari layer. File labels.mss sudah menggunakan tipe penyeleksi ini untuk mendesain kota:

#cities[ADM0CAP=1][zoom\>3] {
 ...
}

Penyeleksi ini menambahkan elemen lainnya yaitu tingkat perbesaran. Menggunakan tipe penyeleksi ini, kita dapat dengan mudah mengatur TileMill pada tingkat perbesaran sesuai dengan desain yang kita inginkan pada saat menampilkan. Pada contoh di atas, setiap desain di dalam tanda kurung hanya akan ditampilakan ketika pengguna memperbesar ke tingkat perbesaran 3. Inilah sebabnya megapa nama kota tidak ditampilkan pada peta ketika Anda memperkecil semuanya.

Tingkat Perbesaran 5 zoom five

Tingkat Perbesaran 3 zoom three

Anda akan melihat jenis penyeleksi lain di desain rainbow.mss yang terlihat seperti ini:

#country::land-glow-outer[zoom>1] {
 line-color:#000;
 line-width:5;
 line-opacity:0.1;
 line-join:round;
}

Layer tersebut akan mempengaruhi #country, dan ini termasuk pengaturan yang berfungsi hanya di atas tingkat perbesaran 1. Tetapi mengapa tidak memiliki ::land-glow-outer?

Pertama, ingatlah bahwa kode berikut akan mengakibatkan pernyataan pertama diabaikan:

#country {
 line-color: #000;
 line-width: 6;
}

#country {
 line-color: #999;
 line-width: 3;
}

Ini akan mengakibatkan garis-garis yang tepat lebarnya menjadi 3 piksel dan berwarna #999. Tetapi biasanya Anda ingin membuat layer yang sama beberapa kali. Misalnya jika Anda ingin menggambar sebuah garis yang memiliki garis terluar atau cahaya, Anda ingin TileMill pertama kali menggambar garis tebal, dan kemudian menggambar garis tipus di atasnya. Untuk melakukan ini, Anda memilih layer dengan lampiran. Ini adalah cara untuk Anda membuat sebuah layer menggunakan beberapa desain.

#country::outline {
 line-color: #000;
 line-width: 6;
}

#country::fill {
 line-color: #999;
 line-width: 3;
}

Pada contoh ini, kita menggunakan lampiran ::outline dan ::fill untuk membuat salinan dari layer yang sama, dan membuatnya ganda. Oleh karena itu, TileMill akan menggambar layer pertama dengan warna #000 dan ketebalan 6 piksel, dan kemudian menggambarnya lagi dengan warna #999 dan ketebalan 3 piksel. Di file rainbow.mss, karakteristik ini digunakan untuk membuat cahaya terluar dan dalam untuk masing-masing negara.

Untuk informasi yang lebih lanjut tentang penyeleksi klik pada tab “Intro” pada Help.

Variabel Warna

Variabel adalah kemudahan yang ditawarkan oleh CSS yang memungkinkan kita untuk mnyimpan semua skema warna dalam satu tempat. Ketika menulis CartoCSS, Anda akan sering menemukan penggunaan kembali skema warna yang sama dan untuk layer dan fitur yang berbeda. Jika Anda ingin menyesuaikan warna ini nanti, Anda harus melalui dan mengubah setiap nilai. Sebaliknya, Anda dapat menggunakan variabel yang mewakili warna tertentu, dan kemudian menggunakan variabel ini dalam CartoCSS.

Anda akan melihat ini di atas file rainbow.mss:

@white: #F0F8FF; /* blue-tinted, for Antarctica */
@red: #fdaf6b;
@orange: #fdc663;
@yellow: #fae364;
@green: #d3e46f;
@turquoise: #aadb78;
@blue: #a3cec5;
@purple: #ceb5cf;
@pink: #f3c1d3;
@f00: #f00;

Ini adalah definisi variabel. Setiap kali Anda menggunakan variabel yang didefinisikan disini (seperti @green atau @pink) mereka akan diganti dengan nilai warna yang telah didefinisikan.

Komentar

Anda dapat menambah komentar di dalam file CartoCSS Anda. Setiap teks yang ditempatkan diantara /* dan /* akan diabaikan oleh TileMill. Juga, kapan pun Anda menggunakan dua garis miring ke depan, sisa garis akan dianggap sebuah komentar. Contoh:

/* This is
a comment \*
// this is a comment too!

Membuat Legenda

  • Sangat mudah untuk membuat sebuah legenda menggunakan HTML dengan TileMill. Klik pada simbol tangan di pojok kanan bawah untuk membuka jendela Legenda.

hand button

  • Pada tab “Legenda” Anda akan melihat kode HTML yang membentuk bar legenda di pojok kanan bawah peta. Jika Anda merasa nyaman untuk menulis kode HTML, Anda dapat dengan mudah membuat legenda ini sendiri.

sample legend

Mengeksport Peta Anda

Setelah Anda mendesain peta yang indah menggunakan TileMill, Anda pasti ingin mengeksportnya untuk dilihat. TileMill dilengkapi dengan beberapa pilihan untuk mengeksport, seperti yang dapat Anda lihat ketika Anda klik pada tombol “Export”.

Export File Gambar PNG

export button

  • Untuk mengeksport file gambar PNG, klik pada “PNG”.
  • Pilih daerah yang ingin Anda eksport dengan menahan tombol SHIFT pada keyboard Anda dan menggambar daerahnya di peta. Anda dapat memperbesar jika Anda menginginkannya.

shift and drag

  • Pada panel di sebelah kanan, Anda dapat mengubah nama file gambar, dan dimensi dalam piksel gambar.

png dimensions

  • Ketika Anda sudah selesai klik “Export”.
  • Me-render gambar akan diproses dan apabila sudah selesai Anda dapat menyimpan gambar dengan mengklik tombol “Save”.

save png

Eksport MBTiles

MBTiles adalah sebuah format untuk menyimpan tiles gambar - semua gambar 256x256 membentuk peta slippy.

  • Untuk mengeksport tiles, klik “MBTiles” pada menu Export.

  • Sekali lagi Anda dapat memilih area yang Anda ingin eksport dengan menahan SHIFT dan menggeser kotak tersebut di atas peta.

  • Anda juga ingin menyesuaikan pengaturan perbesaran sehingga file Anda tidak terlihat terlalu besar. Perhatikan bahwa setiap tingkat perbesaran empat kali sebanyak tiles pada tingkat perbesaran sebelumnya, sehingga jumlah tiles gambar bertambah secara eksponensial. Ini akan menjadi yang terbaik jika Anda dapat menyimpan file MBTiles Anda dibawah 50MB untuk saat ini.

zoom control

Jika Anda memiliki akun MapBox (apa yang kita buat di bab sebelumnya), Anda dapat mengupload file MBTiles sebagai layer peta yang akan ditampilkan di dalam situs.

Ringkasan

Pada bab ini kita telah mempelajari bagaimana cara menggunakan TileMill, aplikasi untuk menerapkan kartografi kustom pada peta kita. Jika Anda ingin mempelajari lebih lanjut, MapBox telah mengembangkan dokumentasi yang lebih luas dalam menggunakan TileMill, dimana Anda dapat mengeksplornya disini.

CC0
Official HOT OSM learning materials