Ceritanya gini, tadi pagi akhirnya saya sukses mewariskan salah satu ilmu yang menurut saya cukup susah untuk diwariskan kepada mahasiswa S1, padahal ngga susah banget: yaitu membuat sendiri file WLD dan AUX.XML pada raster hasil montage dari server ESRI / ArcGIS.
Arsip Kategori: Google
Google Fusion Table untuk Kecamatan di Kabupaten Kampar (Prov Riau)
Bagi mahasiswa Data Mining saya, silahkan gunakan Google Fusion Table ini untuk tugas Anda, atau sila minta tolong dengan teman Anda yang sudah mengambil matakuliah GIS dalam membuat SHP / KML nya. Tutorial cara membuatnya sudah saya rekam dengan Camtasia, tapi belum sempat di publish.
Ada dua (plus satu hasil merge) Google Fusion Table yang saya berikan dengan harapan Anda bisa mempelajarinya:
- Peta Kecamatan di Kab. Kampar (hasil dari import KML)
https://www.google.com/fusiontables/DataSource?docid=1UC6L1FEtsX3n7wQ0PvCLE3pGBBHRiaiyppY32-rL - Tabel dari BPS, hasil sensus 2010
https://www.google.com/fusiontables/DataSource?docid=1tsPnwPVa9_8XerodNvCsAc6zlgiOpMpUCZvCSdRU - Hasil gabungan (MERGE) dari dua tabel di atas, yaitu tabel KUD yang sudah ada peta tematiknya / koroplet.
https://www.google.com/fusiontables/DataSource?docid=1VsZKTA7SeoQ1DR60fqhqru30wRQeGYsf3ryd3UQj
Silahkan dipelajari…
Tampilan Peta saja (Tabel pertama)
Tampilan tabel kedua (tanpa peta, hanya hasil geocoding, perhatikan ada yang salah geocoding oleh Googlenya, sengaja saya tinggalkan satu defaultnya salo di Minessota
Tampilan Hasil Gabung:
Google Fusion Table untuk 34 Provinsi di Indonesia
Bagi yang ingin memvisualisasikan data tentang batas-batas provinsi di Indonesia, sila gabung (merge) peta dan google fusion table saya di sini:
Silahkan kopi dan pasta. Data saya ambil dari Pemilu API.
Buat yang hobi dengan datamining, sila merge fusion table nya, FREE
https://www.google.com/fusiontables/DataSource?docid=1p6N2nWauL0GaNyc3gps6wturU6dd-L1CUffypZa3
Google Fusion Table for Dumai
bagi yang butuh Google Fusion Table yang berisi kecamatan-kecamatan di Kota Dumai, lengkap dengan petanya, sila di-merge tabel anda dengan punya saya,
https://fusiontables.google.com/data?docid=1aqonWovSrSLaSnoUTxOJ9K7NDutNgWj6C8gbAy47#map:id=3
Sayangnya WordPress tidak dukung iframe, tapi buat yang penasaran sila lihat contoh hasil publish nya di sini:
Google Maps Tiles format
at last … found the way to download Google Map tiles … if you know Slippy Tile Algorithm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Type titik | |
| x As Long | |
| y As Long | |
| End Type | |
| Private Function CalcTileXY(ByVal lat As Single, ByVal lon As Single, ByVal zoom As Long) As titik | |
| CalcTileXY.x = CLng(((lon + 180) / 360 * 2 ^ zoom)) | |
| CalcTileXY.y = CLng(((1 – Math.Log(Math.Tan(lat * pi / 180) + 1 / Math.Cos(lat * pi / 180)) / pi) / 2 * 2 ^ zoom)) | |
| End Function | |
| Function xyz2url(x As Long, y As Long, z As Byte) As String | |
| xyz2url = CStr("http://maps.google.com/maps/vt?pb=!1m5!1m4!1i" _ | |
| & z & "!2i" & x & "!3i" & y _ | |
| & "!4i256!2m3!1e0!2sm!3i385078792!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!") | |
| End Function | |
| 'please change tracking padding, added by google, use Network tab on your Inspect Element menu in your browser |
Dron dan Google Maps Tile Overlay (ImageMapType)
Ceritanya, abang saya membeli dron versi pro, walaupun masih versi “mangga dua” istilah salah seorang sekjur yang telah terlibat dalam proyek pemetaan milyaran, tapi saya sangat suka dengan dron jenis ini, karena harganya bersahabat … hehehe dan mudah digunakan (terbang/take-off dan landing)
Nah, selama ini, peggunaan dron tipikal ini hanya untuk pemetaan di kertas ataupun pembuatan point-cloud topography permukaan. Beberapa hari ini saya tertarik untuk menambahkan produk akhir bagi komunitas dron ini, yaitu peta Google Maps kustom, yang telah dilengkapi dengan peta yang dihasilkan dron ini.
Sebenarnya, sangat gampang meng-overlay sebuah gambar yang telah ter-raktifikasi ke Google Maps, namun, kali ini, kita tidak akan meng-upload ukuran gambar yang puluhan mega tersebut ke Internet untuk didownload oleh client. Tentu client akan mengeluh karena banyaknya data yang dibutuhkan untuk mendownload gambar tersebut keseluruhan pada awalnya (misalnya dengan KML/KMZ). Client yang meng-akses peta online kita dengan hand-phone akan cepat kehabisan paket datanya.
Salah satu solusi, adalah dengan menggunakan layanan ubin / tile sendiri.
Tile Server
Dengan metode ini, gambar yang besar tersebut dipotong-potong sesuai dengan ukuran ubin dan skala Google, sehingga client nantinya hanya men-download gambar yang dibutuhkannya saja tanpa harus mendownload semuanya.
Namun, yang jadi masalah adalah memotong-motong gambar hasil dron tersebut.
Solusinya:
Check dahulu extents dari gambar kita
ini dapat dilakukan degan gdalinfo
Seperti terlihat di gambar, berkas hasil dron kita memiliki batas-batas koordinat / extents. Nah, yang kita perlu perhatikan adalah Upper Left dan Lower Right nya saja, karena kita butuh dua posisi ini untuk menentukan nomor ubin kita.
BTW, ngomong-ngomong, itu Pixel Size sepertinya sangat keren, ya … satu titik pixel hasil olahan dron tadi adalah 3 senti di dunia nyata (karena satuan gambar kita adalah meter, EPSG 3857). Ukuran peta kita adalah 7602×7864 pixel, maka panjang daerah yang tercover oleh dron adalah sekitar 216,005075286 meter x 223,449606952 meter
Kembali lagi ke Upper Left dan Lower Right …
Dari koordinat titik tersebut, selanjutnya kita perlu mendapatkan bounds x dan y Mapnik.
Menentukan Bounds X dan Y Mapnik
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function long2tile(lon,zoom) { | |
| return (Math.floor((lon+180)/360*Math.pow(2,zoom))); | |
| } | |
| function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); } | |
| function tile2lon(x,z) { | |
| return (x/Math.pow(2,z)*360-180); | |
| } | |
| function tile2lat(y,z) { | |
| var n=Math.PI-2*Math.PI*y/Math.pow(2,z); | |
| return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n)))); | |
| } | |
| var BoundingBox = function(x,y,z){ | |
| this.north = tile2lat(y, z); | |
| this.south = tile2lat(y + 1, z); | |
| this.west = tile2lon(x, z); | |
| this.east = tile2lon(x + 1, z); | |
| } |
Nah, dari kodingan snippet JavaScript di atas, kita dapat dengan mudah menentukan nomor ubin yang akan digunakan untuk pelapis (overlay) di atas peta Google Map.
Contoh penggunaan snippet tadi adalah dengan membuat sebuah textarea dan beri id myTextArea
var myTextArea = document.getElementById('myTextArea');
for (var z=17;z<=22;z++){ myTextArea.value+=z+':[['+long2tile(dronUpperLeft.lng,z)+', '+long2tile(dronLowerRight.lng,z)+'], ['+lat2tile(dronUpperLeft.lat,z)+', '+lat2tile(dronLowerRight.lat,z)+']],'+'\n' }
Nantinya, kodingan ini akan menghasilkan bounds kita:
var bounds = {
17:[[104393, 104394], [67846, 67847]],
18:[[208787, 208789], [135693, 135694]],
19:[[417575, 417578], [271386, 271389]],
20:[[835150, 835156], [542772, 542778]],
21:[[1670301, 1670312], [1085545, 1085557]],
22:[[3340603, 3340625], [2171090, 2171114]]
};
Jangan lupa membuang koma di ujung object terakhir, ya … karena JavaScript tidak secerdas Java
Nah, bounds tadi dapat digunakan untuk menampilkan peta dron kita ke Google Map
Menambahkan ImageMapType baru ke Google Map
function layer2ImageMapType(namaLayer){
var _myImageMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// update as 2017-02-25
// skip if not within our bounds
if(
bounds[zoom][0][0] > coord.x
|| coord.x > bounds[zoom][0][1]
|| bounds[zoom][1][0] > coord.y
|| coord.y > bounds[zoom][1][1]) {
return null;
}
return "/uin/tile20170211/"+zoom+"-"+coord.x+"-"+coord.y+".png";
},
tileSize: new google.maps.Size(256, 256),
minZoom: 17,
maxZoom: 22,
//id:'localhost',
name: namaLayer,
alt:'Custom tile for '+ namaLayer,
//opacity:0.70,
isPng: true
});
return _myImageMapType;
}
Nah, kode di atas sebenarnya ngga bagus, tapi setidaknya jalan …
Masih banyak sampah di kode tersebut, namun, bisa untuk dipelajari..
Hasilnya
Nah, yang di atas karena kita batasin hanya sampai level 22 zoomnya.
Kalau mau melihat trafik jaringannya, berikut hasilnya: Terlihat bahwa ubin dari Google Maps yang satellite nya hanya sampai level 19, sedangkan kita gambarnya selain lebih bagus, lebih baru, juga bisa sampai ke level 22…
Terlihat
Google Maps API custom legend
Sebenarnya, saya sudah sangat malas ngajar tentang Google lagi, terutama semenjak kasus #PRISM #Snowden, tapi … berhubung masih banyak yang pake Google Maps API, makanya, berikut sample Google Maps API tentang penggunaan legenda peta.
Source code dapat diubah melalui GIST berikut:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Custom Legend</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> | |
| <meta charset="utf-8"> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| #map { | |
| /* height: 400px; */ | |
| height: 100%; | |
| width: 100%; | |
| } | |
| #legend { | |
| font-family: Arial, sans-serif; | |
| background: #fff; | |
| padding: 10px; | |
| margin: 10px; | |
| border: 3px solid #000; | |
| } | |
| #legend h3 { | |
| margin-top: 0; | |
| } | |
| #legend img { | |
| vertical-align: middle; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div id="legend"><h3>Legend</h3></div> | |
| <script> | |
| var map; | |
| function initMap() { | |
| map = new google.maps.Map(document.getElementById('map'), { | |
| zoom: 16, | |
| //center: new google.maps.LatLng(-33.91722, 151.23064), | |
| // the old one is in UNSW, Australia | |
| // change it into UIN Suska: 101.35475,0.46559 | |
| center: new google.maps.LatLng(0.46559, 101.35475), | |
| mapTypeId: 'roadmap' | |
| }); | |
| var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; | |
| var icons = { | |
| parking: { | |
| name: 'Parking', | |
| icon: iconBase + 'parking_lot_maps.png' | |
| }, | |
| library: { | |
| name: 'Library', | |
| icon: iconBase + 'library_maps.png' | |
| }, | |
| info: { | |
| name: 'Info', | |
| icon: iconBase + 'info-i_maps.png' | |
| } | |
| }; | |
| function addMarker(feature) { | |
| var marker = new google.maps.Marker({ | |
| position: feature.position, | |
| icon: icons[feature.type].icon, | |
| map: map | |
| }); | |
| // since not every feature has content, only add infoWindow when content exist | |
| if(feature.content){ | |
| var marker_infoWindow = new google.maps.InfoWindow({ | |
| content: feature.content | |
| }); | |
| marker.addListener('click', function() { | |
| marker_infoWindow.open(map, marker); | |
| }); | |
| } | |
| } | |
| var features = [ | |
| { | |
| position: new google.maps.LatLng(0.46721, 101.35630), | |
| content: 'INFO dodol lagi …', | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.46539, 101.35820), | |
| content: 'INFO dodol lagi …', | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.46747, 101.35912), | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.46910, 101.35907), | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.46725, 101.35011), | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.46872, 101.35089), | |
| content: 'INFO dodol lagi …', | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.46784, 101.35094), | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.46682, 101.35149), | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.46790, 101.35463), | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.46666, 101.35468), | |
| content: 'INFO dodol lagi …', | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.466988, 101.353640), | |
| content: 'INFO dodol lagi …', | |
| type: 'info' | |
| }, { | |
| position: new google.maps.LatLng(0.46662347903106, 101.35879464019775), | |
| type: 'parking' | |
| }, { | |
| position: new google.maps.LatLng(0.466365282092855, 101.35937399734496), | |
| type: 'parking' | |
| }, { | |
| position: new google.maps.LatLng(0.46665018901448, 101.3582474695587), | |
| type: 'parking' | |
| }, { | |
| position: new google.maps.LatLng(0.469543720969806, 101.35112279762267), | |
| type: 'parking' | |
| }, { | |
| position: new google.maps.LatLng(0.46608037421864, 101.35288232673644), | |
| type: 'parking' | |
| }, { | |
| position: new google.maps.LatLng(0.46851096391805, 101.3544058214569), | |
| type: 'parking' | |
| }, { | |
| position: new google.maps.LatLng(0.46818154739766, 101.3546203981781), | |
| type: 'parking' | |
| }, { | |
| position: new google.maps.LatLng(0.46495, 101.35621), | |
| type: 'library', | |
| content: 'Perpustakaan UIN' | |
| } | |
| ]; | |
| for (var i = 0, feature; feature = features[i]; i++) { | |
| addMarker(feature); | |
| } | |
| var legend = document.getElementById('legend'); | |
| for (var key in icons) { | |
| var type = icons[key]; | |
| var name = type.name; | |
| var icon = type.icon; | |
| var div = document.createElement('div'); | |
| div.innerHTML = '<img src="' + icon + '"> ' + name; | |
| legend.appendChild(div); | |
| } | |
| map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); | |
| } | |
| </script> | |
| <script async defer | |
| src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfswesJkjAcixCfuhU42Ss6dHlFCG5JAk&callback=initMap"> | |
| </script> | |
| </body> | |
| </html> |
Preview HTML nya di sini:
Beberapa hal yang saya ubah dari sample nya Google adalah:
Center peta diubah ke UIN Suska, bukan lagi UNSW Australia.
Demo penggunaan infoWindow. Di Google tidak diberikan contohnya.
Masih tentang OpenLayers Plugin di QGIS
“Buat Anda yang ingin mengconvert peta googlemap menjadi vektor *.shp”
Malam ini, berhubung susah tidur, saya sempatkan kembali utak atik qgis dan OpenLayers pluginnya. Dengan bantuan OpenLayers, saya bisa menyimpan peta dari Google ke Harddisk dan sekaligus dibuatkan berkas world nya (*.png dan *.pgw)
Hasil simpan tadi kemudian saya buka kembali ke qgis, dan dari ColorPix, saya bisa lihat bahwa gedung di google map diberi warna
#F2F2F2
atau dalam RGB: 242,242,242
dan
#FAEDD4
atau dalam RGB: 250, 237, 212
nah, dari informasi ini, saya kemudian membuka kalkulator raster dari menu Raster -> Raster Calculator, lalu klik band pertama (mungkin itu yang RED) klik sama dengan 242
Artinya, saya hanya ingin mengambil yang warnanya 242 saja
Hasilnya dapat dilihat pada gambar berikut:
Terlihat gambar hitam putih satu band saja yang merupakan band pertama peta google tadi yang warnanya 242
Raster ini kemudian saya convert menjadi vektor, agar bisa dapat peta gedungnya. Gunakan menu Raster –> Convert / Konversi –> Polygonize (Raster to Vector)
Nah, sekarang saya sudah memiliki vektor gedung dari peta google tadi.
Sayangnya, sampai saat ini sangat banyak polygon SAMPAH yang tercipta, karena memang itulah resiko kita melakukan polygonize.
Untuk membuang sampah, ciri-cirinya adalah luas daerahnya kurang dari 6 meter persegi.
Berhubung peta kita sudah menggunakan EPSG 3857, atau yang lebih dikenal dengan Pseudo Mercator, yang sudah dalam satuan meter, maka kita bisa lakukan seleksi:
tekan tombol “Pilih pitur menggunakan expresi” yang logonya kek huruf sigma dan kotak seleksi
Nah, naigasi di Geometri, klik $area, lalu ketik <6
Artinya kita ingin mencari yang luas poligon nya kurang dari 6 meter (misal 5,9meter ke bawah), lalu jangan lupa klik tombol pilih
Pada contoh di atas, 312 buah telah terpilih … dari total 378 vektor polygon kita …
Tekan tombol delete, sehingga semua sampah tadi dihapus …
Voila … !!!
Selamat! Anda sekarang sudah memiliki vektor gedung dari Google Map … tanpa harus gambar satu satu lagi …
UIN Suska Riau on Google Map
Google Map baru-baru ini meng-update petanya, dengan menyertakan UIN Suska Riau. Gedung-gedung di UIN Suska sekarang telah tampil di peta. Selama ini, hanya sampai Jl. Buluh Cina saja yang terpetakan, karena mungkin UIN dianggap Pekanbaru coret … hehehehehe.
Buat yang ingin download gambar tersebut, terutama mahasiswa saya, sila download dari Google Drive saya, jangan lupa download juga file World nya.
https://drive.google.com/open?id=0B9PWs0RsR289YUhLTkphUzl2Sms
Jika nanti saat Anda buka di QGIS, ditanya CRS, gunakan WGS84 saja, karena saya memang mem-georeferencer menggunakan WGS 84, bukan EPSG:3857, Pseudo Mercator.
Sayangnya, antara Google Map dibandingkan OSM (OpenStreetMap) kurang akur.
GIS + Data Mining
Semester ini saya diminta untuk mengajar di UIN Suska untuk matakuliah Data Mining, sebuah matakuliah yang terbilang baru untuk saya.
Awalnya, untuk tugas akhir (final project) matakuliah data-mining mereka, mahasiswa saya suruh untuk membuat sebuah laman menggunakan threejs untuk menampilkan peta 3D hasil analisis dari RapidMiner. Mereka saya suruh untuk mendownload data dari BPS.go.id, yang nantinya diolah dengan RapidMiner, kemudian digambarkan ke QGIS, dan dari QGIS dibuat peta 3D dengan ThreeJS melalui salah satu pluginnya.
Namun, kendala yang terjadi adalah penolakan mahasiswa. Alasannya, mereka tidak terbiasa menggunakan QGIS.
Alternatif lain adalah menggunakan Google Fussion Table. Berikut saya contohkan hasil k-means clustering provinsi di Indonesia berdasarkan kepadatan penduduknya.
Link google Fussion tabelnya adalah sebagai berikut:
Sedangkan contoh laporan yang saya harapkan adalah sebagai berikut:
Dosen GIS 
Anda harus log masuk untuk menerbitkan komentar.