Arsip Tag: Google Map

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

Iklan

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?”;
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