Dasar Web GIS Arcgis Server ESRI

Bagaimana menggabungkan contoh - contoh project dari developers.arcgis.com mungkin ketikan mecoba mengabung malah terjadi error. hal ini disebabkan karena daftar Variabel tidak  sesuai dengan modul yang diinclude

require([
      "esri/map", 
      "esri/dijit/BasemapGallery", 
       "esri/arcgis/utils",
      "dojo/parser",

      "dijit/layout/BorderContainer", 
      "dijit/layout/ContentPane",
       "dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery, arcgisUtils, parser
    ) 

Perhatikan code diatas, penulisan code variabel  fuction haruas sesuai degan urutan require model, jika salah satu tertukan maka akan terjadi error, setelah code bagian ini benar baru anda gabungkan code javasrip  selanjutnya.

Contoh yang saya buat kali ini adalah saya mencoba menggabungkan project LEGENDA degan BASEMAP GALERY

   

1. Langkah pertama saya download dulu contoh  project Legenda di alamat https://developers.arcgis.com/javascript/jssamples/widget_legend.html

2. Setelah saya download caya mulai menambahkan kompene require, ada dua class yang ditambahkan "esri/dijit/BasemapGallery", "esri/arcgis/utils", sehingga menjadi seperti dibawah ini

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(

3. menambahkan variabel BasemapGallery, arcgisUtils sehingga menadi seperti ini:

, function(
      BasemapGallery, arcgisUtils,
      Map, FeatureLayer, Legend,
      arrayUtils, parser
    )

4. selanjutnya copy paste code javasrip basemap

 //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });

5. Selanutkan copy paste code HTML DIV basemap galery targer didalam DIV MAP

  <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>

6. Kalau kota lihat kode keseluruhan dalah sebagi 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>Map with legend</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:"topo",
        center: [115.53, -2.374],
        zoom: 13
      });

      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:["*"]
      });

      //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();
        }
      });

      map.addLayers([waterbodies, rivers]);
      
       //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">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<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

 

Tabel Edittor DotSpatial GIS

Tabel Edittor merupakan tool untuk mengelola basis data spasial. Tabel atribut gunakan untuk query dan analisis data dalam bentuk tabular.

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 : 23
  • Today Kunjungan Hari Ini : 6
  • Online Online User : 1
  • Update Last Update : 12-03-2016