Arsip Tag: MapServer

Add UMS MapServer tile into SAS.Planet

bahagia itu sederhana, berhasil memasukkan ubin yang dilayan oleh UMS MapServer / MS4W (MapServer for Windows), ke SAS.Planet.

Caranya? Sila lihat laman selanjutnya …

Lanjutkan membaca Add UMS MapServer tile into SAS.Planet

Iklan

MapServer Tile LabelItem selalu kepotong

Saat kita menggunakan MapServer untuk meng-overlay ubin dari Google, yang sering jadi masalah adalah label-nya yang sering terpotong.

Anda bisa lihat yang terpotong di sini:

labelitem_terpotong

 

Seperti terlihat bahwa ada beberapa nama kecamatan yang terpotong, karena sebenarnya gambar kita adalah sebuah ubin 256×256 pixel masing-masingnya, sehingga label item sering terpotong.

 

Solusi untuk masalah di atas adalah dengan menambahkan dua beris berikut pada berkas MAP kita:

    PARTIALS FALSE
    FORCE FALSE

perintah tersebut di sisipkan di bagian LABEL yang di dalam CLASS, contoh:

      LABEL
        FONT "arial"
        SIZE 8
        OFFSET 0 0
        OUTLINECOLOR 128 255 255
        POSITION CC
        SHADOWCOLOR 128 128 128
        SHADOWSIZE 1 1
        TYPE TRUETYPE
    PARTIALS FALSE
    FORCE FALSE        
        
      END # LABEL

Hasilnya adalah sebagai berikut:

labelitem_tidakterpotong

Perhatikan bahwa label semakin sedikit, namun tidak ada lagi yang terpotong

 

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 …

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