Membangun interface web GIS menggunakan Opengeo ClientClient-SDK Mar 24, 2013 ~ Leave a Comment ~ Written by awahyudi Graphical User Interface merupakan komponen yang penting dalam development aplikasi webgis. Karena lewat media web mapping ini data-data GIS dapat ditampilkan dan disampaikan kepada user. Opengeo suite, selain telah menyediakan aplikasi GeoExplorer, juga telah mem-bundle tool untuk megembangkan web mapping yaitu ClintSDK. Aplikasi web semacam GeoExplorer dapat dibuat dicustomisasi dengan cepat dan mudah dalam format Rich Internet Application (RIA) dengan kemampuan komunikasi yang mengikuti standar OGC Web Service. Seiring dengan kemajuan teknologi Web 2.0 dengan jargon RIA, AJAX, web service dll aplikasi web-pun tampil dengan modus yang lebih interaktif dan mudah digunakan. Beberapa AJAX Framework dikembangkan untuk kebutuhan ini misalkan ExtJs, JQuery, Dojo Toolkit, YUI dll. Aplikasi web mapping juga menjadikan framework ini sebagai fondasi untuk mengmbangkan view-layer seperti GeoMoose dan ArcGIS memanfaatkan Dojo, GeoXt dan GXP menggunaan ExtJs, MapBender memanfaatkan JQuery. Client-SDK adalah Client-SDK adalah development tool untuk mengembangkan aplikasi ber basis GXP dan GeoExt GeoExt.. Kedua library ini dikembangkan dari framework ExtJs framework ExtJs dengan memberikan kemampuan bekerja dengan data-data spatial pada sisi client/web browser. Sebagai inti dari aplikasi ini adalah OpenLayers yang digunakan sebagai canvas untuk menampilkan data-data spatial tersebut menjadi bentuk visual layer peta. 1. Membuat project Client-SDK 2. Review code dari project yang digenerate 3. Customisasi Interface 1. Membuat project Client-SDK
1 2 3 4 5 6 7 8 9 10 11
>suite-sdk create mywebgis Creating application ... Buildfile: C:\GIS\OpenGeo\OpenGeo Suite\sdk\build.xml checkpath: create: Created dir: D:\GIS\Code\mywebgis Copying 1043 files to D:\GIS\Code\mywebgis Created application: D:\GIS\Code\mywebgis BUILD SUCCESSFUL Total time: 1 second
Struktur Project
1 2 3 4 5 6
+---mywebgis +---src ¦ +---app ¦ +---app.js ¦ +---ext ¦ +---geoext ¦ +---gxp
7 8 9 10 11 12
T
¦ +---openlayers ¦ +---ux +---theme ¦ +---app +---index.html
Dalam struktur project diatas src/ext, src/geoext, src/gxp, src/openlayers, src/ux adalah folder library ExtJs, GeoExt, GXP, OpenLayers dan UX. Library ini akan di-load disisi client oleh aplikasi/web browser. Fungsi library dapat dibaca pada dokumnetasi masing-masing. Folder theme, sebagaimana namanya untuk membangun theme dari CSS. Sisanya index.html dan src/app/app.js, inilah dua file menjadi tanggung jawab developer web apping untuk dicustomisasi. Untuk melihat tampilan project yang telah dibuat jalankan perintah suite-sdk debug, pastikan geoserver sudah berjalan pada address:port localhost:8080.
1 2 3 4 5
>suite-sdk debug -g http://localhost:8080/geoserver mywebgis Starting debug server for application (use CTRL+C to stop) Buildfile: C:\GIS\OpenGeo\OpenGeo Suite\sdk\build.xml checkpath: debug:
Tampilan awal
2. Code review
Pada saat aplikasi berjalan maka file pertama yang akan dijalankan adalah index.html. Potongan index.html dapat dilihat pada code dibawah
1 2 3 4 5 6 7 8 9 10 11 12 13
index.html .................. <script type="text/javascript" src="src/ext/adapter/ext/extbase.js"> <script type="text/javascript" src="src/ext/ext-all.js"> .................. <script type="text/javascript" src="lib/app.js"> ..................
Dari cuplikan index.html diatas terlihat bahwa index.html hanya diisi pada bagian sedangkan bagian justru dibiarkan kosong. Bagian merupakan lokasi untuk melakukan include script, biasanya CSS dan javascript. Script ext-base.js dan ext-all.js adalah script utama ExtJs, sedang lib/app.js adalah javascript yang dibuatkan oleh Client-SDK pada saat aplikasi akan di-debug atau di-deploy di server. Script lib/app.js bisa kita buka pada saat debug seperti proses diatas, Buka aplikasi di web browser lalu dengan klik kanan->view source kemudian buka link lib/app.js. Potongannya bisa dilihat dibawah lib/app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14
(function() { var jsfiles = ['@/src/gxp/script/util.js', '@/src/openlayers/lib/OpenLayers/SingleFile.js', ....... '@/src/geoext/lib/GeoExt/widgets/MapPanel.js', ........ '@/src/gxp/script/plugins/LayerTree.js', ..... '@/src/ux/RowExpander.js', ...... '@/src/app/app.js']; ...... })();
Script lib/app.js ini berfungsi sebagai loader dari library/script yang dibutuhkan seperti yang telah disebutkan dan terakhir meng-include /src/app/app.js. File inilah yang akan selanjutnya akan dimodofikasi untuk membangun webmapping interface. src/app/app.js
Script src/app/app.js merupakan javascript dalam format source code ExtJs, yang lebih mirip script konfigurasi daripada algoritma pemrograman, format konfigurasi ini memang salah satu kemudahan dari ExtJs. Isinya mendefinisikan sebuah class utama yaitu gxp.Viewer yang merupakan viewport/mainwindow dari interface web. Konfigurasi meliputi: 1. layout Border layout merupakan layout yang membagi panel (gxp.Viewer) menjadi 5 area, yaitu: north, west, south, east dan center
2. region Region adalah lokasi komponen (gxp.Viewer) didalam parent-nya ( html) 3. items Berisi list object/komponen berupa panel atau container yang dipasang pada gxp.Viewer, lokasinya diatur sesuai dengan region masing-masing. Secara default akan dibuat dua komponen utama yaitu centerpanel (panel) dan westpanel (container).
1 2 3 4 5 6 7 8 9 10 11 12 13 14
items:[{ id:"centerpanel", xtype:"panel", layout:"fit", region:"center", border:false, items:["mymap"] },{ id:"westpanel", xtype:"container", layout:"fit", region:"west", width:200 }]
4. tools Berisi list gui kontrol, secara default meliputi gxp_layertree (gxp.plugins.LayerTree), gxp_addlayers (gxp.plugins.AddLayers), gxp_removelayer (gxp.plugins.RemoveLayer), gxp_zoomtoextent (gxp.plugins.ZoomToExtent), gxp_zoom (gxp.plugins.Zoom), gxp_navigationhistory (gxp.plugins.NavigationHistory). actionTarget adalah lokasi dipasangnya kontrol tsb, yaitu tbar(top bar parent) dan bbar (bottom bar parent). xtype adalah namespace yang didefiniskan oleh ExtJs, sedang ptype adalah namespace yang dibuat gxp untuk memberi nama komponen-komponen gxp.plugins. gxp_layertree dipasang pada westpanel, sehinga terlihat pada sisi kiri aplikasi terdapat daftar layer dengan bentuk tree.
1 2
tools:[{ ptype:"gxp_layertree",
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
outputConfig:{ id:"tree", border:true, tbar:[] // we will add buttons to "tree.bbar" later }, outputTarget:"westpanel" },{ ptype:"gxp_addlayers", actionTarget:"tree.tbar" },{ ptype:"gxp_removelayer", actionTarget:["tree.tbar", "tree.contextMenu"] },{ ptype:"gxp_zoomtoextent", actionTarget:"map.tbar" },{ ptype:"gxp_zoom", actionTarget:"map.tbar" }, { ptype:"gxp_navigationhistory", actionTarget:"map.tbar" } ]
5. sources Menyatakankan sumber/server yang menyediakan layanan GIS baik WMS, WFS atau layanan map lain seprti OSM, Bing, Google, MapQuest.
1 2 3 4 5 6 7 8 9 10 11
// layer sources sources:{ local:{ ptype:"gxp_wmscsource", url:"/geoserver/wms", version:"1.1.1" }, osm:{ ptype:"gxp_osmsource" } }
6. map Konfigurasi layer dengan sumber seperti yang telah disebutkan dalam config sources.
1 2 3 4 5
// map and layers map:{ id:"mymap", // id needed to reference map in portalConfig above title:"Map", projection:"EPSG:900913", center:[-10764594.758211, 4523072.3184791],
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
zoom:3, layers:[{ source:"osm", name:"mapnik", group:"background" },{ source:"local", name:"usa:states", selected:true } ], items:[ { xtype:"gx_zoomslider", vertical:true, height:100 } ] }
3.Customisasi Interface
Sejauh ini belum ada satu barispun yang ditambahkan pada code yang di-generate. Sedikit perubahan akan kita buat yaitu menambahkan banner/logo pada bagian atas halaman sert a menambahkan layer dari geoserver local. 1. Membuat banner/logo Banner biasanya berada di bagian atas halaman yang berisi logo dan nama situs. Seperti yang telah dijelaskan bahwa main-window dibuat menggunakan gxp.Viewer dan layout aplikasi dibangun menggunakan border layout. Maka untuk menambahkan banner dibuat item/komponen baru pada konfigurasi items, komponen yang dibuat nmempunyai xtype panel, id northpanel, region north, dan berisi logo dan judul Forum IT ESDM.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
items:[{ id:"northpanel", xtype:"panel", region:"north", html:"
Foru Mineral
", layout:"fit", bodyCfg: {style:'background-color:#6688DD'} },{ id:"centerpanel", ..... ..... }]
Jalankan kembali suite-sdk debug mywebgis dan buka kembali halaman web mapping.
2. Menambahkan layer dari geoserver local Dari latihan sebelumnya sudah dibuat layer batas-batas adminitrasi Indonesia, peta ini yang akan ditambahkan pada aplikasi web yang baru saja dibuat. Pertama pastikan bahwa server local sudah didaftarkan pada konfifurasi sources, beruntung client-sdk sudah mebambahkan baris ini.
sources:{ local:{ ptype:"gxp_wmscsource", url:"/geoserver/wms", version:"1.1.1" }, ...... }
lalu tambahkan layer yang akan ditampilkan pada konfigurasi layers pada komfigurasi maps->layers
map:{ ...... layers:[{ source:"osm", ..... },{ source:"local", name:"indonesia:country" },{ source:"local", name:"indonesia:provinces" },{ source:"local", name:"indonesia:districts" } ], ...... }
Demikian pengenalan singkat tentang client-sdk. Pada tulisan selanjutnya akan dibahas gxp.plugins yang lain dan base layer menggunakan google dll
