gis_app/main.js

// $( "#dynamic-header" ).load( "pages/header.html" );
// $( "#dynamic-main" ).load( "pages/body.html" );
$(document).ready(function () {
    require([
        "esri/config",
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Home",
        "esri/widgets/LayerList"
    ], (esriConfig, WebMap, MapView, Home, LayerList) => {

        esriConfig.portalUrl = "https://dev.gisportal.id/portal";
        const gpUrl = "https://dev.gisportal.id/server/rest/services/mfajri/Buffer_Sample_Geoprocessing/GPServer/Model";
        document.getElementById('procces').addEventListener('click', e => {
            CLipnBuffer()
        })
        const webmap = new WebMap({
            portalItem: {
                id: "60994025213a4874bdb2e39503c72407"
            }
        });
    
        const view = new MapView({
          container: "content",
          map: webmap,
          zoom: 16,
          center: [106.840837, -6.294844],
        });

        let homeButton = new Home({
            view: view,
            container: "HomeButton"
          });

        let layerList = new LayerList({
            view: view,
            listItemCreatedFunction: (event) => {
                console.log(event);
                
                const item = event.item;
                if (item.layer.type != "group") {
                  // don't show legend twice
                  item.panel = {
                    content: "legend",
                    open: true
                  };
                }
            }
        });

        console.log(webmap.allLayers)
        view.ui.add(layerList, {
            position: "top-right"
        });

        const CLipnBuffer = function() {
            // const params = {
            //     Pipeline_Inspection: 
            // }
        }
        
        
      });
})