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",
        "esri/layers/GraphicsLayer",
        "esri/Graphic",
        "esri/rest/support/LinearUnit",
        "esri/rest/geoprocessor",
        "esri/layers/FeatureLayer",
        "esri/widgets/Print"
    ], (esriConfig, WebMap, MapView, Home, LayerList, GraphicsLayer, Graphic, LinearUnit, geoprocessor, FeatureLayer, Print) => {

        esriConfig.portalUrl = "https://dev.gisportal.id/portal";
        const gpUrl = "https://dev.gisportal.id/server/rest/services/mfajri/Buffer_Sample_Geoprocessing/GPServer/Buffer";
        
        const webmap = new WebMap({
            portalItem: {
                id: "60994025213a4874bdb2e39503c72407"
            }
        });
    
        let view = new MapView({
          container: "content",
          map: webmap,
          zoom: 16,
          center: [106.840837, -6.294844],
        });

        let polylineAtt = {
            Name: "Buffer Area",
            Owner: "MCF"
        };
          
        
        const graphicsLayer = new GraphicsLayer();
        

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

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

        const fillSymbol = {
            type: "simple-fill",
            color: [168, 0, 0, 0.17],
            outline: null
        };

        document.getElementById('procces').addEventListener('click', e => {
            CLipnBuffer()
        })


        const CLipnBuffer = function() {
            graphicsLayer.removeAll();
            let radius = document.getElementById("radiusDistance").value;
            let unit = document.getElementById("Unit").value;
            let source = document.getElementById("Layer").value;
            const featureLayer = new FeatureLayer({
                url: source
            });
            let query = featureLayer.createQuery()
            query.where = "1=1"
            featureLayer.queryFeatures(query).then((result)=>{
                const params = {
                    Pipeline_Inspection: result,
                    Distance__value_or_field_: {
                    "distance": radius,
                    "units": unit
                    }, 
                    f: "pjson"
                };
                geoprocessor.execute(gpUrl, params).then(drawResultData);
            })
            
        }

        const drawResultData = function (result) {
            const resultFeatures = result.results[0].value.features;
            const viewshedGraphics = resultFeatures.map((feature) => {
                feature.symbol = fillSymbol;
                // console.log(feature);
                
                return feature;
            });
            graphicsLayer.addMany(viewshedGraphics);
            webmap.add(graphicsLayer);

            view.goTo({
                target: viewshedGraphics,
                tilt: 0
            })
              .catch((error) => {
                if (error.name != "AbortError") {
                  console.error(error);
                }
            });
        }

        view.when( ()=> {
            view.map.loadAll().then(() => {
                view.map.layers.forEach((layer) => {
                    let url = layer.url
                    let layerId = layer.layerId
                    let layerSource = url+"/"+layerId
                    $('#Layer').append('<option value="'+layerSource+'">'+layer.title+'</option>')
                })
        })

        const print = new Print({
                view: view,
                container: "printService",
                label: "adaddawdawdawdaw",
                printServiceUrl:
                  "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
            });
        })
        


        document.getElementById('reset').addEventListener('click', e => {
            resetClipnBuffer()
        })

        const resetClipnBuffer = function() {
            graphicsLayer.removeAll();
            const foundLayer = webmap.allLayers.find(function(layer) {
                return layer.title === "PIPELINE INSPECTION";
            });
        }

        document.getElementById('bufferTogle').addEventListener('click', e => {
            $("#collapsePrint").collapse('hide');
            $("#map").removeClass("col-md-12");
            $("#map").addClass("col-md-10");
        })

         $('#collapseBuffer').on('hidden.bs.collapse', function () {
            $("#map").removeClass("col-md-10");
            $("#map").addClass("col-md-12");
            if($('#collapsePrint').hasClass('collapse')){
            }
            else{
                $("#map").removeClass("col-md-12");
                $("#map").addClass("col-md-10");
            }
         });

         document.getElementById('printTogle').addEventListener('click', e => {
            $("#collapseBuffer").collapse('hide');
            $("#map").removeClass("col-md-12");
            $("#map").addClass("col-md-10");
        })

        $('#collapsePrint').on('hidden.bs.collapse', function () {
            $("#map").removeClass("col-md-10");
            $("#map").addClass("col-md-12");
            if($('#collapseBuffer').hasClass('collapse')){
            }
            else{
                $("#map").removeClass("col-md-12");
                $("#map").addClass("col-md-10");
            }
         });


        



        
        
      });
})