Arsip Tag: Leaflet

Great Britain War Office – Geographical Section, General Staff No. 4184

http://suskatilesvr.000webhostapp.com/gsgs4184.html

Peta maret tahun 1945, berarti Indonesia masih belum merdeka. Banda Aceh dulu namanya Koetaradja, ya?

Iklan

U.S. Army Map Service 1943 Sumatra, Series T511, 1:250,000, sHEET30 pAKANBARU

Buat manusia, sila lihat demonya saja langsung:

http://suskatilesvr.000webhostapp.com/txu-oclc-6606499-30/

Buat yang ngga normal, boleh lanjut … tapi sakit kepala tanggung sendiri …

*Prelude*

Sebenarnya lagi sakit (hati) karena ternyata ndak banyak hosting yang dukung mapscript apalagi mapserver. Terpaksa akhirnya generet ubin sendiri lalu diupload ke server, lalu nanti dikonsumsi orang lain secara statis.

Nah, peta PAKANBARU (sesuai judul) yang awalnya 3,7Mb sekarang menjadi 56Mb. Kenapa? karena peta tersebut terpaksa dipotong-potong agar menjadi ubin. Peta Pakanbaru tersebut saya potong untuk zoom level 10 sampai dengan zoom level 13 saja, dan itu sudah 50MB, hampir 20 kali lipat dari ukuran awalnya.

Kenapa peta perlu di fotong fotong jadi ubin?

Agar peta dapat dikonsumsi oleh hp, laptop, peta yang “besar” harus dibuatnkan bertentuk WEBGIS. Nah, agar tampil gambar tersebut di web, tidak mungkin gambar yang besar tersebut dikirim ke client, karena selain menghabiskan bandwidth user, bisa saja tidak mampu ditampilkan oleh user kita nantinya (karena kegedean).

Biar gambar peta yang besar tadi bisa masuk ke henpon, eh smartphone, maka peta tersebut dipotong-potong dulu menjadi ubin atau tile, lalu dengan javascript ditampilkan kembali seolah-olah mereka menyatu. Dengan metode ini, webgis/peta dapat dinikmati dengan cepat dan ringan dan interaktif.

Ubin ? Tile? Sule?

Ngga … bukan artis … istilah ubin adalah versi bahasa untuk tile, yaitu gambar kecil kecil yang disusun seperti menyusun marmer ubin di lantai. Kenapa dibilang ubin? karena berbentuk petak petak kecil-kecil, biasanya 256×256 pixel.

Kenapa gambar kecil? karena kita hanya ingin menampilkan potongan peta yang diperlukan oleh client saja. Untuk apa menampilkan seluruh peta kalau toh user tidak butuh.

Jadi, bagaimana membuat ubin?

Ubin bisa dihasilkan otomatis oleh MapServer atau GeoServer. Namun, mencari server tempat memberikan layanan ini sangat susah. Ada sih, tapi biayanya sekitar 100USD per bulan. Sangat tidak ekonomis. Cara lain adalah dengan setup VPS sendiri lalu install GeoServer atau MapServer di sana.

Padahal, hosting yang banyak adalah shared-hosting PHP yang biasanya untuk menghosting blog (WordPress) atau sistem informasi lain yang masih menggunakan ‘bahasa’ eh priprosesor PHP.

PHP dukung menghasilkan ubin sendiri, tapi harus menggunakan extensi php-mapscript. Nah, hampir seluruh server berbayar (murah, ekonomis) yang saya check, tidak memberikan layanan ini).

Kalaulah hostingan mendukung mapscript, tentu yang perlu saya unggah hanyalah peta awal, yang hanya 3 megaan, lalu world filenya, lalu aux nya, lalu sebuah file map. Ndak kan nyampai 4 mega byte, dan bisa sampai zoom unlimited. Namun, ubin dengan cara ini akan dihasilkan on-the-fly, secara otomatis, secara ‘dinamis’ oleh server, sehingga akan menghabiskan CPU dan memory.

Solusi? Buat dulu ubin dari rumah, lalu upload semua ubin ke server hosting pakai FTP

Jadi, kalau ubin kita seed dahulu, tentu web-server (hosting) nantinya lebih ringan, karena hanya tinggal memberikan file gambar ubinnya.

Kalau pakai MapServer, kelebihannya semua ubin dihasilkan otomatis saat hanya dibutuhkan oleh client saja. Ukuran penyimpanan lebih hemat, namun SANGAT BOROS CPU DAN MEMORY. Makanya server hosting biasanya tidak mau memberikan layanan ini …

makanya di sini saya sakit

cerita baiknya, isyunya salah seorang mahasiswa saya mau meminjamkan resource VPS nya untuk uji ketahanan server ubinnya.

Mudah-mudahan jadi …

Alternatif lain kemaren adalah menggunakan layanan DDNS, lalu men-setting modem internet di rumah agar bisa memberikan port-forwarding ke ‘server’ eh laptop lama gw yang bertidan sebagai tile server. Namun, ini akan mengganggu sedikit bandwidth upload indihome rumah saya, sehingga kalau ada mahasiswa yang main game Mobile Legend di rumah bisa agak terganggu. Donlot yutub ndak terganggu, karena hanya menggunakan bandwidth download.

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

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