Arsip Kategori: Google

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

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

 

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

google-maximum-zoom-level-22

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…

google-satellite-cuma-max-level-19Terlihat

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:

Preview HTML nya di sini:

https://cdn.rawgit.com/kampar/b65b8319e88c43087440f591ed30d195/raw/f29c9584df0c6d3fcc5f43dfaca3bbe6735e58b4/custom_legend.html

 

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:

Screenshot from 2016-12-04 02-39-42.png

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)

Screenshot from 2016-12-04 02-44-25.png

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

Screenshot from 2016-12-04 02-46-14.png

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.

UIN Suska Google-vs-OSM

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:

https://www.google.com/fusiontables/DataSource?docid=17fNQPusZJ0R1wkJ2RrTU98zHOdefvBMMcAKdKYnx#map:id=3

Sedangkan contoh laporan yang saya harapkan adalah sebagai berikut:

 

MapServer tile as a layer on top of Google Maps

Couple days ago, I made a tutorial on how to put your MapServer tile on top of your Google Maps JavaScript API. This time, I do a little improvements, just a little bit putting transparency on MapServer’s .map file.

If you want to put transparency on your generated images from MapServer, you only need to put this 1 line on your .map file:

TRANSPARENT ON

Next, we want to put this transparent images as a layer on top of Google Map, as google provided us with an example here:

https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay

Change the contents of this following function:

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {

instead of returning div-s, change it into your MapServer tiles:

var url = "http://localhost:81/cgi-bin/mapserv.exe?";
url += "map=/ms4w/apps/belajar/kampar04/kampar.map&";
url += "mode=tile&";
url += "layers=jalan&";
url += "tilemode=gmap&";
url += "tile=" + coord.x + " " + coord.y + " "+zoom;

 var myMapServerTile = ownerDocument.createElement('img');
 myMapServerTile.src= url;
 return myMapServerTile; 

voila … now you have your own layer on top of Google Maps layer …

Create MapServer Tile Image for Google Map API v3

Ever since google updated their Google Map API into version 3 (probably around 2010), output generation sample code in page 463 on MapServer Documentation, Release 6.4.1 were not working anymore, and it had been frustrated me. I love that image tiling approach which will save tons of bandwidth and processing time for my MapServer.

Tonight, I manage to playing around and looking for sample code that google provided here.

If  you’re willing to put your MapServer tiled images (instead of custom divs provided in that sample), the only thing that you need to do is to change this function:

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {

comment or delete everything there (within that function), and change it with your own image provided by your MapServer tiled image:

var url = “http://localhost:81/cgi-bin/mapserv.exe?&#8221;;
url += “map=/ms4w/apps/belajar/kampar04/kampar.map&”;
url += “mode=tile&”;
url += “layers=jalan&”;
//url += “layers=layer1 layer2&”;
url += “tilemode=gmap&”;
url += “tile=” + coord.x + ” ” + coord.y + ” “+zoom;

var myMapServerTile = ownerDocument.createElement(‘img’);
myMapServerTile.src= url;
return myMapServerTile;

VOILA … it’s now fully working …

p.s: change http://localhost:81 and the rest of URL into your MapServer’s map file.

basic map types

New paper: Footprints in the sky – using student track logs in Google Earth to enhance learning

now we know how important is to track your student …

Po Ve Sham - Muki Haklay's personal blog

screen shot for paperIn 2011-2012, together with Richard Treves, I was awarded a Google Faculty Research Award, and we were lucky to work with Paolo Battino for about a year, exploring how to use Google Earth tours for educational aims. The details of the projects and some reports from the project are available on Richard’s blog, who was leading on many aspects of the work. Now, over 2 years since the end of the project, we have a publication in the Journal of Geography in Higher Education. The paper, titled ‘Footprints in the sky: using student track logs from a “bird’s eye view” virtual field trip to enhance learning’, is now out and describes the methodology that we developed for tracking students’ actions.

The abstract of the paper is:

Research into virtual field trips (VFTs) started in the 1990s but, only recently, the maturing technology of devices and networks has…

Lihat pos aslinya 95 kata lagi