PANDUAN PENGEMBANG Penggunaan Service Peta Rupabumi...
8
PANDUAN PENGEMBANG Penggunaan Service Peta Rupabumi Indonesia (RBI) sebagai Basemap di Aplikasi Web GIS Pusat Pengelolaan dan Penyebarluasan Informasi Geospasial Badan Informasi Geospasial
Transcript of 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>
<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); 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; } } </script> </html> Tampilandibrowser(tampilandefaultbasemapPetaRBI)
Tampilandibrowser(tampilansaatdipilihOpenStreetMap)
Tampilandibrowser(tampilansaatdipilihESRIImagery)
Catatan:
Penggunaannamafile,variabel,pengaturanstyleCSS,strukturdirektoriaplikasi
merupakancontoh.Implementasiyangberbedadapatdilakukanpengembang
sesuaidengankebutuhansistem/aplikasiyangdibangun.
