WebGIS Enterprises 2

Pada sesi kali ini saya akan melakukan pemggabungan kembali pada project sebelunya, pada sesi kali ini ada sedikit modifikasi pada Layer,

Projct berikut ini adalah menambahkan Dynamic Map Server dilengkapi degan Tabel Of Conten (Table of Contents (TOC)/Legend Widget for JavaScript API) yang bisa anda download di halaman berikut

http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

Setelah anda download ada dua (build, src) folder yang harus anda masukkan kedalam folder project web anda

Setelah Siap lakukan penambahan Class dan Function variabel, 

1. Buka file project sebelumnya sipan degan nama AddTOC.html  simpan satu folder degan komponen TOC yang      di download tadi

2 . Buka file toc.html yang ada didalam folder "examples"

3. Pada Bagian Head Tambahkan Link CSS

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

Ganti menjadi :  

  <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.7/js/esri/css/esri.css" />
  <link rel="stylesheet" type="text/css" href="src/agsjs/css/agsjs.css" /> 

4. Tambahkan kembali code Javascrip yang ada di file toc.html setelah code CSS

         <script type="text/javascript">
          // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
         // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/
                  var dojoConfig = { 
                    paths: {
                      //if you want to host on your own server, download and put in folders then use path like: 
                            agsjs: location.pathname.replace(/\/[^/]+$/, '') + '../src/agsjs' 
                        }
                  };
        </script>
        <script src="//js.arcgis.com/3.7/"></script>

Code Lokasi scrip TOC.js harus disesuaikan '/../src/agsjs'

agsjs: location.pathname.replace(/\/[^/]+$/, '') + '../src/agsjs' 

Sehingga Code pada project sebelumnya menjadi

 <title>Basic Setting WebGIS</title>
   <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.7/js/esri/css/esri.css" />
  <link rel="stylesheet" type="text/css" href="src/agsjs/css/agsjs.css" />

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

    #rightPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
  </style>
        <script type="text/javascript">
                        // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
                  // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/
                  var dojoConfig = { 
                    paths: {
                      //if you want to host on your own server, download and put in folders then use path like: 
                            agsjs: location.pathname.replace(/\/[^/]+$/, '') + '../src/agsjs' 
                        }
                  };   
        </script>
     <script src="//js.arcgis.com/3.7/"></script>
  <script src="https://js.arcgis.com/3.16/"></script>

5. Tambahkan deklarasi variabel :

 var map, toc, dynaLayer1, dynaLayer2, featLayer1;

6. tambahkan Class yang diperlukan TOC, yang belum tersedia pada project sebelumnya, pastikan urutan class dan function variabel sama

      "dojo/_base/connect",
      "dojo/dom", "dojo/on", "dojo/_base/Color",
      "esri/geometry/Extent", 
      "esri/layers/ArcGISTiledMapServiceLayer", 
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/symbols/SimpleFillSymbol",
       "esri/renderers/ClassBreaksRenderer",
       "agsjs/dijit/TOC",

      "dojo/fx",

dan function variabel :

      connect, dom, on,Color,Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,ClassBreaksRenderer,TOC

sehingga hasilnya menjadi seperti berikut:

    var map, toc, dynaLayer1, dynaLayer2, featLayer1;
    require([
      //Basemap Class
      "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      
      //TOC 
      "dojo/_base/connect",
      "dojo/dom", "dojo/on", "dojo/_base/Color",
      "esri/geometry/Extent", 
      "esri/layers/ArcGISTiledMapServiceLayer", 
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/renderers/ClassBreaksRenderer",
       "agsjs/dijit/TOC", 
      
      //Project awal      
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
      "dojo/_base/array", "dojo/parser",
      "dojo/fx",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
      "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      BasemapGallery, arcgisUtils,
      connect, dom, on,Color,Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,ClassBreaksRenderer,TOC
      Map, FeatureLayer, Legend,
      arrayUtils, parser
    ) {
      parser.parse();

 7. Setalah menambahkan class dan function variabel, selanjutnya modifikasi javascrip Add Layer, dengan cara hapus semua code berikut yang ada pada project sebelumnya:

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]);

 8. Setelah menghapus code diatas copy paste code Add Dynamic layer yang ada pad file toc.html ke file project Add TOC.html

dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyOperationalLayers/MapServer", {
                opacity: 0.8
              });
              featLayer1 = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/1", {
                mode: FeatureLayer.MODE_SNAPSHOT,
                outFields: ["POP07_SQMI"]
              });
              featLayer1.setDefinitionExpression("STCOFIPS='21111'"); //Louisville, KY
             
              map.on('layers-add-result', function(evt){
                // overwrite the default visibility of service.
                // TOC will honor the overwritten value.
                dynaLayer1.setVisibleLayers([2, 5, 8, 11]);
                //try {
                  toc = new TOC({
                    map: map,
                    layerInfos: [{
                      layer: featLayer1,
                      title: "FeatureLayer1"
                    }, {
                      layer: dynaLayer1,
                      title: "DynamicMapServiceLayer1"
                      //collapsed: false, // whether this root layer should be collapsed initially, default false.
                      //slider: false // whether to display a transparency slider.
                    }]
                  }, 'tocDiv');
                  toc.startup();
                  toc.on('load', function(){
                    if (console) 
                      console.log('TOC loaded');
                    dom.byId("ChangeFeatureRenderer").disabled = false;
                    dom.byId("SetVisibleLayersProgramatically").disabled = false;
                    dom.byId("FindNodeByLayer").disabled = false;
                    dom.byId("InsertNewLayer").disabled = false;
                  });
                  //2014-04-04: added event
                  toc.on('toc-node-checked', function(evt){
                      if (console) {
                        console.log("TOCNodeChecked, rootLayer:"
                        +(evt.rootLayer?evt.rootLayer.id:'NULL')
                        +", serviceLayer:"+(evt.serviceLayer?evt.serviceLayer.id:'NULL')
                        + " Checked:"+evt.checked);
                        if (evt.checked && evt.rootLayer && evt.serviceLayer){
                            // evt.rootLayer.setVisibleLayers([evt.serviceLayer.id])
                        }
                    }
                  });
                //} catch (e) {  alert(e); }
              });
              map.addLayers([dynaLayer1, featLayer1]);
              
              on(dom.byId("ChangeFeatureRenderer"), 'click', function(evt){
                //based on http://help.arcgis.com/EN/webapi/javascript/arcgis/jssamples/renderer_class_breaks.html
                var symbol = new SimpleFillSymbol();
                symbol.setColor(new Color([150, 150, 150, 0.5]));
                var renderer = new ClassBreaksRenderer(symbol, "POP07_SQMI");
                renderer.addBreak(0, 25, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
                renderer.addBreak(25, 75, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
                renderer.addBreak(75, 175, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
                renderer.addBreak(175, 400, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
                renderer.addBreak(400, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
                featLayer1.setRenderer(renderer);
                featLayer1.redraw();
                toc.refresh();
              });
              
              on(dom.byId("SetVisibleLayersProgramatically"),'click', function(evt){
                  dynaLayer1.setVisibleLayers([8, 17, 18, 19, 20]);
              });
              
              on(dom.byId("FindNodeByLayer"), 'click', function(evt){
                // 0 is the layerId of group "Public Safety"
                toc.findTOCNode(dynaLayer1, 0).collapse();
                //     12 is the id of layer "Damage Assessment"
                toc.findTOCNode(dynaLayer1, 12).hide();
              });
              
              on(dom.byId("InsertNewLayer"), 'click', function(evt){
                if (dynaLayer2 == null) {
                  dynaLayer2 = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", {
                    opacity: 0.8
                  });
                  var h = map.on('layer-add-result', function(evt){
                    toc.layerInfos.splice(1, 0, {
                      layer: dynaLayer2,
                      title: "DynamicMapServiceLayer2",
                      // collapsed: true, // whether this root layer should be collapsed initially, default false.
                      slider: true, // whether to display a transparency slider.
                      autoToggle: false //whether to automatically collapse when turned off, and expand when turn on for groups layers. default true. 
                    });
                    toc.refresh();
                    h.remove();
                    dom.byId("SetOpacity").disabled=false;
                  });
                  map.addLayer(dynaLayer2);
                  
                }
              });
              on(dom.byId("SetOpacity"), 'click', function(evt){
                if (dynaLayer2 != null) {
                  dynaLayer2.setOpacity(0.2);
                }
              });

 9. pada biagan HTML acoudion modifikasi menjadi seperti berikut

<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:'Tabel Of Conten'">
            <div id="tocDiv"></div>
      </div>

10. Copykan code HTML berikut pada bagian dalam DIV MAP

<!-- TOC Control/Testing  -->
       <div  class="Element"  style="position:absolute; right:160px; top:10px; z-Index:999;">
          <div id="titlePane"   data-dojo-type="dijit/TitlePane" data-dojo-props="title:' Measurement ', closable:false, open:false">
            <div>
                    <b>Table Of Content (TOC/Legend) Widget</b>
                    <a href='toc_classic.html'>Classic Style </a>
                    | <a href='toc.html'>AMD style</a>
                    <div style="right:20px;position: absolute">
                        <a href="../docs/toc/examples.html">Documentation</a>
                    </div>
                </div>
                <ul style="margin:2px">
                    <li>
                        Click check box in TOC to turn on/off layers. When click on groups, all sublayers will be turned on/off.
                    </li>
                    <li>
                        Click 
                        <button id="ChangeFeatureRenderer" disabled="disabled">
                            ChangeFeatureRenderer
                        </button>, notice TOC refreshed to reflect the new renderer of FeatureLayer. 
                    </li>
                    <li>
                        Click 
                        <button id="SetVisibleLayersProgramatically" disabled="disabled"">
                            SetVisibleLayersProgramatically
                        </button>
                        to programatically turn layer on/off, notice TOC automatically sync with model(no refresh needed).
                    </li>
                    <li>
                        Click 
                        <button id="FindNodeByLayer" disabled="disabled">
                            FindNodeByLayer
                        </button>
                        to programatically find node for layer inside a map service, then either hide (layer id=12,"Damage Assessment") or collapse (layer id=0,"Public Safety") it.
                    </li>
                    <li>
                        Click 
                        <button id="InsertNewLayer" disabled="disabled">
                            InsertNewLayer
                        </button>
                        to programmtically insert a layer then refresh TOC.
                    </li>
                    <li>
                        Click 
                        <button id="SetOpacity" disabled="disabled">
                            SetOpacityProgramitically
                        </button>
                        to programmtically set transparency of a layer with slider enabled.
                    </li>
                </ul>
            
          </div>
       </div>  

Sehingga code lengkapnya seperti berikut:

Compilt code 

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

 

Menampilkan Label dari Tabel Atribut

Dalam hal ini Nama kolom digunakan untuk mengambarkan nama wilayah, Agar dapat menampilkan text label kita hanya perlu apit dengan tanda kurung siku [ ]. Coding secara sederhana sebagi beriku.

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