Arsip Tag: tile

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

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 …