22
Pengembangan Aplikasi Web GIS Papua Web Map Service (WMS) dengan MapServer dan OpenLayers Auriza Akbar 18 Januari 2012

Webgis MapServer OpenLayers Papua

Embed Size (px)

Citation preview

Page 1: Webgis MapServer OpenLayers Papua

Pengembangan Aplikasi Web GIS Papua

Web Map Service (WMS) dengan MapServer dan OpenLayers

Auriza Akbar

18 Januari 2012

Page 2: Webgis MapServer OpenLayers Papua

1 Instalasi MapServer for Windows (MS4W)

1.1 Download MS4W

• http://www.maptools.org/dl/ms4w/ms4w_3.0.3.zip (38 MB)

1.2 Unzip MS4W

Unzip ke direktori root suatu drive, misalnya C:/. Jika berhasil akan muncul direktori baru /ms4w.

1.3 Install Apache MS4W web server

Buka cmd.exe sebagai administrator dan jalankan skrip /ms4w/apache-install.bat.

C:\ms4w> apache-install.batInstalling the Apache MS4W Web Server serviceThe Apache MS4W Web Server service is successfully installed.Testing httpd.conf....Errors reported here must be corrected before the service can be started.httpd: Could not reliably determine the server's fully qualified domain name, using 127.0.0.1 for ServerNameThe Apache MS4W Web Server service is starting.The Apache MS4W Web Server service was started successfully.

Untuk menghilangkan pesan error di atas, edit /ms4w/Apache/conf/httpd.conf pada baris 173.

ServerName localhost:80

Restart Apache dengan menjalankan skrip /ms4w/apache-restart.bat.

1.4 Tes instalasi MS4W

Buka web browser and browse ke http://localhost. Jika berhasil akan muncul halaman utama MS4W.

Page 3: Webgis MapServer OpenLayers Papua

2 Persiapan Aplikasi Web Baru

2.1 Buat direktori aplikasi baru di /ms4w/apps/papua

2.2 Download library JavaScript dan CSS

Download library yang dibutuhkan di http://auriza.site40.net/upload/ lib-bootstrap-openlayers.zip dan unzip ke direktori /ms4w/apps/papua.

Library ini terdiri dari: OpenLayers 2.11, Twitter's Bootstrap 1.4.0, dan jQuery 1.7.1.

2.3 Buat mapfile kosong di direktori /ms4w/apps/papua/map

Buat file bernama papua.map di direktori tersebut. Panduan ini akan memakai data geografis dari provinsi Papua.

2.4 Download contoh data shapefile

Download shapefile yang digunakan http://auriza.site40.net/upload/ shp -papua .zip dan unzip ke direktori /ms4w/apps/papua/map.

2.5 Tambahkan konfigurasi Apache di /ms4w/httpd.d

Buat file bernama /ms4w/httpd.d/httpd_papua.conf dan isikan dengan konfigurasi Apache di bawah ini.

Alias /papua "/ms4w/apps/papua"

<Directory "/ms4w/apps/papua"> AllowOverride None Order Allow,Deny Allow from all</Directory>

<Directory "/ms4w/apps/papua/map"> Order Deny,Allow Deny from all</Directory>

SetEnv papua /ms4w/apps/papua/map/papua.map

2.6 Restart Apache

Jalankan skrip /ms4w/apache-restart.bat.

Page 4: Webgis MapServer OpenLayers Papua

3 Penulisan Mapfile SederhanaMapfile merupakan input bagi program MapServer. Mapfile berisi rincian sumber data geografis dan pewarnaan untuk data tersebut.

3.1 Struktur Mapfile

Secara umum, mapfile berisi satu objek map dengan beberapa layer. Proyeksi pada objek map merupakan proyeksi output, sedangkan proyeksi pada objek layer merupakan proyeksi data input.

3.2 Kerangka Dasar Mapfile

Berikut adalah kerangka dasar mapfile yang berisi objek map. Di dalam objek map dapat ditambahkan beberapa objek layer. Untuk contoh kali ini, objek layer masih kosong. Mapfile berisi objek dan pasangan key-value. Untuk objek map, key dan objek yang penting adalah name, extent, imagecolor, dan projection.

• name: nama mapfile, berikan nama yang singkat dan jelas.

• extent: batasan peta dalam satuan derajat desimal: xmin, ymin, xmax, ymax.

• imagecolor: warna background peta.

• projection: proyeksi output peta, biasanya ditulis dalam kode EPSG.

Komentar pada mapfile diawali dengan tanda pagar (#). Tiap objek harus ditutup dengan keyword end. Berikan indentasi supaya susunan objek dapat dibedakan dengan mudah.

Page 5: Webgis MapServer OpenLayers Papua

map name "papua" extent 134 -10 142 1 imagecolor 255 255 255

projection "init=epsg:4326" end

# tambahkan layer-layer di siniend

3.3 Penambahan Layer Administrasi

Untuk objek layer, key dan objek yang penting adalah name, status, type, data, projection, dan class.

• name: nama layer, berikan nama yang singkat dan jelas.

• status: pilihan apakah layer akan ditampilkan atau tidak.

• type: jenis data geografis pada layer ini.

• data: sumber data geografis, dalam contoh ini adalah lokasi penyimpanan shapefile.

• projection: proyeksi input layer ini.

• class: berisi informasi pewarnaan untuk setiap fitur.

Berikut adalah penulisan objek layer untuk data administrasi yang berjenis polygon.

layer name "adm" status on type polygon data "shp/Adm_2010_Papua.shp" projection "init=epsg:4326" end class name "Administrasi" style color 255 255 143 outlinecolor 255 255 255 end end end

3.4 Penambahan Layer HPH

Berikut adalah penulisan objek layer untuk data HPH yang berjenis polygon.

layer name "hph" status on type polygon data "shp/HPH_Papua.shp" projection "init=epsg:4326" end class name "HPH" style

Page 6: Webgis MapServer OpenLayers Papua

color 26 152 80 outlinecolor 102 189 99 end end end

3.5 Penambahan Layer HTI

Berikut adalah penulisan objek layer untuk data HTI yang berjenis polygon.

layer name "hti" status on type polygon data "shp/HTI_Papua.shp" projection "init=epsg:4326" end class name "HTI" style color 215 48 39 outlinecolor 244 109 67 end end end

3.6 Penambahan Layer HTI Pencadangan

Berikut adalah penulisan objek layer untuk data HTI Pencadangan yang berjenis polygon.

layer name "hti_c" status on type polygon data "shp/HTI_Pencadangan_Papua.shp" projection "init=epsg:4326" end class name "HTI Pencadangan" style color 253 174 97 outlinecolor 254 224 139 end end end

3.7 Pengujian Mapfile

Untuk menguji apakah mapfile yang kita buat sudah benar, buka browser dan akses langsung ke http://localhost/cgi-bin/mapserv.exe?map= papua &mode=map&layers=all&imgsize= 8 00+ 6 00 .

Page 7: Webgis MapServer OpenLayers Papua
Page 8: Webgis MapServer OpenLayers Papua

4 Penambahan Kemampuan WMS pada MapfileWMS penting untuk interoperabilitas dengan data dari server lain yang juga mendukung standar WMS. Untuk menambahkan kemampuan WMS, maka pada mapfile perlu ditambahkan metadata WMS pada objek map dan tiap objek layer. Pada tiap objek layer juga perlu ditambahkan template.

4.1 Metadata Objek map

Tambahkan metadata di bawah ini di dalam objek map.

web metadata "wms_title" "Kehutanan Provinsi Papua" "wms_onlineresource" "http://localhost/cgi-bin/mapserv.exe?map=papua&" "wms_srs" "EPSG:4326" "wms_enable_request" "*" "wms_feature_info_mime_type" "text/html" end end

4.2 Metadata Objek layer

Tambahkan metadata di bawah ini di dalam objek layer. wms_include_items berisi nama kolom di database yang bisa ditampilkan saat melayani query. Selain itu template diperlukan untuk mengembalikan hasil query GetFeatureInfo dalam format HTML. Pembuatan file template MapServer akan dijelaskan pada sub-bab selanjutnya.

Berikut adalah metadata dan template untuk layer administrasi.

metadata "wms_title" "Administrasi" "wms_include_items" "AMA_KABB_,Hectar_INT" end template "html/adm.html"

Berikut adalah metadata dan template untuk layer HPH.

metadata "wms_title" "HPH" "wms_include_items" "NM_HPH,AKTIFITAS,SK_AWAL_HP,STATUS_PER,LUAS_INT" end template "html/hph.html"

Berikut adalah metadata dan template untuk layer HTI. metadata "wms_title" "HTI" "wms_include_items" "Nama_HTI_1,Aktifitas,SK_Awal,Status_Per,Luas_INT" end template "html/hti.html"

Berikut adalah metadata dan template untuk layer HTI Pencadangan. metadata "wms_title" "HTI Pencadangan" "wms_include_items" "Nama_HTI,Luas_INT,SK_Pencada" end template "html/hti_c.html"

Page 9: Webgis MapServer OpenLayers Papua

4.3 Template HTML MapServer

Buat direktori baru di /ms4w/apps/papua/map/html untuk menyimpan file-file template HTML MapServer. Setiap file template MapServer harus memiliki string "MapServer Template" pada baris pertama. String dengan tanda kurung siku harus disesuaikan dengan nama kolom pada shapefile. Contoh template berikut akan menghasilkan tabel HTML dengan informasi layer untuk satu fitur.

4.3.1 Template Layer Administrasi

Buat file dengan nama /ms4w/apps/papua/map/html/adm.html untuk template layer administrasi dengan isi sebagai berikut.

<!-- MapServer Template --><table> <caption>ADMINISTRASI</caption> <thead> <tr> <th>Kabupaten</th> <th>Luas (ha)</th> </tr> </thead> <tbody> <tr> <td>[AMA_KABB_]</td> <td>[Hectar_INT]</td> </tr> </tbody></table>

4.3.2 Template Layer HPH

Buat file dengan nama /ms4w/apps/papua/map/html/hph.html untuk template layer HPH dengan isi sebagai berikut.

<!-- MapServer Template --><table> <caption>HPH</caption> <thead> <tr> <th>Nama</th> <th>Aktivitas</th> <th>SK Awal</th> <th>Kepemilikan</th> <th>Luas (ha)</th> </tr> </thead> <tbody> <tr> <td>[NM_HPH]</td> <td>[AKTIFITAS]</td> <td>[SK_AWAL_HP]</td> <td>[STATUS_PER]</td> <td>[LUAS_INT]</td> </tr> </tbody></table>

Page 10: Webgis MapServer OpenLayers Papua

4.3.3 Template Layer HTI

Buat file dengan nama /ms4w/apps/papua/map/html/hti.html untuk template layer HTI dengan isi sebagai berikut.

<!-- MapServer Template --><table> <caption>HTI</caption> <thead> <tr> <th>Nama</th> <th>Aktivitas</th> <th>SK Awal</th> <th>Kepemilikan</th> <th>Luas (ha)</th> </tr> </thead> <tbody> <tr> <td>[Nama_HTI_1]</td> <td>[Aktifitas]</td> <td>[SK_Awal]</td> <td>[Status_Per]</td> <td>[Luas_INT]</td> </tr> </tbody></table>

4.3.4 Template Layer HTI Pencadangan

Buat file dengan nama /ms4w/apps/papua/map/html/hti_c.html untuk template layer HTI Pencadangan dengan isi sebagai berikut.

<!-- MapServer Template --><table> <caption>HTI PENCADANGAN</caption> <thead> <tr> <th>Nama</th> <th>SK Pencadangan</th> <th>Luas (ha)</th> </tr> </thead> <tbody> <tr> <td>[Nama_HTI]</td> <td>[SK_Pencada]</td> <td>[Luas_INT]</td> </tr> </tbody></table>

Page 11: Webgis MapServer OpenLayers Papua

4.4 Mapfile Lengkapmap

name "papua" extent 134 -10 142 1 imagecolor 255 255 255

projection "init=epsg:4326" end

web metadata "wms_title" "Kehutanan Provinsi Papua" "wms_onlineresource" "http://localhost/cgi-bin/mapserv.exe?map=papua&" "wms_srs" "EPSG:4326" "wms_enable_request" "*" "wms_feature_info_mime_type" "text/html" end end

layer name "adm" status on type polygon data "shp/Adm_2010_Papua.shp" projection "init=epsg:4326" end metadata "wms_title" "Administrasi" "wms_include_items" "AMA_KABB_,Hectar_INT" end template "html/adm.html" class name "Administrasi" style color 255 255 143 outlinecolor 255 255 255 end end end

layer name "hph" status on type polygon data "shp/HPH_Papua.shp" projection "init=epsg:4326" end metadata "wms_title" "HPH" "wms_include_items" "NM_HPH,AKTIFITAS,SK_AWAL_HP,STATUS_PER,LUAS_INT" end template "html/hph.html"

Page 12: Webgis MapServer OpenLayers Papua

class name "HPH" style color 26 152 80 outlinecolor 102 189 99 end end end

layer name "hti" status on type polygon data "shp/HTI_Papua.shp" projection "init=epsg:4326" end metadata "wms_title" "HTI" "wms_include_items" "Nama_HTI_1,Aktifitas,SK_Awal,Status_Per,Luas_INT" end template "html/hti.html" class name "HTI" style color 215 48 39 outlinecolor 244 109 67 end end end

layer name "hti_c" status on type polygon data "shp/HTI_Pencadangan_Papua.shp" projection "init=epsg:4326" end metadata "wms_title" "HTI Pencadangan" "wms_include_items" "Nama_HTI,Luas_INT,SK_Pencada" end template "html/hti_c.html" class name "HTI Pencadangan" style color 253 174 97 outlinecolor 254 224 139 end end end

end

Page 13: Webgis MapServer OpenLayers Papua

4.5 Pengujian WMS

4.5.1 GetCapabilities

Request GetCapabilities akan mengembalikan dokumen XML yang berisi rincian kemampuan server dalam melayani permintaan serta daftar layer yang dapat diakses. Buka web browser dan akses URL di bawah untuk menguji request ini.

http://localhost/cgi-bin/mapserv. exe ?map=papua&SERVICE=WMS&REQUEST=Get Capabilities

4.5.2 GetMap

Request GetMap akan mengembalikan gambar peta sesuai dengan koordinat, ukuran, dan format yang diminta. Buka web browser dan akses URL di bawah untuk menguji request ini.

http://localhost/cgi-bin/mapserv. exe ?map=papua&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&LAYERS=adm,hph,hti,hti_c&FORMAT=image/png&SRS=EPSG:4326&BBOX=132,-10,142,0&WIDTH=512&HEIGHT=512

Page 14: Webgis MapServer OpenLayers Papua

4.5.3 GetFeatureInfo

Request GetFeatureInfo akan mengembalikan dokumen yang berisi informasi fitur pada titik tertentu pada peta. Format dokumen untuk contoh di bawah adalah HTML. Buka web browser dan akses URL di bawah untuk menguji request ini.

http://localhost/cgi-bin/mapserv.exe?map=papua&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=adm,hph,hti,hti_c&QUERY_LAYERS=adm,hph,hti,hti_c&INFO_FORMAT=text/html&SRS=EPSG:4326&BBOX=132,-10,142,0&WIDTH=512&HEIGHT=512&X=450&Y=3 0 0

ADMINISTRASI

Kabupaten Luas (ha)KAB. BOVEN DIGOEL 2506829

HPHNama Aktivitas SK Awal Kepemilikan Luas (ha)

PT.Bade Makmur Orissa Aktif 57/Kpts/-II/1993 Swasta 462600

Page 15: Webgis MapServer OpenLayers Papua

4.5.4 GetLegendGraphic

Request GetLegendGraphic akan mengembalikan simbol legenda untuk layer yang diminta. Request ini hanya dapat melayani permintaan untuk satu layer saja. Buka web browser dan akses URL di bawah untuk menguji request ini.

http://localhost/cgi-bin/mapserv.exe?map=papua&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetLegendGraphic&FORMAT=image/png&LAYER=hph

Page 16: Webgis MapServer OpenLayers Papua

5 Menampilkan WMS dengan OpenLayersOpenLayers digunakan untuk menampilkan peta dinamis dan interaktif dari server WMS.

5.1 Kerangka HTML

Buat file HTML dengan nama /ms4w/apps/papua/index.php.

<!DOCTYPE html><html lang="id"> <head> <meta charset="utf-8"> <title>WebGIS Kehutanan Papua</title> <link rel="stylesheet" href="lib/bootstrap.min.css" /> <link rel="stylesheet" href="lib/OpenLayers/theme/default/style.css" /> <style type="text/css"> html, body { background-color: #eee; } .container > footer p { text-align: center; } .container > .content { background-color: #fff; padding: 20px; margin: 0 -20px; border-radius: 0 0 6px 6px; box-shadow: 0 1px 2px rgba(0,0,0,.15); } .page-header { background-color: #f5f5f5; padding: 20px 20px 10px; margin: -20px -20px 20px; } #map { width: 680px; height: 420px; background-color: #7391ad; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.075); } </style> </head>

<body> <div class="container">

<div class="content"> <div class="page-header"> <h1>WebGIS Kehutanan Papua</h1> </div>

<div class="row"> <div class="span12"> <div id="map"></div> </div> <div class="span4"> <h3>Legenda</h3> </div> </div> </div>

<footer> <p>&copy; 2011 Dinas Kehutanan dan Konservasi Papua</p> </footer>

</div>

<script src="lib/jquery-1.7.1.min.js"></script> <script src="lib/bootstrap-twipsy.js"></script> <script src="lib/bootstrap-popover.js"></script> <script src="lib/OpenLayers/OpenLayers.js"></script> </body></html>

Page 17: Webgis MapServer OpenLayers Papua

Setelah itu browse ke http://localhost/papua. Jika benar akan muncul tampilan web seperti di bawah ini. Tampilan peta masih kosong karena kode OpenLayers belum ditambahkan.

5.2 Kode OpenLayers Dasar

Tambahkan kode JavaScript berikut ini di bagian paling bawah sebelum </body>. Kode berikut akan menampilkan peta Papua dalam satu layer WMS. Setelah itu, browse ke http://localhost/ papua .

Fungsi ini akan dijalankan pada saat loading halaman (window.onload) telah selesai. Penjelasan singkat fungsi ini baris-per-baris adalah sebagai berikut:

• membuat objek peta ( OpenLayers.Map(div) )

• membuat variabel url untuk menyimpan alamat WMS

• membuat layer WMS baru ( OpenLayers.Layer.WMS(title, url, params, options) )

• menambahkan layer tersebut ke peta

• menambahkan kontrol garis skala ke peta

• menambahkan kontrol pemilih layer ke peta

• mengeset lokasi dan zoom default peta

<script> window.onload = function() { var map = new OpenLayers.Map("map"); var url = "http://localhost/cgi-bin/mapserv.exe?map= papua& ";

var papua = new OpenLayers.Layer.WMS("Hutan Papua", url, { layers: "adm,hph,hti,hti_c", format: "image/png", bgcolor: "7391ad" }); map.addLayers([papua]);

map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.setCenter(new OpenLayers.LonLat(138, -4.5), 6); }; </script>

Page 18: Webgis MapServer OpenLayers Papua

5.3 Kode OpenLayers untuk Multiple Layers

Kode JavaScript berikut akan menampilkan peta Papua yang dipisahkan menjadi dua layer. Layer administrasi diset sebagai base layer, sedangkan layer lainnya diset sebagai overlay. Layer dengan parameter WMS transparent bernilai true otomatis menjadi overlay. Ubah kode di atas dengan kode di bawah ini. Setelah itu, browse ke http://localhost/ papua . Pemilihan layer dapat dilakukan dengan kontrol pemilih layer di kanan atas peta.

<script> window.onload = function() { var map = new OpenLayers.Map("map"); var url = "http://localhost/cgi-bin/mapserv. exe ?map=papua& ";

var adm = new OpenLayers.Layer.WMS("Administrasi", url, { layers: "adm", format: "image/png", bgcolor: "7391ad" }); var hph_hti = new OpenLayers.Layer.WMS("HPH, HTI", url, { layers: "hph,hti,hti_c", transparent: "true" }, { opacity: 0.8 }); map.addLayers([adm, hph_hti]);

map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.setCenter(new OpenLayers.LonLat(138, -4.5), 6); }; </script>

Page 19: Webgis MapServer OpenLayers Papua

5.4 Kode OpenLayers untuk GetFeatureInfo

Tambahkan kode JavaScript berikut ini untuk menambahkan kontrol GetFeatureInfo, sehingga jika peta diklik akan menampilkan informasi fitur pada tiap layer. Letakkan kode berikut setelah perintah map.addLayers(). Setelah menambahkan kode ini, browse ke http://localhost/ papua dan klik pada salah satu titik di peta untuk menampilkan info fitur.

var info = new OpenLayers.Control.WMSGetFeatureInfo({ layers: [adm, hph_hti], infoFormat: "text/html", maxFeatures: 1, queryVisible: true, eventListeners: { getfeatureinfo: function(e) { map.addPopup( new OpenLayers.Popup.FramedCloud( "popup", map.getLonLatFromPixel(e.xy), null, (function(text) { return (text == "") ? "." : text; }) (e.text), null, true )); }}}); map.addControl(info); info.activate();

Page 20: Webgis MapServer OpenLayers Papua

5.5 Menambahkan Layer WMS Online

Layer WMS dari server mana pun dapat ditambahkan ke aplikasi kita. Hal ini karena standar WMS menjamin interoperabilitas antar server, sehingga peta-peta dapat disatukan dengan mudah. Contoh kali ini memerlukan koneksi internet. Berikut adalah contoh penambahan WMS online dari MetaCarta. Setelah itu browse ke http://localhost/ papua dan ganti layer dasar peta ke MetaCarta.

var metacarta = new OpenLayers.Layer.WMS("MetaCarta", "http://vmap0.tiles.osgeo.org/wms/vmap0?", { layers: "basic", format: "image/png" }); map.addLayers([adm, metacarta, hph_hti]);

Page 21: Webgis MapServer OpenLayers Papua

5.6 Menambahkan Legenda

Legenda peta diambil dari request GetLegendGraphic ke server WMS. Legenda peta harus ditambahkan satu-per-satu untuk tiap layer. Tambahkan kode PHP dan HTML berikut ini setelah baris <h3>Legenda</h3>.

<h3>Legenda</h3><?php $wms_legend = htmlentities('http://localhost/cgi-bin/mapserv.exe' .'?map=papua&SERVICE=WMS&VERSION=1.1.1' .'&REQUEST=GetLegendGraphic' .'&FORMAT=image/png&LAYER=');?> <img src="<?php echo $wms_legend; ?>adm" /><br /> <img src="<?php echo $wms_legend; ?>hph" /><br /> <img src="<?php echo $wms_legend; ?>hti" /><br /> <img src="<?php echo $wms_legend; ?>hti_c" />

5.7 Menambahkan Popover pada Legenda

Popover akan menampilkan informasi singkat jika mouse berada tepat di atas (hover) pada salah satu gambar legenda. Ubah kode untuk legenda di atas dengan kode berikut ini.

<h3>Legenda</h3><?php $wms_legend = htmlentities('http://localhost/cgi-bin/mapserv.exe' .'?map=papua&SERVICE=WMS&VERSION=1.1.1' .'&REQUEST=GetLegendGraphic' .'&FORMAT=image/png&LAYER='); $info['hph'] = 'Hak untuk mengusahakan hutan di dalam suatu kawasan' .' hutan yang meliputi kegiatan penebangan kayu,' .' pemudaan dan pemeliharaan hutan, pengolahan dan' .' pemasaran hasil hutan menurut ketentuan-ketentuan' .' yang berlaku.'; $info['hti'] = 'Sebidang luas daerah yang sengaja ditanami dengan' .' tanaman industri dengan tipe sejenis dengan tujuan' .' menjadi sebuah hutan yang secara khusus dapat' .' dieksploitasi tanpa membebani hutan alami.'; $info['hti_c'] = 'Hutan yang akan dipersiapkan untuk menjadi HTI.';?>

Page 22: Webgis MapServer OpenLayers Papua

<img src="<?php echo $wms_legend; ?>adm" /><br /> <a href="#" class="legend-popover" title="Hak Pengusahaan Hutan" data-content="<?php echo $info['hph']; ?>"> <img src="<?php echo $wms_legend; ?>hph" /></a><br /> <a href="#" class="legend-popover" title="Hutan Tanaman Industri" data-content="<?php echo $info['hti']; ?>"> <img src="<?php echo $wms_legend; ?>hti" /></a><br /> <a href="#" class="legend-popover" title="HTI Pencadangan" data-content="<?php echo $info['hti_c']; ?>"> <img src="<?php echo $wms_legend; ?>hti_c" /></a>

Kemudian, tambahkan kode JavaScript berikut ini pada bagian paling bawah, sebelum tag </body>. <script> $(function () { $(".legend-popover") .popover({ placement: "below" }) .click( function(e) { e.preventDefault() }) }) </script>