WebGIS Enterprises 1

Pada artikel sebelumnya (Dasar-Web-GIS-Arcgis-Server-ESRI) saya telah menjelaskan bagian mana cara menggabung dua buah projek dasar dari ArcGis Developer, dalam kesempatan kali ini saya akan embahan bagiaman memodifikasi lokasi default yang akan di tampilkan ketika aplikasi Web GIS pertamakali di buka.

Bagian yang harus di ubah adalah :

map = new Map("map", {
        basemap:"topo",
        center: [-96.53, 38.374],
        zoom: 13
      });

karena saya berada di Indonesia khususnya di Kalimantan Selatan saya akan rubah menjadi sebagai berikut:

map = new Map("map", {
        basemap:"satellite",
        center: [115.255, -2.822],
        zoom:8,
      });

 Pada bagiam Map Service saya akan mengganti degan map service yang ada di Katalog Simpul Jaringan Provinsi Kalimatan Selatan (http://geoportal.kalselprov.go.id:88/WebPortal/Katalog)

Code Sebelumnya :

 map = new Map("map", {
        basemap:"satellite",
        center: [115.255, -2.822],
        zoom:8,
      });

      var rivers = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      var waterbodies = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });

 map.addLayers([rivers,waterbodies]);

 Code Baru

  var AdminProv = new FeatureLayer("http://geoportal.kalselprov.go.id:6080/arcgis/rest/services/Kalsel/BatasAdministrasi/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      
      var AdminKab = new FeatureLayer("http://geoportal.kalselprov.go.id:6080/arcgis/rest/services/Kalsel/BatasAdministrasi/MapServer/1", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      var AdminKec = new FeatureLayer("http://geoportal.kalselprov.go.id:6080/arcgis/rest/services/Kalsel/BatasAdministrasi/MapServer/2", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      var AdminDesa = new FeatureLayer("http://geoportal.kalselprov.go.id:6080/arcgis/rest/services/Kalsel/BatasAdministrasi/MapServer/3", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      
      var JenisTanah = new FeatureLayer("http://geoportal.kalselprov.go.id:6080/arcgis/rest/services/Kalsel/KALSEL_TANAH_AR_250K/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });

// dan seterusnya

 map.addLayers([JenisTanah,AdminDesa,AdminKec,AdminKab, AdminProv]);

Code Lengkapnya Seperti berikut :

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Basic Setting WebGIS</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">

  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #rightPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
  </style>

  <script src="https://js.arcgis.com/3.16/"></script>
  <script>
    var map;
    require([
      //Basemap Class
      "esri/dijit/BasemapGallery", "esri/arcgis/utils",
            
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
      "dojo/_base/array", "dojo/parser",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
      "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      BasemapGallery, arcgisUtils,
      Map, FeatureLayer, Legend,
      arrayUtils, parser
    ) {
      parser.parse();

      map = new Map("map", {
        basemap:"satellite",
        center: [115.255, -2.422],
        zoom:8,
      });

      var AdminProv = new FeatureLayer("http://geoportal.kalselprov.go.id:6080/arcgis/rest/services/Kalsel/BatasAdministrasi/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      
      var AdminKab = new FeatureLayer("http://geoportal.kalselprov.go.id:6080/arcgis/rest/services/Kalsel/BatasAdministrasi/MapServer/1", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      var AdminKec = new FeatureLayer("http://geoportal.kalselprov.go.id:6080/arcgis/rest/services/Kalsel/BatasAdministrasi/MapServer/2", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      var AdminDesa = new FeatureLayer("http://geoportal.kalselprov.go.id:6080/arcgis/rest/services/Kalsel/BatasAdministrasi/MapServer/3", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      
      var JenisTanah = new FeatureLayer("http://geoportal.kalselprov.go.id:6080/arcgis/rest/services/Kalsel/KALSEL_TANAH_AR_250K/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });

      map.addLayers([JenisTanah,AdminDesa,AdminKec,AdminKab, AdminProv]);
      
      //add the legend
      map.on("layers-add-result", function (evt) {
        var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
          return {layer:layer.layer, title:layer.layer.name};
        });
        if (layerInfo.length > 0) {
          var legendDijit = new Legend({
            map: map,
            layerInfos: layerInfo
          }, "legendDiv");
          legendDijit.startup();
        }
      });

            
       //BASEMAP GALERY yang ditambahkan
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });
      
    });
  </script>
</head>

<body class="claro">

<style>
  html, body {
    margin: 0;
  }
</style>

<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Pane 2'">
        This pane could contain tools or additional content
      </div>
    </div>
  </div>
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
       
       <!-- BASEMA GALERY -->
       <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane" 
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>
       
  </div>
</div>
</body>

</html>

View live sample
Download as a zip file


Comments

  • A Name wrote:

    This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.

  • A Name wrote:

    This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.

  • A Name wrote:

    This is an example of a comment made on a post. You can either edit the comment, delete the comment or reply to the comment. Use this as a place to respond to the post or to share what you are thinking.


Write A Comment

 

Dasar Web GIS Arcgis Server ESRI

Cara Mebuat web GIS mengunakan tools ArcGIS dari ESRI dengan menggabungkan contoh-contoh project serderhana dari developers.arcgis.com.

Continue Reading »

Website Universitas Islam Kalimantan (UNISKA) Syekh Muhammad Arsyad Al-Banjary - Jl.Adhyaksa No.2 Kayu Tangi - Banjarmasin.

Continue Reading »

Website Fakultas Teknologi Informasi Universitas Islam Kalimantan (UNISKA) Syekh Muhammad Arsyad Al-Banjary.

Continue Reading »

Unit Kegiatan Mahasiswa Paduan Suara UNISKA MAB (UKM-PSU).

Continue Reading »

link Elearning

Statistik Pengunjung

  • Total Total Kunjungan : 34535
  • Total Total Hits : 24
  • Today Kunjungan Hari Ini : 6
  • Online Online User : 1
  • Update Last Update : 12-03-2016