Arsip Tag: Leaflet

756 Layer WMTS Landsat NASA

Bagi Anda yang mengerti WebGIS, tentu tahu tempe dengan Leaflet JS. Nah, sekarang sudah saya buatkan sedikit snippet untuk mengambil semua 756 Layer (bahkan sebahagian besar update tiap hari dan bisa diakses historynya). Silahkan lihat contekannya dari file Ms. Excel berikut:

Untuk tiap-tiap layer tersebut sudah saya bantu dikit JavaScript nya, sehingga nanti tinggal di tempel setelah deklarasi variabel map nya leaflet

```

var Agricultural_Lands_Croplands_2000 = L.tileLayer('https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/Agricultural_Lands_Croplands_2000/default/GoogleMapsCompatible_Level7/{z}/{y}/{x}.png'
,{attribution: '< a href="\'https :/ /gibs.earthdata.nasa.gov/colormaps/v1.3/Agricultural_Lands_Croplands_2000.xml\'">NASA'
,maxZoom:7
}).addTo(map);

```
var Agricultural_Lands_Pastures_2000 = L.tileLayer('https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/Agricultural_Lands_Pastures_2000/default/GoogleMapsCompatible_Level7/{z}/{y}/{x}.png'
,{attribution: '< a href="\'https: / /gibs.earthdata.nasa.gov/colormaps/v1.3/Agricultural_Lands_Pastures_2000.xml\'">NASA'
,maxZoom:7
});

Waduh …WordPress merusak kode saya …

Tapi, seharusnya kalau Anda sudah semester 5 ke atas sudah tempe banget dengan kode di atas.

Silahkan Anda coba satu persatu, masukin jadi tile layer Anda di Leaflet.

Caranya bisa dengan nama layer ditambahkan titik addTo(map)

contoh:

Agricultural_Lands_Pastures_2000.addTo(map)

Tentu ini diasumsikan anda membuat nama variabel map di Leaflet Anda sebagai map.

Namun, kalau ingin membuat pakai radio button, nanti pengguna bisa memilih milih basemap, boleh berikut contekannya:

    var baseMaps = {
"Croplands (Global Agricultural Lands, 2000)":Agricultural_Lands_Croplands_2000

//...
//tambahkan lagi semua layernya ciat ciat, dengan format: koma nama layer HTML nya, lalu titik dua, lalu namavariabel javascriptnya
//...

, "Tulisan" : namaVariableTileLayerNya
};

L.control.layers(baseMaps,checkboxedLayers).addTo(map);        

Jika ingin pake cebok, sehingga ngga bau, pengguna bisa centang ceklis nya, bisa menggunakan variabel checkboxedLayers … dua-dua nya (baseMaps dan checkboxedLayers) mesti ada dulu …

Silahkan pamerkan ke teman Anda … dijamin lebih bingung daripada Anda bingung baca ampe sini … hehehehehe

BTW, ngga pake skrinsyot berarti PALESU ™

Berikut skrinsot saya ….

Eh … BTW eniwey baswey, setelah melihat zoom nya hanya ampe segitu, dan dibandingkan satelit mata-mata DG, mungkin Anda terbersit pikiran … kok jelek banget hasil kerjaan NASA ya? Ya ngga lah .. kan resolusi yang dikasih ke kita … dan itu juga diambil dari satelit yang jauh orbitnya … bukan satelit mata-mata

Iklan

Jekyll, Leaflet, TurfJS Presentation

Sila dibaca slide dari Malcolm Meyer pada NorthEast Ohio GIS Symposium, 2016-08-25, tentang penggunaan LeafletJS (plus jQuery) + Leaflet Chroropleth plugin), TurfJS untuk JavaScript GIS, dan Jekyll untuk template HTMLnya, https://getbounds.com/blog/neohio-gis-2016-leaflet-jekyll-turfjs/ lalu download sample code nya di Github, https://github.com/ovrdc/neohio-gis-2016-leaflet-jekyll-turf

Leaflet MBTiles

Iván Sánchez Ortega menulis plugin yang keren agar Leaflet dapat menggunakan MBTiles layer. MBTiles adalah sebuah SQLite yang berisi gambar masing-masing ubin. Kekurangannya adalah ukurannya yang besar. Saya coba untuk Pekanbaru lv 1-19 sekitar 1.4 Giga. Source-code dari repo Ivan juga seolah olah besar karena ada berkas .mbtiles demonya yang berukuran 9.4MB.

Sayangnya, sepertinya karena ukuran mbtiles yang besar, tidak mampu diload oleh Firefox saya, berikut pesan kesalahannya.

2017-12-11_17-11-58.jpg

 

https://gitlab.com/IvanSanchez/Leaflet.TileLayer.MBTiles

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.