Tile

Sedikit kecewa dengan ubuntu yang tidak lagi dukung php-mapscript. Mumpung belum tidur, sudah jam 4:09, saya sempatkan check lagi penggunaan tile overlay nya Google Maps API ImageMapType.

Kali ini yang jadi server adalah linux ubuntu saya …

Persiapan perang:

Yang perlu di ingat:

Mod Rewrite belum enable secara default, jadi harus di-enable

# a2enmod rewrite
Enabling module rewrite.
To activate the new configuration, you need to run:
  service apache2 restart
# service apache2 restart

 

Yang harus diingat lagi:

AllowOverride None untuk /var/www/html secara default, jadi kalau menggunakan .htaccess, harus diubah jadi all

# vi apache2.conf

# service apache2 reload

karena cuma konfig, cukup dengan reload

Nah, kali ini saya coba demokan meng-overlay tile dari MapServer di atas petanya Google.

Caranya, buat sebuah file .map untuk mengutak-atik MapServer. Saya buat dengan MapServer MapManager

ubah path layer dari MapManager agar sesuai dengan linux. Jika Anda tidak menggunakan Font dan Symbols, settingan MapManager bisa dihapus.

  LAYER 
    #CONNECTION "D:\\ms4w\\apps\\belajar\\anita\\uin.shp" 
    CONNECTION "/var/www/html/anita/uin.shp" 
    CONNECTIONTYPE OGR 
    METADATA 
      "coordsys_name"    "Longitude-Latitude / WGS 84" 
    END # METADATA 
    NAME "uin" 
    PROJECTION 
      "proj=longlat" 
      "datum=WGS84" 
      "no_defs" 
    END # PROJECTION 
    STATUS ON 
    TEMPLATE "query" 
    TILEITEM "location" 
    OPACITY 97 
    TYPE POLYGON 
    UNITS METERS 
    CLASS 
      NAME "Class (0)" 
      STYLE 
        COLOR 128 128 255 
        OUTLINECOLOR 0 0 0 
        SIZE 8 
      END # STYLE 
      TEMPLATE "query.html" 
    END # CLASS 
  END # LAYER

Meletakkan file .map Anda di bawah DocumentRoot apache sebenarnya tidak bagus, tapi ndak pa pa dulu lah …

 

Untuk kode HTML tile overlay, dapat dilihat dari sample yang diberikan oleh google, dengan diubah pusat petanya, center nya menjadi kampus UIN Suska Riau di Panam:

var uin = new google.maps.LatLng(0.46601659577186577,101.35602845631412); 
// max 6 angka di belakang koma sih

lalu, bagian overlaynya:

  var imageMapType = new google.maps.ImageMapType({ 
    getTileUrl: function(coord, zoom) { 
           var url = "http://localhost/cgi-bin/mapserv?"; 
           url += "map=/var/www/html/anita/uin.map&"; 
           url += "mode=tile&"; 
           url += "layers=uin&"; 
           url += "tilemode=gmap&"; 
           url += "TRANSPARENT=TRUE&"; 
           url += "tile=" + coord.x + " " + coord.y + " "+zoom; 
        return url;

    }, 
    tileSize: new google.maps.Size(256, 256) 
  });

Demo bisa dilihat di sini:

screenshot-from-2016-12-19-04-25-09

Namun, seperti terlihat di gambar, URL gambar ubin kita, tile kita sangat jelek , karena ada

/cgi-bin/mapserv?map=/var/www/html/anita/uin.map&mode=tile&layers=uin&tilemode=gmap&TRANSPARENT=TRUE&tile=204879%20130732%2018

Nah, dengan bantuan Mod Rewrite, kita sulap URL yang panjang ini menjadi cantik, caranya dengan membuat .htaccess, lalu tambahkan baris berikut:

root@Aspire-E1-471G:/var/www/html# cat .htaccess
RewriteEngine on
RewriteBase /
RewriteRule ^uin/(.*)-(.*)-(.*)\.png$ “/cgi-bin/mapserv?map=/var/www/html/anita/uin.map&mode=tile&layers=uin&tilemode=gmap&tile=$2 $3 $1” [L]

Nah, sekarang bisa dilihat bahwa ubin kita bisa dipanggil dengan URL yang lebih bersih, yaitu, zoom-x-y.png

screenshot-from-2016-12-19-04-32-48

Iklan

One thought on “Tile”

Komentar ditutup.