Arsip Kategori: Leaflet

Cesium Black Marble TMS

Ubin atau bahasa ocunya tile, kalau di TMS memang dihitung dari kiri bawah, sedangkan kalau slippy dihitung dari kiri atas ke bawah, sehingga, kalau kita ingin menampilkan ubin dari server TMS, hasilnya akan terbalik seperti di bawah ini:

00-cesium-black-marble-terbalik-y-nya

Gambar di atas adalah Indonesia di malam hari, tetapi terbalik Y nya.

Hal ini karena memang tidak sama pola penomoran ubin dari Google yang mengikuti slippy map dan dari layanan TMS.

 

Solusinya di Leaflet adalah dengan menggunakan {-y} di URL ubin kita, tidak default {y}

 

Sayangnya, tidak semua leaflet dukung. Versi saya ternyata sudah lama dan belum dukung. Akibatnya, dia malah merequest berkas ubin -y.png bukan angkanya.

01-leaflet-tidak-mengerti-y

versi saya masih cukup lama …

 

 

02-leaflet-lama-sepertinya-404-cesium

 

Solusinya? Cukup update leaflet Anda …

dan hasilnya sekarang sudah bagus:

03-setelah-di-update-leafletnya-jadi-ok

Peta Tematik Interaktif dengan Leaflet

Kali ini, kita akan mencoba membuat peta interaktif Kota Pekanbaru dengan Leaflet, yang menampilkan jumlah mahasiswa Sistem Informasi Fakultas Sains dan Teknologi, Universitas Islam Negeri Sultan Syarif Kasim Riau.

Untuk membuat peta tematik atau choropleth, maka kita gunakan GeoJSON, agar lebih mudah dalam kodingan.

Peta tematik interaktif ini kita buat berdasarkan contoh yang sudah ada sebelumnya dari Leaflet,

http://leafletjs.com/examples/choropleth-example.html

Kodingan dapat dilihat di gist berikut:

dan tampilannya / demonya dapat dilihat pada web berikut:

http://rawgit.com/kampar/e63b913c22b178ea7e40/raw/6ba9a8b279f3584bf156069a73b49556be514f7e/Leaflet%2520Choropleth%2520Interaktif%2520Pekanbaru.html

peta tematik interaktif demo pekanbaru

 

Leaflet TileLayer ESRI

Pada postingan sebelumnya, kita telah bermain dengan Leaflet sebagai alternatif penggunaan Google Map API. Sekarang, kita coba tambahkan sedikit fitur agar dapat melihat tampilan satelit / rupa bumi, dan tidak hanya “peta jalan” OSM nya Mapbox.

Untuk itu, kita menggunakan L.tileLayer, untuk menambahkan sebuah TileLayer.

Untuk kodingan, sila lihat GIST saya berikut:

Sedangkan tampilan dapat dilihat

http://rawgit.com/kampar/fa5a2515451e0f271b6d/raw/3b585dfaae64676a83888f5db366f02ae63bbc48/L.tileLayer_sample_ESRI_MapboxOSM.html

rawgit 2016-01-31_06-40-34

 

Kalau Anda perhatikan, sangat mudah untuk menambahkan sebuah lapisan ubin baru (tileLayer) pada Leaflet, cukup dengan perintah L.tileLayer

var tileLayer_ESRI_World_Imagery = L.tileLayer(‘

dan untuk menampilkan pilihan di pojok kanan berbentuk radiobutton tersebut, gunakan perintah

//radio button, check box
L.control.layers(baseMaps, overlayMaps).addTo(map);

Saya rasa, jika Anda mahir sedikit bahasa Jawa, eh JavaScript, pastilah mengerti betapa mudahnya menampilkan pilihan peta dasar dengan Leaflet.

 

Bermain dengan Leaflet GeoJSON

Leaflet sangat menjanjikan dan dapat Anda gunakan (dan lebih saya sarankan) untuk menggantikan Google Maps API. Ada banyak alasan untuk tidak lagi menggunakan Google dan beralih menggunakan Leaflet, seperti:

  • Leaflet bisa Anda host untuk LAN/localhost. Google Maps API walaupun bisa juga untuk itu, tetapi “melanggar” term of use (katanya).
  • Leaflet open source.
  • sila lihat webnya Leaflet untuk masih banyak lagi alasan.

Sebenarnya, contoh dari Leaflet sendiri sudah ada untuk GeoJSON, dan dapat Anda pelajari di sini:

http://leafletjs.com/examples/geojson.html

dan POC dapat dilihat di sini:

http://leafletjs.com/examples/geojson-example.html

leaflet denver

Namun, berhubung saya mengajar di Kota Pekanbaru, tentu lebih enak mengajar mahasiswa dengan contoh langsung Kota Pekanbaru, bukannya Denver.

Permasalahan saat mengajarkan GIS dengan sample lokal (Indonesia), adalah kurangnya data / sumber yang dapat digunakan. Untuk itu, saya meng-export sebuah SHP yang saya dapatkan dari saudara di Pekanbaru yang berisi posisi kantor lurah di Pekanbaru. Keakurasian data saya tidak tahu, tapi untuk bermain-main dengan Leaflet: boleh lah.

Untuk dapat mengubah berkas SHP menjadi GeoJSON, Anda cukup menggunakan QGIS. Dari QGIS, layer kantor_lurahan dapat Anda klik kanan lalu pilih simpan sebagai.

qgis-layer-simpan_sebagai

Jangan lupa untuk MENGUBAH CRS menjadi WGS84, karena beberapa berkas SHP yang kita terima dari orang terkadang CRS nya bukan WGS84. Pada kasus saya adalah WGS 84 / UTM Zone 47N, yang satuannya meter, bukan derajat (Latitude, Longitude)

simpan sebagai wgs84

Untuk memudahkan Anda melihat hasil GeoJSON kantor kelurahan tersebut, Anda dapat lihat dari GIST saya di:

PERHATIAN bahwa saya menambahkan

var kantor_lurah_84=

di awal file, karena akan kita akses dengan JavaScript.

Nah, kalau ingin melihat hasilnya, sila bertandang ke sini:

http://rawgit.com/kampar/b7b8afcc6e75fc9d59d1/raw/79f22dafd219159782960a1947ba055f4eacda02/L.geoJSON_sample_pekanbaru.html

leaflet geojson pekanbaru

Source code dapat dilihat di:

 

Nah, dari sourcecode / kodesumber di atas, Anda dapat melihat bahwa SANGAT GAMPANG sekali menambahkan sebuah GeoJSON di Leaflet, yaitu cukup dengan 1 baris perintah:

L.geoJson(kantor_lurah_84,{
onEachFeature: onEachFeature
}).addTo(map);

Eits, apa pula itu onEachFeature? Fungsi itu saya tambahkan agar markernya dapat di klik, dan jika dikilik kilik genit dikit dia, dengan menampilkan pop-up HTML nama kelurahannya. Sila lihat fungsi tersebut untuk mendalaminya.