[Arcgis] Riset ArcGIS JS & Flex

5/24/2018 [Arcgis] Riset ArcGIS JS & Flex

1/46

ArcGIS API untuk Flex

ArcGIS API untuk Flex merupakan sebuah API dari ArcGIS yang memungkinkan user

untuk membuat applikasi dengan Arcgis berbasis flex. Dengan menggunakan API ini, kita dapat

membuat peta dengan menggunakan ArcGIS.

Untuk dapat menggunakan ArcGIS API kedalam flex, diperlukan untuk menambahkan

ArcGIS flex library yang berbentuk .swc kedalam project flex yang kita buat. Apabila project

ArcGIS ini dicompile, maka akan menghasilkan dua buah file yaitu sebuah file flash (.swf) dan

sebuah file html yang dimana didalamnya diembed file flash yang dibuat sebelumnya.

Aplikasi dengan bentuk flash player ini, tentunya dapat digunakan pada online (.html)

ataupun pada desktop (.swf). Koneksi internet tetap dibutuhkan apabila layer peta yang

digunakan didapat dari map service.

Membuat peta dengan Flex

Untuk dapat membuat peta dengan menggunakan flex, perlu dipersiapkan terlebih

dahulu file-file yang diperlukan. File pertama yang dibutuhkan ada tool untuk membuat sebuah

project berbasis Flex. Tool yang disarankan untuk digunakan ada Flash Builder. File kedua yang

dibutuhkan adalah ArcGIS API untuk Flex yang berupa sebuah file .swc. Setelah file API dan tool

untuk membuat aplikasi flex ini disediakan maka kita dapat memulai untuk membuat sebuah

apilkasi flex untuk menampilkan peta dengan menggunakan ArcGIS API. Berikut adalah langkah-

langkah yang diperlukan untuk membuat peta ArcGIS berbasis flex.

1. Buka Flash Builder, kemudian pilih File > new > Flex Project.2. Masukkan project name, pilih tipe project sebagai web, dan gunakan default flex sdk

kemudian pilih next.

3. Pada bagian server setting, pastikan server type adalah none, kemudian pilih next.4. Pada bagian selanjutnya pastikan component set adalah Mx + Spark.5. Tekan Finish.6. Klik kanan pada project kemudian pilih propertiest.7. Pada bagian Flex Build Path, pada tab library path, pilih add swc dan kemudian pilih

ArcGIS API library yang bertipe swc.

8. Pada file utama .mxml, deklarasikan referensi esri pada bagian awal seperti padatampilan coding dibawah ini.


2/46

layout="absolute">. . . . . . . . . . .

9. Kemudian tambahkan coding untuk menggunakan map kedalam aplikasi seperti codingdibawah ini.

10.Jalan kan project dengan menekan button Run.

Gambar 1

Tampilan Html dari Flex Project

Layer

Pada ArcGIS API untuk flex, terdapat banyak tipe layer yang dapat ditambahkan kedalampeta. Layer-layer yang dapat ditambahkan kedalam peta ini terbagi menjadi dua kategorisasi

utama yaitu basemap layer dan operational layer. Basemap Layer adalah layer yang

sebelumnya sudah dibuat yang dapat dijuga disebut sebagai TiledLayer. Basemap layer memiliki

beberapa jenis layer yaitu :

ArcGISTiledMapServiceLayer OpenStreetMapLayer


3/46

WMTSLayer VETiledLayer ArcGISLocalTiledLayer WebTiledLayer

Basemap layer cenderung relatif statis dan biasanya jarang diperbarui. Umumnya, kitadapat menggunakan basemap layer sebagai layer dasar untuk menampilkan data-data dari

Operational Layer lainnya. Operational Layer berfokus pada data yang sifatnya dinamic. Dengan

kata lain data yang digunakan akan berubah-ubah jauh lebih sering dibandingkan dengan

basemap layer . Operational Layer dibedakan menjadi dua jenis lagi yaitu Server-Side Image

Results dan Client-Side Graphics. Yang membedakan dari dua jenis ini adalah lokasi dimana

layer tersebut akan dibuat. Bila pada server side layer akan dibuat didalam server, maka pada

client-side layer akan dibuat pada desktop. Server Side Image beberapa jenis layer yaitu :

ArcGISDynamicMapServiceLayer. ArcGISImageServiceLayer. GPResultImageLayer. WMSLayer. ArcIMSMapServiceLayer.

Sedangkan Client-Side Graphics terdiri dari beberapa jenis juga yaitu :

GraphicsLayer. FeatureLayer. CSVLayer. GeoRSSLayer. KMLLayer.

Untuk menambahkan peta kedalam flex dapat dilakukan secara mudah dengan

menambahkan beberapa baris code seperti pada contoh dibawah ini kedalam esri map.

esri:ArcGISTiledMapServiceLayerurl="http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"/>


4/46

Coding diatas akan menampilkan empat layer yang akan ditambahkan kedalam peta

didalam apilkasi flex yang kita buat sebelumnya. Berikut adalah tampilan setelah project flex ini

dijalankan.

Gambar 2

Tampilan Hasil Gabungan beberapa Layer didalam Flex

Untuk Feature Layer dapat dilakukan dengan menambahkan beberapa parameter

seperti yang dapat dilihat pada code berikut ini.

Membuat marker symbol

Untuk membuat marker didalam ArcGIS untuk Flex juga dapat dilakukan dengan mudah.

Untuk membuat sebuah marker, diperlukan terlebih dahulu tampilan marker yang akan kita

buat. Untuk dapat melakukan setting symbol marker, dapat dilakukan sesuai dengan potongan

coding dibawah ini.

Dengan memberikan coding diatas, maka kita telah membuat sebuah tampilan marker

dengan Id "mySymbol". Kita dapat membuat berbagai macam bentuk symbol yang kita inginkan

untuk ditambahkan kedalam peta. Untuk menambahkan symbol kedalam peta dapat dilakukan

sesuai dengan potongan coding dibawah ini kedalam esri map.


5/46

Dengan menggunakan potongan coding diatas maka akan ditampilkan empat symbol

yang tampilannya dibuat sesuai dengan potongan coding untuk membuat tampilan symbol.

Diasumsikan pada peta telah terdapat basemap layer yang sudah ditambahkan, maka apabila

ditambahkan kedua potongan coding diatas maka tampilan peta akan tampak seperti pada

gambar berikut ini.

Gambar 3

Tampilan Hasil Pembuatan Symbol Marker


6/46

KML layer

KML layer merupakan fitur yang sering digunakan didalam pembuatan GIS. Untuk dapat

membuat layer bedasarkan file KML pada ArcGIS API untuk Flex ini diperlukan KML Layer. KML

layer akan membuat layer bedasarkan file KML yang dibaca pada suatu URL. Proses pembacaanini harus dilakukan secara asynchronous. Untuk membuat aplikasi secara asynchronous pada

aplikasi flex yang kita buat perlu dilakukan dengan beberapa cara berikut ini.

1. Buatlah State aplikasi saat ini dan deklarasikan state awal untuk aplikasi yang kita buat.

2. Buat sebuah coding action script untuk menghandle apabila KML Layer telah selesaidimuat sesuai dengan coding dibawah ini.

importcom.esri.ags.events.LayerEvent;importmx.controls.Alert;

protectedfunctionlower48Reflectivity_loadHandler(event:LayerEvent):void{

currentState = 'mainState';}

protectedfunctionlower48Reflectivity_loadErrorHandler(event:LayerEvent):void{

if(event.fault){

Alert.show(event.fault.faultDetail + "\n"+event.fault.faultString);

}}

]]>

3. Buat sebuah layout dimana layout ini akan digunakan sebagai tampilan loading ketika

proses pemuatan file KML berlangsung. Berikut dapat dilihat coding pembuatan layout

tersebut.

@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";


7/46

@namespace esri "http://www.esri.com/2008/ags";esri|Navigation{

left: null;right: 20;

}s|Panel{

backgroundColor: #3D78FF;chromeColor: #2B0D66;backgroundAlpha: 0.8;color: #FFFFFF;

}

4. Buat sebuah tampilan loading yang menggunakan layout yang telah dibuat sebelumnyaseperti dengan contoh kode dibawah ini.

5. Buat sebuah map yang memiliki basemap layer6. Tambahkan KML layer kedalam map dengan contoh seperti coding dibawah ini.

Potongan coding diatas adalah cara untuk menambahkan KML layer kedalam map. Ada

beberapa parameter yang diperlukan seperti yang dapat dilihat pada potongan coding

diatas. Parameter-parameter ini adalah Id dari KML Layer ini, load yang berisikan

function apabila KML layer telah sukses ditampilkan (Function yang telah dibuat pada

langkah ke 2), function apabila KML layer gagal untuk ditampilkan (Function yang


8/46

sebelumnya telah dibuat pada langkah ke 2), Nama KML Layer, dan URL tempat KML

layer berada.

7. Jalankan Project. Apabila dilakukan sesuai dengan langkah-langkah tadi, maka tampilanaplikasi akan tampak seperti gambar-gambar berikut ini.

Gambar 4

Tampilan Progress bar

Gambar 5

Tampilan KML Layer pada peta

Editting Feature tanpa Editor

ArcGIS API untuk flex dan javascript sama-sama memiliki kemampuan untuk melakukan

edit data geographic didalam web. Dikarenakan web browser adalah sebuah aplikasi yang


9/46

sudah sangat umum saat ini, maka aplikasi editing GIS berbasis web dapat digunakan oleh

banyak orang untuk melakukan edit dari data-data geography kita.

Untuk melakukan editing tanpa, ada beberapa komponen-komponen yang harus kita

ketahui sebelumnya. Komponen-komponen ini adalah :

Feature ServiceUntuk melakukan proses editting pasti diperlukan feature service yang

menyediakan gambar-gambar symbol beserta data geometry yang dimilikinya. Feature

Service adalah sebuah map service yang memiliki kemampuan fitur akses yang dapat

membuat map service tersebut untuk mengekspos fitur geometri dan simbol mereka

dengan cara yang mudah pada aplikasi Web untuk digunakan dan diupdate.

Sebelum melakukan edit, kita perlu membuat sebuah feature service terlebih

dahulu dimana didalamnya terdapat terdapat simbol-simbol dan atribut-atribut.

Apabila kita ingin menggunakan feature service yang telah dibuat sebelumnya, kitadapat melakukan publish kedalam ArcGIS server dengan option kemampuan Feature

Access disediakan. Selain membuat sendiri feature service, kita juga dapat mengakses

feature service dari template-template feature service yang sudah disediakan oleh

ArcGIS.

Setelah feature service dipublish dan dapat diakses dengan API web, maka

feature service tersebut dapat diakses dengan menggunakan feature layer. Feature

layer kemudian akan menampilkan data-data feature kedalam peta yang digunakan.

Geometry ServiceGeometry Service pada ArcGIS server dapat membantu kita untuk melakukan

operasi editing umum seperti membuat , memotong , dan membentuk kembali fitur

geography. Sebelum kita melakukan editting, kita perlu membuat sebuah Geometry

Service pada ArcGIS server kita. Service ini harus digunakan apabila kita menggunakan

Editor Component dalam proses editting. Apabila kita tidak menggunakan Editor

Component , service ini juga dapat membantu kita untuk membuat editing tools sesuai

dengan kebutuhan kita.

Edit ToolEdit Tool digunakan untuk melakukan pemindahan lokasi gambar feature atau juga

dapat melakukan perubahan terhadap attribute feature yang ingin diakses. Kita jugadapat menambahkan logika edit kita sendiri didalam tool ini.

Draw ToolDraw Tool digunakan untuk menggambar sebuah fitur baru. Feature yang dapat

ditambahkan, didapat dari Template Picker yang mendapat data dari Feature Template.


10/46

Setelah kita mengetahui akan komponen-komponen yang dibutuhkan untuk melakukan

proses editing, kita dapat mulai untuk membuat sebuah aplikasi editing dengan menggunakan

ArcGIS untuk Flex. Agar mempermudah dokumentasi ini, proses pembuatan editting ini akan

dibagi menjadi dua bagian yaitu bagian code Flex dan bagian code ActionScript. Pada bagian

code flex akan dibagi menjadi 2 bagian yaitu bagian Inisialisasi dan bagian map. Sedangkanpada Bagian Actionscript akan berisi banyak coding mengenai function-function void (method)

yang diperlukan untuk melakukan insert, edit, dan delete symbol.

Editing (Flex : Inisialisasi)

Referensi Esri pada markup file MXML

......

Potongan coding diatas berfungsi untuk mereferensikan file yang kita buat

terhadap esri. Pada bagian ini juga akan di jalankan sebuah function ketika file telah

selesai untuk dibuat.

Inisialisasi Tool-tool dan query

Potongan coding diatas berfungsi membuat Drawtool dengan sebuah event dan

map yang akan dihandle, edit tool dengan event-event dan map yang akan dihandle,

dan query yang nantinya akan digunakan untuk melakukan proses query didalam peta .


11/46

Pembuatan Layout ControlBar

Potongan coding diatas berfungsi layout yang akan digunakan didalam control

bar.

Pembuatan ControlBar

Untuk memilih feature, tekan button Blok features dan blokfeature-feature yang diinginkan. Untuk menghapus feature

yang diinginkan, tekan button hapus setelah melakukanpemilihan.

Potongan coding diatas berfungsi untuk membuat Controlbar yang berfungsi

untuk menampilkan button-button yang dapat digunakan oleh user untuk melakukan

feature selection dan melakukan delete feature. Didalam control bar ini juga terdapat

deskripsi mengenai kegunaan dari masing-masing control tersebut.

Dalam pembuatan button didalam potongan coding diatas, perlu diperhatikan

juga dalam setiap pembuatan button perlu diberikan juga sebuah listener yang akan

memanggil sebuah method ketika button tersebut ditekan.

Editing (Flex : Map)

Dalam pembuatan aplikasi editing ini, bagian map akan dibagi menjadi dua bagian. Yaitu

sebuah panel sebagai tempat peta tersebut ditampilkan, dan panel berikutnya sebagai tempat

untuk tool-tool editor tersebut ditampilkan. Untuk dapat membagi tampilan tersebut menjadi

dua digunakanlah HDividedBox. Untuk lebih jelasnya, berikut adalah coding-coding yang

dibutuhkan untuk mewujudkan hal-hal diatas.


12/46

Pembagian layout Map


13/46

Pembuatan Map

Potongan coding diatas berfungsi untuk membuat sebuah map yang hampir

mirip dengan prosedur pembuatan map sebelum-sebelumnya. Yang menjadi

perbedaan didalam coding diatas adalah didalam map ini diberikan listener untuk

menangani event click pada map.

Pembuatan Feature Layer

Potongan coding diatas berfungsi untuk menambahkan beberapa feature layer

kedalam map. Ada tiga feature layer yang digunakan dari feature server yang

disediakan oleh arcgis ini. Ada 3 feature layer didalam service ini dimana feature layer


14/46

yang pertama bertipe point, yang kedua bertipe polyline, dan yang ketiga bertipe

polygon. Masing-masing dari feature layer ini diberikan ID yang dimana feature service

ini kemudian akan ditambahkan kedalam peta dan juga template picker.

Didalam feature layer ini juga ditambahkan beberapa parameter. Parameter-

parameter ini adalah event ketika feature tersebut ditekan, event ketika melakukan

edit pada feature, event ketika terjadi error, dan mode untuk feature service tersebut.

Pembuatan Template Picker

Potongan coding diatas berfungsi untuk menambahkan sebuah template picker

yang dimana didalamnya terdapat feature-feature yang didapat dari feature service

agar user dapat menambahkan feature tersebut kedalam layer dan kedalam feature

service.

Didalam template picker terdapat parameter-parameter yang penting fungsinya.

Parameter selected template change adalah parameter yang harus diisi untuk

menggunakan template picker. Event didalam parameter ini akan menangani apabila

user telah memilih feature symbol didalam template picker entah itu berupa point,line, atau polygon.

Editing Action Script

Inisialisasi Variable dan referensi ActionScript

importcom.esri.ags.events.FeatureLayerEvent;importcom.esri.ags.events.TemplatePickerEvent;importcom.esri.ags.geometry.Geometry;importcom.esri.ags.layers.Layer;importcom.esri.ags.symbols.SimpleFillSymbol;importmx.controls.Alert;importmx.events.FlexEvent;importmx.rpc.events.FaultEvent;importmx.utils.ObjectUtil;[Bindable]privatevarselectedGraphic:Graphic = null;


15/46

privatevardrawingComplete:Boolean;privatevardoNotAddFeature:Boolean;

]]>

Potongan coding diatas berfungsi untuk memulai coding actionscript didalam

aplikasi flex yang akan kita buat. Perlu dibuat beberapa variable yang nantinya akan

digunakan oleh function-function yang ada didalam aplikasi ini. Variable pertama

adalah selectedGraphic yang berisi graphic yang dipilih oleh user dengan menekan

symbol tersebut. Variable drawingComplete adalah boolean yang akan menandai

apakah user melakukan proses pembuatan polyline atau polygon. Variable

doNotAddFeature juga berupa boolean yang berfungsi untuk menandai kondisi untuk

menambahkan fitur diperbolehkan atau tidak. Variable ini akan berisi true apabila user

ingin menambahkan feature pada point yang didalamnya sudah terdapat sebuah

feature.

Function application_creationCompleteHandlerprotectedfunctionapplication_creationCompleteHandler(event:FlexEvent):void{

myTemplatePicker.featureLayers = [ incidentsPointLayer,incidentsLineLayer, incidentsPolygonLayer ];

addEventListener(KeyboardEvent.KEY_DOWN, deleteKeyHandler);}

Function diatas dijalankan ketika apilkasi telah selesai dibuat. Didalam fungsi ini

myTemplatePicker akan diisi dengan feature layer yang didapat dari ketiga feature

service seperti yang dapat dilihat diatas. Didalam function ini juga terdapat keyboard

event listener yang akan menhandle event ketika keyboard ditekan dan akan

memanggil function deleteKeyHandler().

Function myTemplatePicker_selectedTemplateChangeHandlerprotectedfunctionmyTemplatePicker_selectedTemplateChangeHandler(event:TemplatePickerEvent):void{editTool.deactivate();if(event.selectedTemplate){switch (event.selectedTemplate.featureLayer.layerDetails.geometryType)

{case(Geometry.MAPPOINT):

{if(event.selectedTemplate.featureLayer.renderer){drawTool.markerSymbol =

event.selectedTemplate.featureLayer.renderer.getSymbol(event.selectedTemplate.featureTemplate.prototype);


16/46

}elseif(event.selectedTemplate.featureLayer.symbol){drawTool.markerSymbol =

event.selectedTemplate.featureLayer.symbol;}drawTool.activate(DrawTool.MAPPOINT);

break;}case(Geometry.POLYLINE):

{if(event.selectedTemplate.featureLayer.renderer != null){ drawTool.lineSymbol =


}elseif(event.selectedTemplate.featureLayer.symbol){ drawTool.lineSymbol =

event.selectedTemplate.featureLayer.symbol;}

drawTool.activate(DrawTool.POLYLINE);break;}case(Geometry.POLYGON):

{if(event.selectedTemplate.featureLayer.renderer != null){ drawTool.fillSymbol =


}

elseif(event.selectedTemplate.featureLayer.symbol)

{ drawTool.fillSymbol =event.selectedTemplate.featureLayer.symbol;}drawTool.activate(DrawTool.POLYGON);

break;}

}}else

{drawTool.deactivate();

}}

Function diatas dijalankan ketika user menekan sebuah feature didalam

template picker. Kemudian oleh function ini akan dideteksi jenis feature yang ditekan

oleh user. Apabila jenis function adalah point, maka drawtool akan diset dengan

marker symbol, hal yang sama untuk polyline dan polygon akan diset sesuai dengan

tipenya masing-masing. Setelah itu Drawtool akan diaktifkan. Apabila user menekan

sesuatu diluar feature yang ada didalam template picker, maka drawtool akan di

nonaktifkan.


17/46

Function diatas juga akan melakukan pengecekan apabila feature yang ditekan

adalah feature yang didapat dari feature service atau feature yang dibuat oleh

developer secara manual. Apabila feature tersebut dari feature service, maka drawtool

akan inputkan dengan feature tersebut. Apabila feature tersebut merupakan hasil

pembuatan symbol yang ditambahkan kedalam template picker, maka data dari symboltersebut akan dimasukkan kedalam drawtool.

Function draw_drawEndHandlerprotectedfunctiondraw_drawEndHandler(event:DrawEvent):void{if(event.graphic.geometry.type == Geometry.EXTENT){for each(varlayer:Layer inmap.layers){

if(layer isFeatureLayer)

{selectionQuery.geometry = event.graphic.geometry;FeatureLayer(layer).selectFeatures(selectionQuery,

FeatureLayer.SELECTION_NEW);}

}drawTool.deactivate();

}else{drawingComplete = true;doNotAddFeature = false;callLater(addFeatureToFeatureLayer, [ event.graphic ]);}

}

Function diatas dijalankan ketika user telah selesai menggunakan drawtool.

Apabila dilihat pada potongan coding waktu penambahan drawtool, parameter

drawEnd diset dengan function ini. Dengan adanya function ini, feature yang telah

dibuat oleh user didalam peta kemudian akan ditambahkan kedalam feature layer

berdasarkan typenya.

Didalam function ini akan dilakukan pengecekan. Apabila type geometry adalah

extent, berarti user menggunakan drawtool untuk melakukan seleksi terhadap feature-

feature dengan menggunakan drawtool. Sedangkan apbila type geometrynya bukan

extent, maka diasumsikan user melakukan penambahan feature (point, polyline, ataupolygon) kedalam layer dan akan memanggil function addFeatureToLayer.

Function layer_clickHandlerprotectedfunctionlayer_clickHandler(event:MouseEvent):void

{drawTool.deactivate();


18/46

if(!drawingComplete {if(event.target isGraphic){selectedGraphic = Graphic(event.target);}elseif(event.target.parent isGraphic{

selectedGraphic = Graphic(event.target.parent);}editTool.activate(EditTool.EDIT_VERTICES | EditTool.MOVE, [selectedGraphic ]);

}else{drawingComplete = false;if(event.currentTarget == incidentsPointLayer){

doNotAddFeature = true}

}

}Function diatas dijalankan apabila user menekan sebuah Feature layer didalam

map. Apabila drawingComplete (variable yang menandakan user melakukan add

feature) adalah false, maka akan dilakukan proses untuk melakukan move feature.

Proses move feature ini dilakukan dengan edit tool yang dimana datanya akan didapat

berdasarkan data-data dari feature layer yang ditekan.

Apabila drawingComplete adalah true, maka menandakan user sedang dalam

proses melakukan penambahan feature. Apabila sampai memasuki function ini, hal ini

menandakan bahwa user ingin menambahkan fitur pada geometry yang hampir sama

dengan feature layer yang ditekan. Oleh karena itu variable doNotAddFeature akandibuat menjadi true sehingga user tidak dapat menambahkan feature dengan

geometry yang sama dengan feature layer ini.

Function addFeatureToFeatureLayerprivatefunctionaddFeatureToFeatureLayer(graphic:Graphic):void{if(!doNotAddFeature && myTemplatePicker.selectedTemplate){if(myTemplatePicker.selectedTemplate.featureTemplate){varnewAtttrs:* =ObjectUtil.copy(myTemplatePicker.selectedTemplate.featureTemplate.prototype.attributes);

varnewGraphic:Graphic = newGraphic(graphic.geometry, null,newAtttrs);

myTemplatePicker.selectedTemplate.featureLayer.applyEdits([newGraphic ], null, null);

}else


19/46

{myTemplatePicker.selectedTemplate.featureLayer.applyEdits([graphic], null, null);

}}

}

Function diatas akan dijalankan apabila user akan melakukan penambahanfeature kedalam feature layer. Sebelum melakukan penambahan, dilakukan

pengecekan terlebih dahulu apakah variabel doNotAddFeature adalah false. Seperti

yang dijelaskan pada function sebelumnya, apabila variabel ini adalah true, berarti user

mencoba menambahkan feature dengan geometry yang sudah digunakan oleh feature

yang lain dan tidak diperbolehkan. Lalu juga dilakukan pengecekan apabila user juga

telah melakukan pemilihan feature pada template picker.

Apabila Kondisi-kondisi tersebut dipenuhi, maka akan dilakukan proses

penambahan feature. Apabila feature yang akan ditambahkan adalah feature yang

didapat dari feature service, maka feature tersebut akan langsung ditambahkankedalam feature layer. Tetapi apabila feature yang akan ditambahkan dari template

picker merupakan sebuah symbol baru yang dibuat tanpa didapat dari feature service,

maka perlu dibuat sebuah graphic baru sesuai dengan yang dapat dilihat pada

potongan coding diatas.

Function deleteKeyHandlerprivatefunctiondeleteKeyHandler(event:KeyboardEvent):void{if(event.keyCode == Keyboard.DELETE){if(selectedGraphic != null){

(selectedGraphic.parent asFeatureLayer).applyEdits(null, null,[ selectedGraphic ]);

selectedGraphic = null;}else{for each(varlayer:Layer inmap.layers){

if(layer isFeatureLayer &&FeatureLayer(layer).selectedFeatures.length > 0)

{FeatureLayer(layer).applyEdits(null, null,FeatureLayer(layer).selectedFeatures);

}}

}}

}


20/46

Function diatas berfungsi untuk melakukan delete terhadap feature yang

diinginkan oleh user. Apabila variabel selectedGraphic ada isinya, berarti user

melakukan seleksi dengan menekan tombol tersebut. Apabila tidak, berarti user

melakukan selection dengan menggunakan extent. Oleh karena itu proses delete akan

dilakukan terhadap setiap feature layer yang dipilih oleh user dengan menggunakanseleksi blok.

Function map_clickHandlerprotectedfunctionmap_clickHandler(event:MouseEvent):void{if(!(event.target isGraphic || event.target.parent isGraphic)){editTool.deactivate();

}}

Function diatas dijalankan apabila user melakukan click terhadap map. Didalamfunction ini tujuannya adalah mematikan edittool apabila user menekan suatu graphic

didalam map.

Function flayer_faultHandlerprotectedfunctionflayer_faultHandler(event:FaultEvent):void{

Alert.show(event.fault.faultString + "\n\n"+event.fault.faultDetail, "FeatureLayer Fault "+event.fault.faultCode);

trace("f: "+ event.toString());}

Function diatas dijalankan apabila terjadi error didalam feature layer. Apabila

terjadi error ketika user melakukan proses editing terhadap feature layer, maka

function ini akan mengeluarkan dialog box untuk menunjukan code error.

Function selectFeatures_clickHandlerprotectedfunctionselectFeatures_clickHandler(event:MouseEvent):void{

myTemplatePicker.clearSelection();

drawTool.fillSymbol = newSimpleFillSymbol;drawTool.activate(DrawTool.EXTENT);

}

Function diatas dijalankan apabila user menekan tombol blok features. Function

ini kemudian akan menghilangkan semua selection yang dilakukan oleh user, dan

kemudian akan menjalankan drawtool dengan mode Drawtool.extent yang dimana

akan memilih semua feature didalam extent yang dibuat.


21/46

Function clearSelection_clickHandlerprotectedfunctionclearSelection_clickHandler(event:MouseEvent):void{for(vari:Number = 0; i < map.layers.length; i++){

if(map.layers[i] isFeatureLayer &&FeatureLayer(map.layers[i]).selectedFeatures.length > 0)

{FeatureLayer(map.layers[i]).clearSelection();

}}

}

Function diatas dijalankan apabila user menekan tombol hialngkan blok.

Function ini kemudian mengecek terhadap semua layer didalam map untuk dicek

apakah fitur tersebut telah diseleksi sebelumnya. Setelah itu terhadap fitur-fitur yang

telah diseleksi akan dihilangkan seleksinya.

Function editTool_vertexAddDeleteHandlerprotectedfunctioneditTool_vertexAddDeleteHandler(event:EditEvent):void{

applyEdits(event.graphic);}

Function diatas akan menghandle event add dan event delete didalam edit tool.

Function ini kemudian akan memanggil function applyEdits. Dikarenakan untuk proses

add dan delete telah dihandle dengan function sebelumnya, function ini dibuat hanya

untuk menghandle event add dan delete yang diperlukan oleh edit tool.

Function editTool_graphicsMoveFirstHandlerprotectedfunctioneditTool_graphicsMoveFirstHandler(event:EditEvent):void{

editTool.addEventListener(EditEvent.GRAPHICS_MOVE_STOP,editTool_graphicsMoveStopHandler);

}

Function diatas akan memberikan event moveStop dengan function Stophandle

terhadap graphic yang sedang dipindah.

Function editTool_graphicsMoveStopHandlerprotectedfunctioneditTool_graphicsMoveStopHandler(event:EditEvent):void{

editTool.removeEventListener(EditEvent.GRAPHICS_MOVE_STOP,editTool_graphicsMoveStopHandler);


22/46

applyEdits(event.graphics[0]);}

Function diatas akan menghapus listener move stop pada graphic yang dipindah

kemudian akan memanggil function applyEdits untuk melakukan edit terhadap lokasi

graphic yang dipindah.

Function editTool_vertexMoveFirstHandlerprotectedfunctioneditTool_vertexMoveFirstHandler(event:EditEvent):void{

editTool.addEventListener(EditEvent.VERTEX_MOVE_STOP,editTool_vertexMoveStopHandler);

}

Function diatas akan memberikan event moveStop dengan function Stophandle

terhadap vertex yang sedang dipindah.

Function editTool_vertexMoveStopHandlerprotectedfunctioneditTool_vertexMoveStopHandler(event:EditEvent):void{

editTool.removeEventListener(EditEvent.VERTEX_MOVE_STOP,editTool_vertexMoveStopHandler);

applyEdits(event.graphic);}

Function diatas akan menghapus listener move stop pada vertex yang dipindah

kemudian akan memanggil function applyEdits untuk melakukan edit terhadap lokasi

vertex yang dipindah.

Function applyEditsprivatefunctionapplyEdits(graphic:Graphic):void{

FeatureLayer(graphic.graphicsLayer).applyEdits(null, [ graphic ],null);

}

Function diatas merupakan function applyEdits yang digunakan oleh function-

function editTool sebelumnya. Function ini berfungsi untuk melakukan edit terhadap

graphic layer oleh graphic yang diparsingkan.

Setelah ditambahkan coding-coding diatas, aplikasi editor tanpa menggunakan toolbar

siap dijalankan. Aplikasi editor ini jauh lebih kompleks apabila dibandingkan dengan aplikasi

editor dengan editor yang disediakan oleh ArcGIS. Mengenai aplikasi editing dengan

menggunakan editor akan dijelaskan pada bab berikutnya. Apabila aplikasi editing ini

dijalankan, dapat dilihat pada gambar dibawah ini.


23/46

Gambar 7

Tampilan aplikasi editing tanpa edior

Editting Feature dengan Editor

ArcGIS API untuk Flex sebenarnya telah menyediakan fitur editor agar developer dapat

memberikan fitur edit secara mudah didalam aplikasi flex yang dibuatnya. Sebelum

menggunakan fitur editor ini, perlu dibuat sebuah geometry service yang akan dipanggil

nantinya oleh fitur editor yang dibuat.

Geometry service dapat membantu kita dalam proses editing seperti membuat,

memotong, mengubah data-data geograpic feature. Geometry yang sudah dibuat kemudian

dipublish kedalam ArcGIS server dan URLnya dipakai untuk proses pemanggilan editor.

Berikut adalah langkah-langkah untuk melakukan edit dengan menggunakan editor.

Inisialisasi referensi namespace arcgis dan buat sebuah handler ketika aplikasi diinisialisasi.

.......


24/46

Buat script action script seperti dibawah ini untuk menambahkan feature layer kedalameditor ketika aplikasi di inisialisasi.

importcom.esri.ags.tasks.GeometryService;importmx.events.FlexEvent;

protectedfunctionapplication_initializeHandler(event:FlexEvent):void{

myEditor.featureLayers = [ points, fireAreas ];}

]]>

Buat sebuah Hgroup dimana didalamnya nanti terdapat editor dan map.

Buat sebuah map beserta feature service seperti code dibawah ini.


25/46

url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0"/>

Jalankan Project.

Gambar 8

Tampilan aplikasi editing dengan editor

Kelebihan ArcGIS API untuk Flex

Dengan menggunakan ArcGIS API untuk Flex, kita dapat memanfaatkan tool web designdari Adobe yang sangat bagus. Kita dapat membuat aplikasi web, yang mempunyai

banyak fitur, user friendly, dan dapat digunakan oleh semua browser yang didukung

oleh Adobe.

Developer dapat mengambil keuntungan dengan menggunakan aplikasi Flash Builderyang memiliki komponen-komponen flex yang sangat banyak yang dapat mempercepat

proses pembuatan aplikasi.

ArcGIS Server memiliki format output yang dioptimalkan untuk Flex disebut ActionMessage Format, yang mempercepat query ke server GIS.

ArcGIS API untuk Flex juga friendly terhadap developer yang mengetahui Java. Pengguna aplikasi dengan flex ini hanya membutuhkan flash player, yang merupakan

suatu aplikasi yang sudah tidak asing lagi bagi user.

Kekurangan ArcGIS API untuk Flex

Beberapa device tidak menyupport Flash Player didalamnya. Membutuhkan Tool-Tool yang cukup berat untuk membuat aplikasi Flex.


26/46

ArcGIS API untuk Javascript

Arcgis API untuk javascript dapat memungkinkan kita untuk menambahkan map yang

ringan kedalam aplikasi web yang kita buat. Map ArcGIS akan dibuat berdasarkan javascript

sehingga dapat digunakan terhadap aplikasi-aplikasi berbasis web seperti php, asp, dan HTML5.

ArcGIS API ini juga dapat digunakan bersama framework-framework javascript lainnya seperti

Jquery dan ExtJs.

ArcGIS API untuk javascript dapat digunakan dengan mengakses API secara online

ataupun secara lokal. Arcgis telah menyediakan sebuah CDN (Content Delivery Network) yang

dapat digunakan untuk memuat API secara online. API ini sendiri juga dapat diakses secara lokal

didalam web server. Aplikasi yang dibuat dengan menggunakan ArcGIS untuk javascript ini

sebaiknya digunakan secara online (hosting / web server). Gambar dibawah ini dapat

menunjukan bahwa apabila html yang menggunakan ArcGIS API untuk javascript dijalankan

didalam file lokal, tidak semua fitur-fitur arcgis dapat dipanggil.

Gambar 9

Perbedaan KML.html dijalankan pada File dengan dijalankan pada webserver

Membuat peta dengan Javascript

Dengan menggunakan ArcGIS API untuk javascript kita dapat menambahkan sebuah

peta kedalam website yang kita buat. Untuk dapat melakukan ini diperlukan ArcGIS API untuk

Javascript yang dapat diakses secara lokal, atau juga dapat diakses pada CDN yang sudah


27/46

disediakan ArcGIS untuk mengakses API dengan mudah. Berikut adalah langkah-langkah untuk

menggunakan ArcGIS API pada sebuah halaman web sederhana.

1. Buatlah sebuah HTML sederhana yang didalam body mempunyai sebuah DIV tempatmap ArcGIS akan ditampilkan. Berikut adalah contoh isi dari HTML sederhana untukmenampilkan map ArcGIS.

First time learning ArcGIS for JS

2. Referensikan ArcGIS API untuk javascript kedalam HTML. Hal ini dapat dilakukan denganmenambah potongan coding dibawah ini kedalam tag .

3. Load module dari API dengan menggunakan coding dibawah ini.

require(["esri/map","dojo/domReady!"],function(Map){...........

});

4. Buatlah map dengan menggunakan API kedalam div didalam body. Berikut adalahcontoh cara pembuatan map.

varmap;require(["esri/map","dojo/domReady!"],function(Map){

map =newMap("mapDiv",{

center:[-56.049,38.485],zoom:3,basemap:"streets"});

});

5. Buat style tampilan untuk HTML. Berikut adalah contoh untuk pembuatan tampilanhtml.


28/46

html,body,#mapDiv{padding:0;margin:0;height:100%;

}

6. Jalankan HTML tersebut pada WebServer.

Gambar 10Tampilan HTML dengan menggunakan ArcGIS API untuk Javascript

Layer

Pada umumnya, jenis-jenis layer didalam ArcGIS relatif sama didalam type dan

fungsionalitasnya. Yang menjadi perbedaan utama adalah cara memanggil layer tersebut

didalam setiap API nya. Didalam ArcGIS API untuk JavaScript, untuk menambahkan sebuah layer

kedalam peta dapat dilakukan dengan cara yang cukup mudah. Berikut adalah contoh untuk

cara menambahkan sebuah basemap layer kedalam peta.

varbasemap =newesri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");map.addLayer(basemap);


29/46

Sama dengan cara menambahkan layer kedalam peta pada API ArcGIS lainnya,

dibutuhkan url tempat layer tersebut dipublish. Pada contoh diatas, digunakanlah Map Server

Arcgis untuk tiled map service.

Didalam ArcGIS kita juga dapat menambahkan beberapa layer kedalam suatu peta. Peta

sebenarnya merupakan susunan dari satu atau beberapa layer yang dimana setiap layer

memiliki informasi-informasi sendiri-sendiri. Berikut adalah suatu contoh penggabungan

beberapa layer menjadi suatu kesatuan peta.

varbasemap =newesri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");map.addLayer(basemap);

varreferenceLayer =newesri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer" );

map.addLayer(referenceLayer);

varIndo1 =newesri.layers.ArcGISDynamicMapServiceLayer("http://nfms.dephut.go.id/ArcGIS/rest/services/IndonesiaNFMS/Batas_Province/MapServer");map.addLayer(Indo1);

varIndo2 =newesri.layers.ArcGISDynamicMapServiceLayer("http://nfms.dephut.go.id/ArcGIS/rest/services/IndonesiaNFMS/Batas_DistrictKabupatenKota/MapServer" );map.addLayer(Indo2);

Gambar 11

Tampilan HTML dengan gabungan beberapa layer


30/46

Membuat marker symbol

ArcGIS API untuk javascript menyediakan tool yaitu draw toolbar yang dapat membantu

developer untuk membuat sebuah marker symbol dengan mudah kedalam peta. Draw toolbar,

bukanlah sebuah interface yang ditampilkan didalam peta, tetapi draw toolbar adalah sebuahclass yang dapat membantu developer dalam proses pembuatan geometry didalam map. Kita

hanya mengaktifkan sebuah tipe geometry yang akan kita gunakan untuk membuat symbol

tersebut. Contoh :

Point

Dengan menekan button diatas, maka toolbar akan mengaktifkan point geometry.

Untuk lebih jelasnya berikut adalah dokumentasi pembuatan halaman web untuk

melakukan add symbol yang bertipe point, polyline dan juga polygon.

1. Buatlah sebuah halaman HTML yang dimana didalamnya terdapat dua buah DIV yangdimana div pertama berisi button-button type symbol dan div kedua adalah tempat peta

ditampilkan.

Shapes and Symbols

........................................................

Select a shape then draw on map to add graphicPointMultipointLinePolylineFreehand PolylineTriangleRectangleCircleEllipse

PolygonFreehand Polygon


31/46

Button-button diatas merupakan button yang digunakan untuk membuat

symbol. Id dari button tersebut merupakan tipe geometry symbol yang akan digunakan

saat button tersebut ditekan.

2.

Tambahkan Style css untuk Html yang dibuat.

#info{

top:20px;color:#444;height:auto;font-family:arial;right:20px;margin:5px;padding:10px;

position:absolute;width:115px;z-index:40;border:solid2px#666;border-radius:4px;background-color:#fff;}

html,body,#mapDiv{padding:0;margin:0;height:100%;}

button{display:block;

}

3. Referensikan ArcGIS API untuk javascript kedalam HTML.

4. Load modul-modul dari API seperti pada potongan coding dibawah ini. Yang diperlukanuntuk menambahkan symbol didalam peta ini adalah map, toolbar, jenis-jenis symbol,

graphic, dan beberapa modul dari Dojo.

varmap,tb;require([

"esri/map","esri/toolbars/draw","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/PictureFillSymbol","esri/symbols/CartographicLineSymbol","esri/graphic","dojo/_base/Color","dojo/dom","dojo/on","dojo/domReady!"

],function(Map,Draw,SimpleMarkerSymbol,SimpleLineSymbol,


32/46

PictureFillSymbol,CartographicLineSymbol,Graphic,Color,dom,on

){

................................

});

5. Mapmap =newMap("mapDiv",{

basemap:"streets",center:[-25.312,34.307],zoom:3

});map.on("load",initToolbar);

Map yang digunakan tidak perlu terlalu kompleks. Dengan menggunakan contohini layer yang digunakan adalah basemap street saja. Kemudian pada waktu map di

muat, maka function initToolbar akan dijalankan.

6. Inisialisasi symbol-symbol yang akan digunakan.varmarkerSymbol =newSimpleMarkerSymbol();markerSymbol.setPath("M 100 100 L 300 100 L 200 300 z");markerSymbol.setColor(newColor("#00FFFF"));

Potongan coding diatas merupakan inisialisasi symbol yang bertipe point dan multipoint.Dapat dilihat diatas bahwa untuk setPath memiliki susunan string yang cukup sulit untuk

dipahami. String ini merupakan SVG Path. Untuk penjelasan mengenai SVG Path dapat

dibuka dihttp://www.w3.org/TR/SVG/paths.html#PathElement.

varlineSymbol =newCartographicLineSymbol(CartographicLineSymbol.STYLE_SOLID,newColor([255,0,0]),10,CartographicLineSymbol.CAP_ROUND,CartographicLineSymbol.JOIN_MITER,5

);

Potongan coding diatas merupakan inisialisasi symbol yang bertipe line, polyline dan

multiline. Dapat dilihat parameter-parameter yang dapat diisi pada variabel ini sesuai

dengan coding diatas.

varfillSymbol =newPictureFillSymbol("images/mangrove.png",newSimpleLineSymbol(

SimpleLineSymbol.STYLE_SOLID,
http://www.w3.org/TR/SVG/paths.html#PathElementhttp://www.w3.org/TR/SVG/paths.html#PathElementhttp://www.w3.org/TR/SVG/paths.html#PathElementhttp://www.w3.org/TR/SVG/paths.html#PathElement


33/46

newColor('#000'),1

),42,42

);

Potongan coding diatas merupakan inisialisasi symbol yang extend, polygon danfreehand polygon. Dapat dilihat parameter-parameter yang dapat diisi pada variabel ini

sesuai dengan coding diatas. Variabel diatas digunakan untuk mengisi polygon dengan

gambar yang diambil dari server. Alamat gambar bisa disetting untuk ditampilkan

didalam polygon.

7. Function initToolbarfunctioninitToolbar(){

tb =newDraw(map);tb.on("draw-end",addGraphic);on(dom.byId("info"),"click",function(evt){

if(evt.target.id ==="info"){return;

}vartool =evt.target.id.toLowerCase();map.disableMapNavigation();tb.activate(tool);

});}

Function diatas akan dijalankan sesaat setelah map selesai dimuat. Function ini

berfungsi untuk memberikan listener kepada semua button yang ada didalam div "info"

dan akan mengaktifkan toolbar berdasarkan id dari button yang ditekan. Id ini kemudian

akan digunakan sebagai tipe dari symbol yang akan digunakan oleh toolbar.

8. Function addGraphicfunctionaddGraphic(evt){

tb.deactivate();map.enableMapNavigation();varsymbol;if(evt.geometry.type ==="point"||evt.geometry.type ==="multipoint"){

symbol =markerSymbol;}elseif(evt.geometry.type ==="line"||evt.geometry.type==="polyline"){

symbol =lineSymbol;}else{

symbol =fillSymbol;}map.graphics.add(newGraphic(evt.geometry,symbol));

}


34/46

Function diatas akan dipanggil secara otomatis ketika user membuat sebuah

symbol dengan menekan button, kemudian menekan sebuah/beberapa titik pada peta.

Function ini kemudian akan menambahkan symbol yang diinginkan kedalam peta

berdasarkan variabel-variabel symbol yang dibuat sebelumnya.

9. Jalankan halaman web ini kedalam web server.

Gambar 12

Tampilan HTML add marker symbol dengan Toolbar

KML Layer

KML layer merupakan fitur yang sering digunakan didalam pembuatan GIS. Untuk dapat

membuat layer bedasarkan file KML pada ArcGIS API untuk Javascript ini diperlukan KML Layer.

KML layer akan membuat layer bedasarkan file KML yang dibaca pada suatu URL. Untuk dapat

menggunakannya, file KML tersebut harus dipublikasikan. Untuk menambahkan KML Layer

kedalam halaman web yang kita buat, dapat mengikuti cara-cara berikut ini.

1.

Buat sebuah HTML seperti dengan potongan coding dibawah ini.


35/46

Halaman web yang akan dibuat dengan KML layer ini memiliki beberapa

perbedaan dengan halaman web yang biasanya dibuat sebelumnya. Div yang digunakan

untuk menampilkan map ini memiliki beberapa attributes dojo yang digunakan. selain

itu terdapat sebuah span yang didalamnya dapat ditambahkan Gif Loader untuk

menunjukkan proses load file KML.

2. Buat Layout untuk halaman web tersebut.

html,body{height:100%;width:100%;margin:0;padding:0;}#map{height:100%;margin:0;padding:0;}#loading{

float:right;}

Pada settingan css, digunakan juga sebuah css external yaitu tundra.css. Pada settingan

layout juga ditambahkan settingan layout untuk loading.

3. Referensikan ArcGIS API untuk javascript kedalam HTML.

4. Load Modul-Modul pada API seperti potongan coding dibawah ini

varmap;require(["esri/map","esri/layers/KMLLayer","dojo/parser","dojo/dom-style",

"dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/domReady!"

],function(Map,KMLLayer,parser,domStyle


36/46

){

...................

});

Tambahkan esri/layers/KMLLayer pada saat load modul API untuk menggunakan KML

layer pada halaman web yang kita buat.5. Buat sebuah Map

map =newMap("map",{basemap:"topo",center:[-108.663,42.68],zoom:6

});

6. Tambahkan KML Layer kedalam mapparser.parse();varkmlUrl ="http://dl.dropbox.com/u/2654618/kml/Wyoming.kml";varkml =newKMLLayer(kmlUrl);map.addLayer(kml);

kml.on("load",function(){domStyle.set("loading","display","none");});

Potongan coding diatas dibutuhkan untuk menambahkan KML Layer yang

didapat dari file KML dari suatu URL. KML layer kemudian ditambahkan kedalam layer-

layer map. Dapat diperhatikan pada potongan coding diatas, dapat dibuat juga loader

untuk file kml tersebut.

7. Jalankan halaman web tersebut kedalam web server.

Gambar 13

Tampilan HTML dengan KML layer


37/46

Editing Feature tanpa editor

Berikut akan dijelaskan mengenai cara untuk melakukan editing feature pada javascript

tanpa menggunakan editor bawaan ArcGIS. Untuk dapat melakukan insert, update, delete

feature didalam javascript dibutuhkan sebuah toolbar. Untuk lebih jelasnya berikut adalahcoding-coding javascript untuk melakukan Editing feature tanpa editor.

Load Modul API

varmap;require(["esri/map","esri/toolbars/draw","esri/toolbars/edit","esri/graphic","esri/config","esri/layers/FeatureLayer",

"esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol","esri/dijit/editing/TemplatePicker","dojo/_base/array","dojo/_base/event","dojo/_base/lang","dojo/parser","dijit/registry","dijit/layout/BorderContainer","dijit/layout/ContentPane","dijit/form/Button","dojo/domReady!"

],function(Map,Draw,Edit,Graphic,esriConfig,

FeatureLayer,SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,TemplatePicker,arrayUtils,event,lang,parser,registry

){

...................

});

Potongan coding diatas adalah menjelaskan modul-modul yang dibutuhkan

untuk melakukan editing. Hal yang perlu diperhatikan mengenai modul-modul yang

diimport adalah modul esri/toolbars/draw dan edit. Toolbar ini akan digunakan untuk

melakukan editing terhadap feature layer. Kemudian selanjutnya adalah

esri/symbols/SimpleMarkerSymbol, SimpleLineSymbol dan SimpleFillSymbol yang

mewakili masing-masing jenis geometry dari feature layer yang dapat di lakukan editing.

Untuk setiap modul API yang diambil, perlu dideklarasikan juga variabel untuk

masing-masing modul. Hal ini dapat diperhatikan pada bagian function diatas. Urutan


38/46

pendeklarasian variabel dibuat berurutan sesuai dengan urutan pengambilan modul

pada API.

Konfigurasi dasarparser.parse();esriConfig.defaults.io.proxyUrl ="/proxy";esriConfig.defaults.geometryService =newesri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");map =newMap("map",{

basemap:"streets",center:[-83.244,42.581],zoom:15

});map.on("layers-add-result",initEditing);

Potongan coding diatas adalah coding untuk konfigurasi dasar untuk melakukan

editing terhadap feature layer. Sama dengan ArcGIS API untuk Flex, diperlukan juga

suatu geometry service didalam aplikasi untuk melakukan editing. Setelah itu dilakukan

pembuatan map dengan konfigurasi dasar seperti, basemap, center, dan tingkat zoom.

Setelah itu ditambahkan event ketika layer ditambahkan didalam map, untuk

menjalankan function initEditing.

Penambahan Feature LayervarlandusePointLayer =new

FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6",{mode:FeatureLayer.MODE_SNAPSHOT,outFields:["*"]

});varlanduseLineLayer =newFeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8",{

mode:FeatureLayer.MODE_SNAPSHOT,outFields:["*"]

});varlandusePolygonLayer =newFeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9",{

mode:FeatureLayer.MODE_SNAPSHOT,outFields:["*"]

});map.addLayers([landusePointLayer,landuseLineLayer,landusePolygonLayer]);

Coding diatas adalah coding yang diperlukan untuk memanggil feature layer

kedalam peta. Ada tiga jenis feature layer yang akan diambil yaitu, feature layer dengan


39/46

jenis Point, Polyline dan Polygon. Setelah itu ketiga peta akan ditambahkan kedalam

layer didalam peta.

Function initEditingDidalam function ini terdapat banyak potongan coding yang memiliki fungsi yang

berbeda-beda. Untuk itu didalam dokumentasi ini akan dijelaskan sendiri-sendiri untuk

masing-masing potongan coding didalam function ini.

console.log("initEditing",evt);varcurrentLayer =null;varlayers =arrayUtils.map(evt.layers,function(result){returnresult.layer;

});

Potongan coding diatas berfungsi membuat sebuah variabel layers yang dimana

didalamnya akan diisi semua layer-layer yang ada didalam peta. Potongan coding diatasjuga menginisialisasi variabel currentLayer.

console.log("layers",layers);vareditToolbar =newEdit(map);editToolbar.on("deactivate",function(evt){currentLayer.applyEdits(null,[evt.graphic],null);

});

Potongan coding diatas berfungsi untuk mendeklarasikan variabel editToolbar

yang merupakan sebuah toolbar edit untuk map. Didalam potongan coding diatas juga

ditambahkan sebuah listener terhadap editToolbar ketika terjadi event deactivate untuk

melakukan applyEdits terhadap graphic yang sedang diedit dengan menggunakan tool

ini.

arrayUtils.forEach(layers,function(layer){vareditingEnabled =false;layer.on("dbl-click",function(evt){event.stop(evt);if(editingEnabled ===false){

editingEnabled =true;editToolbar.activate(Edit.EDIT_VERTICES ,evt.graphic);

}else{currentLayer =this;

editToolbar.deactivate();editingEnabled =false;

}});

layer.on("click",function(evt){event.stop(evt);if(evt.ctrlKey ===true||evt.metaKey ===true){

layer.applyEdits(null,null,[evt.graphic]);currentLayer =this;editToolbar.deactivate();


40/46

editingEnabled=false;}});

});

Potongan coding diatas berfungsi unuk menambahkan sebuah variabel terhadap

semua layer didalam peta yaitu variabel editingEnabled yang di inisialisasi dengan value

false. Kemudian untuk setiap layernya, juga ditambahkan sebuah listener untuk event

double click yang dilakukan kedalam layer. Didalam listener ini akan dilakukan

pengecekan apakah status editing untuk layer tersebut adalah false. Apabila false

berarti proses editing belum dilakukan terhadap layer tersebut yang kemudian akan

melakukan edit terhadap vertex dari graphic yang dipilih. Apabila status editing adalah

true, maka user sedang melakukan editing dan melakukan double click lagi pada graphic

layer yang lain. Untuk itu proses editing akan dinon-aktifkan dan editToolbar akan

dimatikan.

Dalam potongan coding diatas juga ditambahkan sebuah listener untuk event

click terhadap layer. Listener ini berfungsi untuk melakukan delete terhadap layer yang

sedang dipilih. Apabila user menekan tombol ctrl dan mengeklik layer tersebut, maka

layer ini akan dihapus dari peta.

vartemplatePicker =newTemplatePicker({featureLayers:layers,rows:"auto",columns:2,grouping:true,style:"height: auto; overflow: auto;"

},"templatePickerDiv");templatePicker.startup();

Potongan coding diatas adalah untuk membuat template picker dimana

template picker ini akan berisi jenis-jenis feature-feature layer yang telah ditambahkan.

Template picker ini memiliki fungsi yang sama pada template picker untuk ArcGIS API

untuk flex. Dengan menggunakan template picker ini user dapat melakukan insert dari

feature yang dipilih dari template picker ini.

vardrawToolbar =newDraw(map);varselectedTemplate;templatePicker.on("selection-change",function(){

if(templatePicker.getSelected()){selectedTemplate =templatePicker.getSelected();

}switch(selectedTemplate.featureLayer.geometryType){

case"esriGeometryPoint":drawToolbar.activate(Draw.POINT);

break;case"esriGeometryPolyline":

drawToolbar.activate(Draw.POLYLINE);break;


41/46

case"esriGeometryPolygon":drawToolbar.activate(Draw.POLYGON);

break;}

});

Potongan coding diatas digunakan untuk melakukan proses insert terhadap

feature yang disedikan oleh template picker. Didalam template picker akan terdapat

jenis-jenis feature yang didapat dari tiga feature layer yang dimuat sebelumnya. Apabila

user melakukan klik terhadap suatu feature didalam template picker, maka sebuah

toolbar draw akan diaktifasi menurut jenis geometry dari feature yang dipilih tadi.

drawToolbar.on("draw-end",function(evt){drawToolbar.deactivate();editToolbar.deactivate();varnewAttributes =lang.mixin({},

selectedTemplate.template.prototype.attributes);varnewGraphic =newGraphic(evt.geometry,null,newAttributes);selectedTemplate.featureLayer.applyEdits([newGraphic],null,

null);});

Potongan coding diatas akan dijalankan ketika user selesai menggunakan draw

tool. Setelah selesai menggunkan tool, maka tool akan di non-aktifkan. Setelah itu

dibuat sebuah attributes yang didapat dari attributes dari feature yang dipilih oleh user

didalam feature picker. Setelah itu dibuat sebuah graphic dengan attributes yang

didapat dari template picker dan data geometry. Kemudian graphic tersebut akan

ditambahkan kedalam feature layer.

Gambar 14

Tampilan Aplikasi Editing tanpa menggunakan Editor


42/46

Editing Feature dengan editor

Berikut akan dijelaskan mengenai cara untuk melakukan editing feature pada javascript

dengan menggunakan editor bawaan ArcGIS. Untuk dapat melakukan insert, update, delete

feature didalam javascript dapat dilakukan dengan mudah dengan menggunakan editor yangdisediakan oleh ArcGIS. Untuk lebih jelasnya berikut adalah coding-coding javascript untuk

melakukan Editing feature dengan editor.

Load Modul API

varmap;require(["esri/map","esri/tasks/GeometryService","esri/toolbars/edit",

"esri/layers/ArcGISTiledMapServiceLayer","esri/layers/FeatureLayer",

"esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol",

"esri/dijit/editing/Editor","esri/dijit/editing/TemplatePicker",

"esri/config","dojo/i18n!esri/nls/jsapi",

"dojo/_base/array","dojo/parser","dojo/keys",

"dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/domReady!"

],function(Map,GeometryService,Edit,ArcGISTiledMapServiceLayer,FeatureLayer,SimpleMarkerSymbol,SimpleLineSymbol,Editor,TemplatePicker,esriConfig,jsapiBundle,arrayUtils,parser,keys

){....................});

Modul yang diload dalam aplikasi ini ada sedikit perbedaan apabila dibandingkan

dengan Editing tanpa menggunakan editor. Dengan menggunakan editor, kita tidak lagi

memerlukan sebuah draw toolbar. Tetapi didalam aplikasi ini kita perlu menambahkan

sebuah modul yaitu esri/dijit/editing/editor. Modul ini yang kemudian akan digunakan

untuk editor.


43/46

Konfigurasi Dasarparser.parse();

jsapiBundle.toolbars.draw.start =jsapiBundle.toolbars.draw.start +"
Press ALT to enable snapping";

esriConfig.defaults.io.proxyUrl ="/proxy";esriConfig.defaults.geometryService =newGeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");map =newMap("map",{

basemap:"satellite",center:[-96.541,38.351],zoom:14,slider:false

});map.on("layers-add-result",initEditor);

Potongan coding diatas adalah coding untuk konfigurasi dasar untuk melakukan

editing terhadap feature layer. Konfigurasi dasar untuk editing dengan menggunakan

editor ini memiliki konsep yang sama dengan konfigurasi dasar untuk editing tanpa

menggunakan editor.

Penambahan Layervarlabels =newArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");map.addLayer(labels);

varrivers =new

FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{

mode:FeatureLayer.MODE_ONDEMAND,outFields:['*']

});

varwaterbodies =newFeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{

mode:FeatureLayer.MODE_ONDEMAND,outFields:['*']

});map.addLayers([waterbodies,rivers]);

Didalam aplikasi ini kemudian akan digunakan dua buah feature layer yang

dimana memiliki tipe polyline dan polygon. Digunakan juga sebuah map server. Setelah

itu layer-layer tersebut akan ditambahkan kedalam peta.


44/46

Function initEditorDidalam function ini terdapat banyak potongan coding yang memiliki fungsi yang

berbeda-beda. Untuk itu didalam dokumentasi ini akan dijelaskan sendiri-sendiri untuk

masing-masing potongan coding didalam function ini.

vartemplateLayers =arrayUtils.map(evt.layers,function(result){returnresult.layer;

});vartemplatePicker =newTemplatePicker({

featureLayers:templateLayers,grouping:true,rows:"auto",columns:3

},"templateDiv");templatePicker.startup();

Potongan coding diatas digunakan untuk melakukan pembuatan template picker

yang data-datanya diisi dari layer-layer yang ada didalam peta. Didalam properties

didalam template picker ini dapat dilihat ada banyak attributes yang bisa disetting

didalam template picker ini.

varlayers =arrayUtils.map(evt.layers,function(result){return{featureLayer:result.layer };

});varsettings ={

map:map,templatePicker:templatePicker,layerInfos:layers,toolbarVisible:true,createOptions:{polylineDrawTools:[Editor.CREATE_TOOL_FREEHAND_POLYLINE ],polygonDrawTools:[Editor.CREATE_TOOL_FREEHAND_POLYGON,

Editor.CREATE_TOOL_CIRCLE,Editor.CREATE_TOOL_TRIANGLE,Editor.CREATE_TOOL_RECTANGLE

]},toolbarOptions:{reshapeVisible:true

}};

Setelah template picker ditambahkan kedalam aplikasi, berikutnya yang harus

dilakukan adalah membuat settings untuk parameter editor. Langkah pertamanya

adalah untuk mendapatkan semua feature layer didalam peta. Kemudian dibuat setting

untuk editor dimana untuk parameter yang dapat diisikan dapat dilihat pada potongan

coding diatas.

varparams ={settings:settings};varmyEditor =newEditor(params,'editorDiv');


45/46

varsymbol =newSimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS, 15,newSimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,newColor([255,0,0,0.5]),5),null

);map.enableSnapping({

snapPointSymbol:symbol,tolerance:20,snapKey:keys.ALT

});

myEditor.startup();

Setelah settingan untuk editor telah selesai dibuat maka berikut nya kita dapat

mulai menambahkan sebuah editor kedalam map. Setelah editor ditambahkan, kita juga

dapat menambahkan snapping. Yang diperlukan untuk membuat sebuah snapping

adalah snap symbol yang dideklarasikan seperti potongan coding diatas, dan key yang

digunakan untuk melakukan snapping.

Dengan menggunakan potongan-potongan coding diatas, aplikasi editing dengan

menggunakan editor sudah dapat digunakan. Berikut adalah tampilan untuk aplikasi

dengan menggunakan editor ini.

Gambar 15

Tampilan Aplikasi Editing dengan menggunakan Editor


46/46

Kelebihan ArcGIS API untuk JavaScript

ArcGIS API untuk javascript dapat digunakan bersama framework dan library javascriptlainnya. Sehingga dapat mempermudah developer untuk membuat website yang

menggunakan ArcGIS. ArcGIS API untuk javascript dapat dikatakan API yang paling simpel untuk meng-embed

map kedalam website. Tidak diperlukan tool-tool berat untuk menambahkan ArcGIS API

kedalam website. Hanya diperlukan text editor untuk melakukannya.

API dibuat berdasarkan murni HTML dan javascript saja sehingga tidak diperlukan add-ins untuk browser jika menggunakan API ini. Website yang dibuat dengan

menggunakan API ini memiliki performa yang bagus dan cukup cepat untuk dimuat.

Tidak diperlukan Tool yang mahal-mahal untuk menggunakan API ini. Denganmenggunakan tool gratis kita dapat mulai mendevelop sebuah aplikasi dengan

menggunakan ArcGIS API ini. Powerful tetapi ringan untuk digunakan.

Kekurangan ArcGIS API untuk JavaScript

Harus dijalankan pada webserver / dihosting. User dapat memblock javascript pada browsernya sehingga tidak dapat mengakses

aplikasi dengan API ini.

Perlu dilakukan pengecekan terhadap semua browser yang dapat memakan waktudibandingkan dengan ArcGIS untuk flex yang hanya memerlukan flash player. Terutama

untuk internet explorer dengan pengamanan javascript yang ketat.

Performa untuk melakukan render graphic tergantung pada browser yang digunakan.

[Arcgis] Riset ArcGIS JS & Flex

Documents

Transcript of [Arcgis] Riset ArcGIS JS & Flex