Arsip Tag: MapServer

shptree untuk membuat Spatial Index SHP

Kalau Anda bekerja dengan SHP file yang besar, seharusnya akan lebih cepat diakses jika dibuatkan terlebih dahulu berkas Spatial Index nya. Dengan dibuatkan indexnya, piranti GIS seperti MapServer akan lebih cepat dalam menampilkan SHP file yang besar. Anda dapat menggunakan tools shptree [1]. Tools ini ada juga di MS4W, dan dapat Anda jalankan di konsol CMD Anda dengan syarat menjalankan dahulu batch file untuk SET Environment Variables.

Lihat gambar berikut, dari menu RUN, ketik CMD, maka akan terbuka konsol CMD.EXE Anda:

 

cmd shptree is not recognized.jpg

Nah, terlihat bahwa perintah shptree belum dikenal oleh CMD, sehingga Anda tidak dapat melakukannya,

Solusinya, Anda harus memanggil dahulu berkas \ms4w\setenv.bat, yang berguna untuk melakukan SET PATH, yaitu memberitahu CMD, dimana PATH  atau lokasi berkas EXE berada.

set environtment variable for ms4w.jpg

Setelah diset pathnya, otomatis CMD berhasil menemukan perintah shptree.exe.

 

OK, sekarang setelah kita berhasil memanggil perintah shptree, kita butuh membuat index untuk berkas SHP kita, caranya cukup dengan perintah

shptree namafile.shp

Contoh kasus adalah SHP gedung dari OSM (Open Street Map) seluruh Indonesia yang ukurannya 600MB, nah kita dapat buatkan indexnya, sehingga nanti akan lebih cepat dalam melakukan query (well ndak juga sih … hehehehe … karena datanya kurang bagus). Lihat gambar berikut biar jelas …

shptree buildings sampai 200mb.jpg

Terlihat SHP buildings ada sekitar 616MegaByte … super guedde … dan itu data tahun 2016, belum donlot yang baru …

kita buatkan index nya … dan ukuran indexnya pun cukup gede … 200MB

 

[1] https://trac.osgeo.org/mapserver/wiki/ShpTree

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