Arsip Tag: Leaflet

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.

 

Rewrite URL agar lebih cantik pada MapServer

Ceritanya, link untuk menghasilkan gambar dari MS4W, MapServer for Windows, dengan tile ala google, yang biasa digunakan pada WebGIS adalah sangat panjang dan njelimet

Contohnya adalah sebagai berikut jika menggunakan Leaflet:


L.tileLayer('http://localhost:81/{id}{x} {y} {z}', {
maxZoom: 18,
id: 'cgi-bin/mapserv.exe?map=/ms4w/apps/belajar/kampar04/kampar.map&mode=tile&layers=jalan&tilemode=gmap&tile='
}).addTo(map);

Padahal, pada contoh yang diberikan oleh https://leanpub.com/leaflet-tips-and-tricks/read , tile server yang lain sangat SEO friendly format tilenya.

Solusi agar terlihat indah adalah tentu dengan menggunakan mod rewrite pada apache.

Berikut settingan .htaccess saya,


RewriteRule ^kampar/(.*)/(.*)/(.*)\.png$ "/cgi-bin/mapserv.exe?map=/ms4w/apps/belajar/kampar04/kampar.map&mode=tile&layers=jalan&tilemode=gmap&tile=$2 $3 $1" [L]

yang artinya kira-kira seperti ini:

kalo ada yang mengakses /kampar/apapun/apapun/apapun.png, maka apache akan me-rewrite ke /cgi-bin yang njelimet itu …

Dengan begini, tile kita di Leaflet akan lebih ciamik dan gampang dibaca:


L.tileLayer('http://localhost:81/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
id: 'kampar'
}).addTo(map);

Nah, tentu dengan begini akan lebih mudah dan cantik URL untuk gambarnya.

Berikut screenshot sebagai barang bukti …

tile kampar leaflet

Terlihat pada skimcot bahwa gambarnya sudah bagus dan SEO friendly

dan hasilnya juga sama, sila dilihat di screenshot berikut:

tile kampar rewrite sidebyside

yang di bawah adalah setelah di rewrite, yang di atas adalah yang puanjang