Arsip Tag: LeafletJS

RBI 1000

#RBI atau #RupaBumiIndonesia memiliki penomoran yang unik, dan dapat dibeli peta resminya dari #BIG. Namun, terkadang RBI 10 000, yaitu peta rupa bumi berskala 1:10,000, sering belum ada di pemerintah daerah tingkat 2 (kabupaten / kota), dan menunggu dibeli dahulu, padahal citra satelit dan peta #GoogleMap sudah dapat diperoleh dengan mudah di Internet, walaupun bukan resmi dari pemerintah.

Nah, untuk memudahkan nantinya menggabungkan peta dengan RBI, ada baiknya pemerintah daerah juga menyiapkan peta yang nantinya gampang digabungkan / di-overlay dengan peta RBI.

Usulan: RBI 5000, RBI 2500, RBI 1000

Di sinilah saya mengusulkan tiga jenis “cakupan peta RBI” berikutnya: RBI 5000, RBI 2500, dan RBI 1000.

Dibilang CAKUPAN / EXTENTS artinya, bukanlah sebuah peta, namun luas dan pembagian batasnya peta dan penomoran petanya saja.

RBI 5000 dan RBI 2500 dan juga RBI 1000 tentunya tidak official, hanya pendekatan versi saya sendiri, mengikuti pola penomoran dan pembagian wilayah RBI yang sudah ada.

Contoh adalah pada gambar di atas, yaitu proposed RBI 1000 untuk daerah di sekitar Kota Pekanbaru. Terlihat RBI 1000 memiliki 11 angka, dengan contoh sebagai berikut:

0816-5225-311

4 angka pertama adalah RBI 250 000, yaitu: 0816
5 angka pertama adalah RBI 100 000, yaitu: 0816-5
6 angka pertama adalah RBI 50 000, yaitu: 0816-52
7 angka pertama adalah RBI 25 000, yaitu: 0816-522
8 angka pertama adalah RBI 10 000, yaitu: 0816-5225

sedangkan – 3 1 1, tiga angka berikutnya, adalah penambahan saya sendiri, sesuai dengan skala yang sering digunakan pada peta, yaitu skala 5000, 2500 dan 1000.

Jadi, dengan memegang sebuah peta RBI 1000, seseorang bisa mengatakan wilayah tersebut ada pada RBI berapa saja pada skala lebih kecil (2500, 5000, 10000, 25000, 50000, 100000, 250000)

Kenapa RBI?

Karena Peta Rupa Bumi Indonesia adalah dari BIG (Badan Informasi Geospasial) Indonesia, dahulunya Bakosurtanal.

Kartografer seluruh Indonesia sudah terbiasa dengan peta ini.

Kenapa tidak peta batas administrasi?

Peta batas administrasi pemerintahan (misalnya Peta Kabupaten / Peta Kota) memiliki skala yang berbeda-beda tergantung luas wilayah dan ukuran kertanya, sehingga sedikit susah saat di-overlay, ditempelkan diatas peta lain saat rapat koordinasi atau rapat lainnya (non-online) menggunakan printed map, peta kertas.

Memang lebih unggul peta wilayah ini, untuk memetakan wilayah administrasi, karena memang itu tujuan dibuatkan peta tersebut. Namun, saat ada pembangunan jalan, drainase, penanggulangan banjir, dan hal-hal detail lainnya, sangat tidak praktis lagi, karena peta ini biasanya berskala kecil, misalnya 1: 100 ribu atau 1: 250 ribu.

Nah, di sinilah bergunanya pembagian wilayah berdasarkan kode peta RBI ini.

Kenapa tidak peta batas wilayah administrasi pemerintah lebih kecil, misal: peta kelurahan / peta kecamatan?

Terkadang, (sering) kita tidak memiliki petanya. Kalaupun ada, tidak terkini.

Lebih sering, peta tersebut berskala macam-macam, tidak seragam, sehingga saat ditempelkan / di-overlay tidak bisa, karena tidak satu skala, skalanya berbeda.

Di sinilah menangnya peta RBI, karena skalanya sudah pre-determined sebelumnya.

Apa kekurangan penomoran RBI ini?

Tentu ada kekurangannya, yaitu pembagian wilayah hanya berdasarkan posisinya di bumi, yaitu dalam derjat. Sering sebuah wilayah berada di dua atau lebih batas RBI.

Silahkan perhatikan peta administrasi wilayah Kabupaten Kampar dan Kota Pekanbaru berikut:

Terlihat, Kabupaten Kampar terletak pada 4 buah RBI, se-cuil ada di RBI 250 000 nomor peta 0817 dan 0716, sebahagian besar di 0816, dan ada sebahagian kecil di 0815.

Akibatnya, pemerintah terkadang harus membeli beberapa peta RBI untuk wilayahnya, walaupun sebenarnya wilayahnya kecil, namun berada pada beberapa RBI.

Kebetulan Kota Pekanbaru berada sepenuhnya pada RBI 0816.

Kelemahan berikutnya adalah nomornya yang panjang dan susah di-ingat. RBI 250,000 s/d 10,000 (peta resmi dari BIG), biasanya disiasati dengan memberikan nama kota terbesar atau nama most populated place yang termasuk dalam peta tersebut.

Kelemahan lainnya diwariskan oleh sistem koordinat referensi WGS 84 (yang dalam derjat), yang digunakan oleh RBI, yaitu luas wilayah nanti akan berbeda tergantung posisinya dari khatulistiwa. Namun, ini dapat sedikit diakali dengan menggunakan UTM ataupun TM-3.

Apa kelebihan penomoran RBI 1000 ini?

Pemerintah Daerah Tingkat II Kabupaten / Kota tentu akan sangat terbantu dengan pembagian wilayah ini, karena nanti akan sangat gampang digabungkan kembali dengan peta RBI resmi dari pemerintah / BIG. Wilayah yang dipetakan oleh RBI 1000 dengan nomor demikian ada pada peta resmi RBI dengan nomor-nomor sebelumnya.

Karena batas RBI1000 sudah pre-determined berdasarkan aturan RBI yang bersifat nasional, pemda dapat dengan mudah meminta organisasi/perusahaan manapun membuatkannya, cukup dengan memberitahu nomor nya saja.

RBI 1000 juga cocok untuk peta skala 1:1000 pada kertas A2 (59,4 x 42cm), karena ukuran peta tidak sampai 40 x 40 cm.

Terlihat bahwa RBI 10 000, dengan luas cakupan sekitar 2 137 hektar (di Pekanbaru), cocok untuk peta kelurahan,

Proposed RBI 5000 dengan luas cakupan sekitar 534 hektar, cocok untuk RW atau kelurahan yang lebih detil. “RBI 5000” usulan ini merupakan pecahan seperempat dari RBI 10 000. Tiap-tiap RBI 10000 akan memiliki 4 buah RBI 5000. RBI 5000 ini sudah terlihat persil tanah warga, namun belum bisa diberi label . Sila lihat ukuran skalanya berikut:

Catatan:
Pada peta skala 1:100 000, tiap 1 cm pada peta adalah 1 km di dunia nyata.
RBI 10,000, maka 1 cm pada peta adalah 100 meter aslinya,
RBI 5,000, maka 1 cm pada peta adalah 50 meter aslinya,
RBI 2,500, maka 1 cm adalah 25 meter aslinya,
RBI 1,000, maka 1 cm adalah 10 meter aslinya.

RBI 2500, dengan luas cakupan sekitar 136 hektar, cocok untuk peta RW, dan penomoran blok rumah.

RBI 1000, cocok untuk penomoran ruko atau perumahan, karena tanah perumahan di Pekanbaru, biasanya ukurannya adalah 9 x 12 m, jadi di peta masih tergambarkan sekitar 1 cm x 1 cm.

40 x 40 cm?

Ukuran 40×40 cm muat di kertas A2 dan A1 ataupun lebih besar lagi, kertas A0.

Namun, ukuran ini tidak standar dengan kemampuan printer yang ada di pemda, yang biasanya maksimum A3.

Namun, biasanya teknisi kantor pemda sudah tahu cara memprint peta ukuran A0 dengan printer kertas A4 menggunakan metode poster printing.

RBI 1000 dan SAS Planet

RBI 1000 pada SAS Planet untuk ArcGIS Imagery 20 terlihat berukuran 1296 x 1296 pixels.

pada resolusi aslinya, 1296 x 1296 pixels, sudah dapat dilihat dengan jelas rumah dari citra satelit zoom 19. SAS Planet menggunakan zoom dari 1, sedangkan aslinya zoom WebGIS itu dari 0

Tantangan

Tidak semua pemerintah daerah pandai / mampu memecah RBI ini hingga skala sebesar 1000.

Di beberapa tulisan saya, sudah saya buatkan contoh pemecahan RBI ini menggunakan JavaScript + LeafletJS.

Namun, menemukan pegawai Pemda yang mengerti JavaScript (dan mau bekerja untuk ini) juga cukup sulit.

Jika ada pemerintah daerah yang serius ingin memetakan wilayahnya, sebaiknya bekerja sama dengan kampus.

Sebenarnya, saya bisa saja membuatkan RBI 1000 untuk seluruh indonesia, lalu pemda dapat mengunduhnya, namun kita terkendala dengan ukuran file di sini.

D:\GIS\BIG\RBI>dir *indonesia.geojson

28/02/2019  06.28         1.034.654 rbi100Indonesia.geojson
28/02/2019  05.11           164.182 rbi250Indonesia.geojson
28/02/2019  15.27        19.123.853 rbi25Indonesia.geojson
28/02/2019  08.42         4.448.427 rbi50Indonesia.geojson

GeoJSON di atas merupakan polygon batas RBI di Indonesia.

Terlihat RBI 25000 saja sudah berukuran 19MB.

RBI 10000 seharusnya berukuran 9 * 19 MB, sekitar 9 * 20 MB = 180 MB, sudah cukup besar kalau dibuka di QGIS.

Solusi adalah dengan membagi RBI tersebut per provinsi, misal:

D:\GIS\BIG\RBI>dir rbi*riau*

28/02/2019  16.03         5.795.249 rbi10RiauDaratan.geojson
28/02/2019  15.34           408.225 rbi25RiauDaratan.geojson
28/02/2019  16.39        23.527.769 rbi5RiauDaratan.geojson

Alternatif lain, selain membagi per provinsi, yaitu dengan membagi RBI per RBI 250 ribunya.

06/01/2020  19.15        47.442.569 rbi1000_0816-XXXX-XXX.geojson
06/01/2020  19.03         4.842.713 rbi2500_0816-XXXX-XX.geojson
06/01/2020  16.27         1.243.961 rbi5000_0816-XXXX-X.geojson

Terlihat di atas, bahwa RBI 250000 dengan nomor 0816, saat dibuatkan RBI 5000 berukuran 1MB, sedangkan RBI 2500 nya menjadi 5MB, danRBI 1000 nya menjadi 50MB (9 kali-lipat)

Esri Shape File (SHP)

Membuka berkas GeoJSON ini di QGIS untuk ukuran 50MB cukup memberatkan. Solusi adalah dengan meng-convert-nya menjadi SHP dahulu menggunakan OGR2OGR.

ogr2ogr -nlt POLYGON -skipfailures rbi50Indonesia.shp rbi50Indonesia.geojson

perintah di atas adalah untuk mengconvert GeoJSON kita menjadi SHP

Ada pun versi ESRI Shapefilenya:

06/01/2020  19.19        22.021.826 rbi1k_0816-XXXX-XXX.dbf
06/01/2020  19.19               143 rbi1k_0816-XXXX-XXX.prj
06/01/2020  19.20         3.605.488 rbi1k_0816-XXXX-XXX.qix
06/01/2020  19.19        16.920.676 rbi1k_0816-XXXX-XXX.shp
06/01/2020  19.19           995.428 rbi1k_0816-XXXX-XXX.shx

Di suatu sisi, ESRI Shapefile lebih cepat diload, karena bisa dibuatkan berkas QIX nya, yaitu berkas index spatialnya…

ESRI Shapefile juga memisahkan antara database file nya dengan shapenya, PRJ (Projection), SHX (shape index), dan QIX (EXTENTS/tree index)

Beberapa contoh, dapat didownload dari Google Drive saya,

https://drive.google.com/drive/u/1/folders/1sgeQNPltJnPqDzWxbl4FoYbNpqDYgevf

JavaScript untuk membuat WLD dan AUX.XML file NASA GIBS

GIBS NASA menggunakan EPSG:4326, yang sedikit berbeda dengan Pseudo Mercator / EPSG:3857 atau yang lebih dikenal dengan Google Map. Zoom pada GIBS pun dinamakan Matrixset m, jadi bukan z.

Ukuran gambar dibuat dengan perbandingan 2:1, untuk lebar dua kali lipat tinggi.

Ukuran tile pun 512×512 pixels, tidak seperti kebanyakan tile server lain yang 256×256 pixels.

Gambar baru “benar-benar” full saat m = 3, dimana terdapat 5 baris dan 10 kolom

Leaflet JS membuat Polygon untuk Matrik 3

Untuk membuat polygon batas masing-masing tile tersebut, kita gunakan saja Leaflet, karena dukungan GIS nya memang sangat mumpuni. Berikut petikan awal snippet JavaScript saya:

// fungsi untuk membuat polygon berdasarkan nomor row dan col
// untuk matrik 3
// matrik 3 adalah 10 col dan 5 row
function m3(row,col){
  //ingat L.polygon adalah latlong
  return new L.polygon(
    [
      [ 90-36*row , -180 + 36*col],
      [ 90-36*row , -180 + 36*(col+1)],
      [ 90-36*(row+1) , -180 + 36*(col+1)],
      [ 90-36*(row+1) , -180 + 36*(col)]
    ]
  );
}

Fungsi di atas untuk membuat sebuah polygon di Leflet, untuk spesifik nomor baris dan kolom tertentu.

Perhatikan bahwa Leaflet menggunakan LatLng, latitude dulu baru , baru longitude!

Untuk zoom level 3, kita tahu ada 10 kolom gambar untuk 360 derjat longitude. Dari sini, kita bisa tahu bahwa lebar sebuah ubin adalah 36 derjat.

Untuk zoom level 3, kita tahu ada 5 baris gambar yang menutupi bumi 90 derjat utara dan 90 derjat selatan, total 180 derjat latitude bumi.

180 dibagi 5 adalah …. 36 derjat juga …

Extents (batas) gambar dari NASA adalah seluruh bumi, dari -180 sampai 180 untuk longitude, dan dari 90 utara hingga minus 90 untuk selatan…

Longitude bertambah terus 36 derjat setiap kolom ubinnya, dari -180 (ujung barat bumi) hingga 180 (timur).

Latitude berkurang terus 36 derjat untuk penambahan baris ubin, mulai positif 90 di kutub utara, hingga minus 90 untuk kutub selatan.

Sekarang Anda tahu darimana datang angka-angka koordinat polygon nya!

LeafletJS Download GeoJSON untuk semua Matrik 3

Silahkan pelajari petikan kode berikut:

function downloadm3(){
	// Create an empty GeoJSON collection
	var collection = {
		"type": "FeatureCollection",
		"features": []
	};
	
	//sekarang loop tiap row dan col
  // m3 ada 5  baris 10 kolom
  var row=5,col=10;
	for(r=0;r<row;r++){
		for(c=0;c<col;c++){
			g = m3(r,c).toGeoJSON();//dari leaflet polygon langsung ke GeoJSON saja
      //nah, berhubung properties nya masih kosong, kita tambahin saja
      g.properties={m:3,r:r,c:c};
			collection.features.push(g);
		}
	}
	
	saveAs(new Blob([JSON.stringify(collection)], {type: "text/plain;charset=utf-8"}),'m3.geojson')
	
}  

Nah, jika fungsi tersebut dipanggil, Anda akan disuruh unduh eh download sebuah file bernama m3.geojson, yaitu geojson untuk semua batas ubin GIBS nasa untuk matriks 3.

Untuk sukses menjalankannya, Anda butuh FileSaver.min.js

Logika dibelakang kode ini adalah seperti berikut:

Kita buatkan dulu sebuah koleksi untuk menampung fitur kita. Ini merupakan aturan pembuatan FeatureCollection pada GeoJSON.

Lalu, kita push masing-masing ubin kita ke koleksi tadi.

Untuk lebih memudahkan kita identifikasi nomor baris dan kolom, kita tambahkan tabel atribut untuk GeoJSON kita. Pada GeoJSON, tabel atribut namanya adalah PROPERTIES!

Untuk memudahkan mendownload file GeoJSON, saya gunakan FileSaver JS, sehingga dengan fungsi saveAs nya kita bisa langsung bisa simpan berkas dari memori javascript kita.

Lanjut …

Setelah sukses untuk GeoJSON zoom level 3, kita coba untuk membuat zoom level berikutnya.

//m3 adalah 10x5, col nya adalah 360 / 10, masing masing 36 derjat
//m4 adalah 20x10, col nya adalah 360/ 20, masing-masing 18 derjat
//m5 adalah 40x20, col nya adalah 360/ 40, masing-masing berarti 9 deg
// m6  80x40     360/80 = 9/2 deg = 4.5 deg
// 7  160    36/16   36/2^4
function mx(m,row,col){
  //ingat L.polygon adalah latlong
  var deg = 36/2**(m-3);
  return new L.polygon(
    [
      [ 90-deg*row , -180 + deg*col],
      [ 90-deg*row , -180 + deg*(col+1)],
      [ 90-deg*(row+1) , -180 + deg*(col+1)],
      [ 90-deg*(row+1) , -180 + deg*(col)]
    ]
  );

}

NASA GIBS mengikuti gaya tile server pada umumnya, yaitu pada zoom level berikutnya eh matriks berikutnya, adalah matriks sekarang dipecah 2 sehingga menjadi 4 ubin,

m3 adalah 10 kolom x 5 baris.

Seperti dibahas tadi, masing-masing panjang dan tinggi nya adalah 36 derjat.

Untuk zoom berikut, dibagi 2,

m4 berisi 20 kolom dan 10 baris, karena merupakan hasil pembagian dua dari m3.

Masing-masing ubin di m4 jadinya berukuran 18 derjat x 18 derjat.

Dapatkah Anda melihat pola berikut?

m3 -> 36

m4 ->18

m5 -> 9

Berapakah derjat untuk angka m berikutnya?

var deg = 36/2**(m-3);

Jawabannya adalah petikan kode di atas …

dua buah asterik pada javascript adalah pangkat.

2**3 = 2 ^ 3 = 8

perhatikan tanda pangkat di JavaScript

Download GeoJSON untuk zoom berapa saja

Setelah kita tahu cara membuat polygon setiap zoom berapa saja , saatnya kita buatkan fungsi untuk mendownload GeoJSON untuk zoom berapa saja.

Kodenya sebagai berikut:


/**
 * fungsi untuk mendownload spesifik m atau zoom level NASA
*/
function dlm(m){
  // Create an empty GeoJSON collection
  var collection = {
    "type": "FeatureCollection",
    "features": []
  };
  
  //sekarang loop tiap row dan col
  // m3 ada 5  baris 10 kolom
  //var row=5,col=10;
  // m4 20
  var col=2**(m-3) * 10;
  var row=col/2;
  
  
  for(r=0;r<row;r++){
    for(c=0;c<col;c++){
      g = mx(m,r,c).toGeoJSON();//dari leaflet polygon langsung ke GeoJSON saja
      //nah, berhubung properties nya masih kosong, kita tambahin saja
      g.properties={m:m,r:r,c:c};
      collection.features.push(g);
    }
  }
  
  saveAs(new Blob([JSON.stringify(collection)], {type: "text/plain;charset=utf-8"})
    ,'m'+m+'.geojson')
  
}    
    

Jika Anda menjalankan dlm(8), maka Anda akan disuguhkan download file m8.geojson, yang berisi SEMUA polygon untuk zoom 8.

Masih belum muntah?

Membuat file WLD

Kelebihan kita telah memiliki polygon untuk setiap ubin, kita bisa tahu extents atau bound di Leaflet.

Perhatikan kode konsol JavaScript berikut:

var mx311 = mx(3,1,1)

JSON.stringify(mx311.getBounds())
"{"_southWest":{"lat":18,"lng":-144},"_northEast":{"lat":54,"lng":-108}}"

Setiap fitur polygon di Leaflet memiliki fungsi getBounds(), yang sangat berguna bagi kita untuk mengetahui EXTENTS gambar ubin kita.

Nah, kalau kita sudah memiliki EXTENTS, kita bisa buatkan World Filenya

function bound2WLD(bound){
  //baris pertama adalah resolusi x
  var a=[];
  a.push((bound._northEast.lng-bound._southWest.lng)/512);
  a.push(0);
  a.push(0);
  a.push( -1* (bound._northEast.lat - bound._southWest.lat)/512);
  a.push(bound._southWest.lng);
  a.push(bound._northEast.lat);
  return a;

} 

Nah, berhubung citra ubin kita adalah 512 x 512 pixel, makanya resolusi adalah dibagi 512.

Kesimpulan sementara

Polygon -> bound -> WLD

Download WLD otomatis

untuk sementara, kita coba download semua file WLD untuk zoom level 3 saja dahulu … nanti kalau bener, baru kita download semua …

//download semua file WLD untuk zoom 3
function wld3zip(){
  //coba pake JSZIP
  var zip = new JSZip();
  //untuk zoom 3, row adalah 5, cols adalah 10
  var row=5,col=10;
  for(r=0;r<row;r++){
    for(c=0;c<col;c++){
      zip.file((3+'-'+r+'-'+c+'.wld') , bound2WLD(mx(3,r,c).getBounds()).join('\r\n'));
    }
  }
  
  zip.generateAsync({type:"blob"})
    .then(function (blob) {
    saveAs(blob, "m3.zip");
  });
	
}

Nah, berhubung kita mendownlod banyak file, sebaiknya dizip saja, menggunakan JSZIP. Hal ini memudahkan kita mendownload 50 file, karena dijadikan 1 saja, m3.zip.

Download WLD untuk zoom berapa saja

Setelah sukses download semua WLD untuk zoom level 3, kita lanjutkan ke level berapa saja ….

Kodenya mirip dengan sebelumnya, hanya ada beberapa yang perlu kita ubah …


//fungsi untuk mendownload semua file WLD untuk zoom level m
// @input m zoom
// @output ZIP file containing all WLD files
function wldzip(m){
  // pake JSZIP
  var zip = new JSZip();
  var col=2**(m-3) * 10;
  var row=col/2;
	for(r=0;r<row;r++){
		for(c=0;c<col;c++){
			zip.file((m+'-'+r+'-'+c+'.wld') , bound2WLD(mx(m,r,c).getBounds()).join('\r\n'));
		}
	}
  
  zip.generateAsync({type:"blob"})
    .then(function (blob) {
    saveAs(blob, "m"+m+".zip");
  });
	
}

Perhatikan bahwa kita perlu mengubah juga nama file WLD nya ya dan juga nama zip download nya, dan juga mx(3,r,c) sekarang menjadi mx(m,r,c).

Download ZIP file PNG.AUX.XML

Berikut kode untuk membuat file auxiliary dari semua ubin yang kita unduh. Kita butuh file png.aux.xml ini agar tidak perlu ditanya terus CRS / Kode EPSG untuk gambar kita.


//download zip file containing all png.aux.xml 
function zipAUX(m){
  var zip = new JSZip();
  var col=2**(m-3) * 10;
  var row=col/2;
	for(r=0;r<row;r++){
		for(c=0;c<col;c++){
			zip.file(
        (m+'-'+r+'-'+c+'.png.aux.xml') //filename
        , '<PAMDataset>\r\n' 
          +'  <SRS>GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]]</SRS>\r\n'
          + '</PAMDataset>'
      );
		}
	}
  
  zip.generateAsync({type:"blob"})
    .then(function (blob) {
    saveAs(blob, "PNG_AUX_XML_m"+m+".zip");
  });

}

Logikanya mirip dengan sebelumnya …

Voila .. sekarang kita sudah punya semuanya … ubin (download via wget), WLD dan juga AUX nya

Sekarang, gambar ubin apapun dari NASA, bisa kita unduh dan tampil cantik di QGIS kita!

Mabok?

temui saya di Gedung Baru FST UIN Suska … kita bahas secaran offline, biasanya lebih nancap!

UESP Morrowind Map

tiba-tiba teringat kenangan tahun 2003 dulu waktu masih kuliah s1 (dan juga lagi bingung di Wollongong NSW 2009, mainin game Elder Scroll III Morrowind. Dan bicara tentang Elder Scroll, ngga kan bisa lepas dari UESP dan Maps nya …

nah , tiba tiba jadi ingat ImageMagick montage dan wget

Zoom level 12

Zoom level 12 formatnya adalah

/mwmap/zoom{z}/vvardenfell-{x}-{y}-{z}.jpg

atau silahkan lihat hasil CMD.exe saya berikut:

REM contoh link
REM https://maps.uesp.net/mwmap/zoom12/vvardenfell-1-2-12.jpg

REM create list file untuk di download
REM for /l adalah start step stop
for /l %i in (0,1,3) do for /l %j in (0,1,3) do echo vvardenfell-%j-%i-12.jpg >> list12.txt


REM montage concatenate untuk menggabungkan semua ubin
REM level 12 nya masih 4x4 (angka 0 sd 3)
montage -mode concatenate -tile 4 @list12.txt z12.jpg

Format URL UESP adalah x-y-z.jpg, jadi, untuk concatenate kita tidak bisa menggunakan dir /b > list.txt , karena otomatis pengurutan di windows adalah karakter pertamanya dulu, yaitu x

Makanya saya menggunakan %j dulu baru %i

Nah, untuk mendownload, perlu ditambahkan https:// bla bla bla nya dulu ya …

baru nanti di

wget -i list12wget.txt

dimana list12wget.txt adalah file list12.txt tadi yang sudah ditambahkan https:// maps . uesp . net

Kalau Anda mengerti regex, bisa menggunakan topi ^

Next Zoom, Level 13



for /l %i in (0,1,7) do for /l %j in (0,1,7) do echo vvardenfell-%j-%i-13.jpg >> list13.txt

Zoom level 12 seharusnya adalah zoom level 2 di tileLayer

Berdasarkan aturan Slippy tile algorithm, zoom 0 adalah 1 gambar saja, zoom 1 adalah extent gambar tadi dibagi 2, sehingga menjadi 2×2 = 4 gambar, zoom level 2 adalah 4×4 = 16

Nah, zoom12 di UESP adalah zoom level 2 pada slippy tile algorithm, karena maximum ubin adalah 4 x 4 … dari 0 hingga 3

sehingga … kita bisa menggunakan Leaflet TileLayer sebagai berikut:


L.TileLayer.UESP = L.TileLayer.extend({
    getTileUrl: function(coords) {
    
      if(coords.z<2)
        return "https://maps.uesp.net/mwmap/zoom12/vvardenfell-0-2-12.jpg";
      //else  
        return "https://maps.uesp.net/mwmap/zoom" + (coords.z+10) + "/vvardenfell-" + (coords.x) + "-" + (coords.y) + "-" + (coords.z+10) + ".jpg";
    },
    getAttribution: function() {
        return "";
    }
});

L.tileLayer.uesp = function(o) {
    return new L.TileLayer.UESP(o);
}

L.tileLayer.uesp({minZoom:2}).addTo(map);

buat yang mau liat kode komplit nya di sini:

MS4W Rewrite tileServer for your leaflet js webgis

If you want to serve tiles for Leaflet TileServer, probably using MapServer CGI is one of best options: quick and easy to setup.

One of my favorite “hacks” is doing RewriteEngine Apache Directive with .htaccess file, to make your URL more search-engine friendly.

Instead of serving long CGI URL like this one:

http://localhost/cgi-bin/mapserv.exe?map=D:/ms4w/apps/ptpn5/data/2015-09-12/ms.map&mode=tile&layers=NDVI&tilemode=gmap&tile=25546%2016315%2015

which will expose your map-file path and probably some security concern, — it will be better if you use Rewrite with your Apache

following snippet is my real DOT htaccess file ( .htaccess )

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule  tile/(.*)/(.*)/(.*)/(.*)/(.*)\.png$ "/cgi-bin/mapserv.exe?map=/ms4w/apps/ptpn5/data/$1/ms.map&mode=tile&layers=$2&tilemode=gmap&tile=$4 $5 $3" [L]

WTF is that?

It means that if some one requesting file which is not available, instead of giving 404 Error, apache will re-write user request into following rule:

those (.*) is not for boob … it’s a “whatever” in ReGex.

count those boobs … one two three four five … yeah … there are five boob …

you will mark those boob with $1 to $5 …

$1 is for path-to-my-directory

$2 is for layers in my map file

$3 is for z coordinate (zoom level in tileServer)

$4 is for x coordinate — slippy tile

$5 is for y coordinate

TL;DR

End user will now able to access any directory within apps’ data, any layer, any XYZ tile! simply by putting URL request like this:

tile/directoryname/layername/z/x/y.png

http://localhost/cgi-bin/mapserv.exe?map=D:/ms4w/apps/ptpn5/data/2015-09-12/ms.map&mode=tile&layers=NDVI&tilemode=gmap&tile=25546%2016315%2015

will became

http://localhost/ptpn5/tile/2015-09-12/NDVI/15/25546/16315.png

Some how easier to read, easier to code with Leaflet JS!

   var tile_20150912_ndvi = L.tileLayer('/ptpn5/tile/2015-09-12/NDVI/{z}/{x}/{y}.png', {
            minZoom: 10,
            maxZoom: 20,
            tms: false,
        });

    
    var tile_20150912_tc = L.tileLayer('/ptpn5/tile/2015-09-12/TrueColor/{z}/{x}/{y}.png', {
            minZoom: 10,
            maxZoom: 20,
            tms: false,
        });

    
    var tile_20150912_b4 = L.tileLayer('/ptpn5/tile/2015-09-12/B04/{z}/{x}/{y}.png', {
            minZoom: 10,
            maxZoom: 20,
            tms: false,
        });

    
    var tile_20150912_b8 = L.tileLayer('/ptpn5/tile/2015-09-12/B08/{z}/{x}/{y}.png', {
            minZoom: 10,
            maxZoom: 20,
            tms: false,
        });

JavaScript file untuk membuat grid RBI

Jika Anda tertarik untuk mempelajari JavaScript membuat batas peta RBI, silahkan download dari Github saya

https://github.com/kampar/rbi_geojson

Di sana ada file app.js yang membutuhkan dahulu script dari LeafletJS dan FileSaver.JS yang dapat dengan mudah Anda download dari Internet.

Jika malas mencoba, Anda dapat mendownload saja file geojson yang sudah saya hasilkan …

Kalau ingin menangis dan bertapa, silahkan lihat kodingan javascript nya di file app.js

hahahaha

JavaScript aneh dalam perhitungan matematika, jadi agak ribet tadi dalam pembulatan … perhatikan bahwa 0100 di JavaScript

Ada yang tahu kenapa 100 dibagi 10 adalah sepuluh dan 0100 dibagi 10 adalah 6.4?

hint: oktal (basis 8)

ada lagi yang aneh dalam Math.round, yang seharusnya menghasilkan bilangan bulat (integer)

tetapi integer hasil Math.round bisa berbeda kalau nanti dibuat ke perhitungan, lain dengan Math.floor (bilangan bulat dibawah bilangan sekarang)

that’s the power of tulisan jawa … hahahaha

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