panduan pengembang penggunaan service peta rupabumi...

PANDUANPENGEMBANG

PenggunaanServicePetaRupabumiIndonesia(RBI)sebagaiBasemapdiAplikasiWebGIS

PusatPengelolaandanPenyebarluasanInformasiGeospasialBadanInformasiGeospasial

PenggunaandilibraryLeafletJSUnduhlibraryjavascript(.js)disitusleafletjs.com

VersiyangdigunakandalampanduaniniadalahLeafletJsversi1.6.0Unduhlibraryesrileafletdisitusesri.github.io/esri-leaflet/

VersiyangdigunakandalampanduaniniadalahEsriLeafletversi2.3.2Tempatkan file leaflet.js dan esri-leaflet.js di folder aplikasi (buat folder barudengannamajs)

Tempatkan file leaflet.css (di hasil unduhan leaflet.zip) ke folder aplikasi (buatfolderbarudengannamacss)

Buatfilehtmlbaru(simpandengannamabasemap.html)Buattag<head>,tempatkankonfigurasifileleaflet.js,esri-leaflet.jsdanleaflet.cssdidalamnya.

<html> <head> <title>Basemap RBI BIG - Leaflet</title> <script src="js/leaflet.js"></script> <script src="js/esri-leaflet.js"></script>

<link rel="stylesheet" href="css/leaflet.css"> </head> Buat tag <body>di bawah tag <head>, tambahkandi dalamnya komponendivdengan nama id=’map. Komponen div tersebut akan digunakan untukmenampilkanbasemapserviceRBI.<body> <div id="map" style="width: 100%;height: 100%"></div> </body>Buat kode Javascript di bawah tag <body>, tuliskan fungsi esri-leaflet untukmengakses dan menyajikan Service RBI. URL Service RBI dapat diakses dialamat:https://portal.ina-sdi.or.id/arcgis/rest/services/RBI/Basemap/MapServer<script> var myMap=L.map('map').setView([-1.789275,118],6); var rbi= L.esri.tiledMapLayer( {url: "https://portal.ina-sdi.or.id/arcgis/rest/services/RBI/Basemap/MapServer"}).addTo(myMap); </script>Kodelengkap:<html> <head> <title>Basemap RBI BIG - Leaflet</title> <script src="js/leaflet.js"></script> <script src="js/esri-leaflet.js"></script> <link rel="stylesheet" href="css/leaflet.css"> </head> <body> <div id="map" style="width: 100%;height: 100%"></div> </body> <script> var myMap=L.map('map').setView([-1.789275,118],5); var rbi= L.esri.tiledMapLayer( {url: "https://portal.ina-sdi.or.id/arcgis/rest/services/RBI/Basemap/MapServer"}).addTo(myMap); </script> </html>

Koordinat Center Zoom level

Tampilandibrowser

Selain Service Basemap dari BIG, dapat ditambahkan pilihan basemap dari

sumberlain.SumberbasemapyangdapatdigunakanantaralaindariOpenStreet

Map (OSM), ESRI, Google, MapBox, dll. Langkah-langkah penulisan kode

program:

-Tambahkandivbaru(berinamaid=”basemap”)didalamtag<body>.Aturstyle

supayadaftarpilihanbasemaptampildikananatas(dapatdisimpandi file .css

terpisah).Didalamdivbasemap,tambahkantigaradiobuttondengannamayang

sama (name=”pil_basemap”) dan isi label sesuai sumber basemap yaitu “Peta

RBI”, “Open Street Map” dan “ESRI Imagery”. Tambahkan event onclick yang

mengarahke fungsi Javascriptbasemap(). Isikanparameter (tipestring)dalam

fungsibasemap.Kodeprogramdisajikansebagaiberikut:

<body> <div id="map" style="width: 100%;height: 100%" ></div> <div id="basemap"

style="top:3%;right:3%;position:absolute;z-index: 999;display:block; background-color:white;padding:10px;border:2px black solid"></>

<strong>Pilihan Basemap</strong> <br/> <input type="radio" name="pil_basemap" onclick="baseMap('rbi')">Peta RBI<br> <input type="radio" name="pil_basemap" onclick="baseMap('osm')">Open Street Map<br> <input type="radio" name="pil_basemap" onclick="baseMap('imgesri')">ESRI Imagery </div> </body>

- Tambahkan kode program javascript untuk pengaturan tampilan basemapsesuaipilihanvar rbi= L.esri.tiledMapLayer( {url: "https://portal.ina-sdi.or.id/arcgis/rest/services/RBI/Basemap/MapServer"}).addTo(myMap); var osm=L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'); var imgesri=L.esri.basemapLayer("Imagery"); bm_on=rbi; function baseMap(bm){ if (bm=="rbi"){ myMap.removeLayer(bm_on); rbi.addTo(myMap); bm_on=rbi; } else if (bm=="osm"){ myMap.removeLayer(bm_on); osm.addTo(myMap); bm_on=osm; } else if (bm=="imgesri"){ myMap.removeLayer(bm_on); imgesri.addTo(myMap); bm_on=imgesri; } } Kodeprogramlengkap:<html> <head> <title>Basemap RBI BIG - Leaflet</title> <script src="js/leaflet.js"></script> <script src="js/esri-leaflet.js"></script> <link rel="stylesheet" href="css/leaflet.css"> </head> <body> <div id="map" style="width: 100%;height: 100%" ></div> <div id="basemap" style="top:3%;right:3%;position:absolute;z-index: 999;display:block;background-color:white;padding:10px;border:2px black solid"></> <strong>Pilihan Basemap</strong> <br/> <input type="radio" name="pil_basemap" onclick="baseMap('rbi')">Peta RBI<br> <input type="radio" name="pil_basemap" onclick="baseMap('osm')">Open Street Map<br> <input type="radio" name="pil_basemap" onclick="baseMap('imgesri')">ESRI Imagery </div> </body>

Tampilandibrowser(tampilansaatdipilihOpenStreetMap)

Tampilandibrowser(tampilansaatdipilihESRIImagery)

Catatan:

Penggunaannamafile,variabel,pengaturanstyleCSS,strukturdirektoriaplikasi

merupakancontoh.Implementasiyangberbedadapatdilakukanpengembang

sesuaidengankebutuhansistem/aplikasiyangdibangun.

panduan pengembang penggunaan service peta rupabumi...

Documents