An Intro to JS-XII

by SS1510   Last Updated September 09, 2019 16:16 PM - source

/*https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=tasks-query*/

define(['dojo/_base/declare', 'dojo/parser', 'jimu/BaseWidget', 'dojo/_base/connect', 'dijit/registry', 'dojo/ready', 'dojo/query', 'dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'dojo/_base/html', 'dojo/dom', 'dojo/on', 'esri/tasks/query', 'esri/graphic', 'esri/Color', 'esri/layers/GraphicsLayer', 'esri/tasks/QueryTask', 'esri/layers/FeatureLayer', 'esri/layers/Field', 'esri/request', 'dojo/store/Memory', 'jimu/LayerInfos/LayerInfos', 'esri/symbols/SimpleMarkerSymbol', 'dijit/form/FilteringSelect', 'dijit/form/TextBox', 'esri/InfoTemplate', 'dijit/form/Button', 'dijit/Dialog', 'dijit/form/TextBox','dijit/Dialog', 'dojo/domReady!', 'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-git1.min.js' ],

function (declare, parser, BaseWidget, connect, registry, query, ready, declare, lang, array, html, dom, on, Graphic, Color, GraphicsLayer,
    QueryTask, FeatureLayer, field, esriRequest, Memory, LayerInfos,
    SimpleMarkerSymbol, FilteringSelect, TextBox, InfoTemplate, Button, Dialog, TextBox, $) {
    return declare([BaseWidget], {
        //parser.parse();
        name: 'MyQueryCopy',
        baseClass: 'jimu-widget-myquerywidget',
        _grphcs: null,
        mapp: null,
        graphic: null,
        graphics: null,
        layer: null,
        queryType: null,
        category: null,
        feature: null,
        on: null,
        toDate: null,
        fromDate: null,
        url: null,
        state: null,
        prominence: null,
        stateName: null,
        queryType: 'State',
        queryString: null,
        featureType: null,
        condition: null,
        toHeight: null,
        fromHeight: null,
        queryResults: null,
        catOpt: null,
        ftType: null,
        query: null,
        arr: [],
        startup: function () {
            this.inherited(arguments);
            console.log('startup');
            mapp = this.map;

        },

        showResults: function (featureSet) {
            //var map = this.map;
            var mapLayer="";
            var infoTmplt="";
            var title = "";
            var content = "";
            this.layer = dom.byId('layerSelect').value;
            if (this.layer === 'MountainPeaks') {
                var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SOLID);
                title = "Mountain Peak Detail";
                content = "<b> STATE : </b> ${STATE}</br>" +
                    "<b> MTN_PEAK : </b> ${MTN_PEAK}</br>" +
                    "<b> ELEV_ft : </b> ${ELEV_ft}</br>" +
                    "<b> PROMINENCE_ft : </b> ${PROMINENCE_ft}</br>" +
                    "<b> ISOLATION_mi : </b> ${ISOLATION_mi}</br>" +
                    "<b> LAT : </b> ${LAT}</br>" +
                    "<b> LON : </b> ${LON}</br>";

            } else if (this.layer === 'ParksAndOpenSpace') {
                var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
                title = "Park And Open Spaces Details";
                content = "<b> UNIT_ID : </b> ${UNIT_ID}</br>" +
                    "<b> PARK_NAME : </b> ${PARK_NAME}</br>" +
                    "<b> PARK_LBL : </b> ${PARK_LBL}</br>" +
                    "<b> TYPE : </b> ${TYPE}</br>";
            }

            this.graphics = new esri.layers.GraphicsLayer();


            var resultFeatures = featureSet.features;
            console.log(resultFeatures);
                            var jsonString="";
            var header1='<table style="width:100%" class="result" id="t01"><tr>';
            var value1='<tr>';
                var finalVal1="";
            var style='<head><style> .result {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;} .result td, .result th {border: 1px solid #dddddd;text-align: left;padding: 8px;} .result tr:nth-child(even) {background-color: #dddddd;}</style></head>';



            for (var i = 0, il = resultFeatures.length; i < il; i++) {

                this.graphic = resultFeatures[i];
                console.log(this.graphic.attributes);
                jsonString += '<br>'+JSON.stringify(this.graphic.attributes)+'<br>';

                for (var key in this.graphic.attributes) {
                                       console.log("key " + key + " has value " + this.graphic.attributes[key]);
                   if((resultFeatures.length - i) == 1){

                      header1 +='<th>'+key+'</th>';
                   }

                   value1 +='<td>'+this.graphic.attributes[key]+'</td>';
                                    }

                value1=value1+'</tr>';
                finalVal1=value1+finalVal1;
                this.graphic.setSymbol(symbol);

                /****Source - https://developers.arcgis.com/javascript/3/jssamples/widget_formatInfoWindow.html****/
                var infoTmplt = new esri.InfoTemplate();
                infoTmplt.setTitle(title);
                infoTmplt.setContent(content);
                graphic.setInfoTemplate(infoTmplt);
                this.graphics.add(this.graphic);
                if((resultFeatures.length - i) != 1){
                   value1='<tr>';
                    }
                else{

                }

            }
            mapp.addLayer(this.graphics);
            header1=header1+'</tr>';
            var myDialog = new dijit.Dialog({
                            title: "Query Results",
                            content: '<html>'+style+'<body>'+header1+finalVal1+'</table></body></html>',
                            style: "width: 1000px"
                            });
                            myDialog.show();

        },

        _onBtnValidateClicked: function () {

            this.queryType = dom.byId('querySelect').value;
            if (this.queryType === 'Type') {
                var categoryType = dom.byId('categoryType').style.display="block";
                categoryType.disabled = false;
                var categoryTypeLbl = dom.byId('categoryTypeDropDown').style.display="block";

                var featureType = dom.byId('featureType').style.display="none";
                featureType.disabled = true;
                var featureTypeLbl = dom.byId('featureTypeDropDown').style.display="none";

                var condition = dom.byId('condition').style.display="none";
                condition.disabled = true;
                var conditionLbl = dom.byId('conditionDropDown').style.display="none";

                var toDate = dom.byId('toHeight').style.display="none";
                toDate.disabled = true;
                var toDateLbl = dom.byId('toDateDropDown').style.display="none";

                var fromDate = dom.byId('fromHeight').style.display="none";
                fromDate.disabled = true;
                var fromDateLbl = dom.byId('fromDateDropDown').style.display="none";

                var leaseLbl = dom.byId('leaseDropDown').style.display="none";
                var andLbl = dom.byId('andDropDown').style.display="none";
            } else {
                                    var categoryType = dom.byId('categoryType').style.display="none";
                categoryType.disabled = true;
                var categoryTypeLbl = dom.byId('categoryTypeDropDown').style.display="none";

                var featureType = dom.byId('featureType').style.display = "block";
                featureType.disabled = false;
                var featureTypeLbl = dom.byId('featureTypeDropDown').style.display="block";

                var condition = dom.byId('condition').style.display = "block";
                condition.disabled = false;
                var conditionLbl = dom.byId('conditionDropDown').style.display="block";

                var toDate = dom.byId('toHeight').style.display = "block";
                toDate.disabled = false;
                var toDateLbl = dom.byId('toDateDropDown').style.display="block";

                var fromDate = dom.byId('fromHeight').style.display = "block";
                fromDate.disabled = false;
                var fromDateLbl = dom.byId('fromDateDropDown').style.display="block";

                var leaseLbl = dom.byId('leaseDropDown').style.display="block";
                var andLbl = dom.byId('andDropDown').style.display="block";

            }


        },

        _onChangeCondition: function () {
            var condition = dom.byId('condition').value;
            if (condition === 'and') {
                var toDate = dom.byId('toHeight').style.display = "block";
                toDate.disabled = false;
                var toDateLbl = dom.byId('toDateDropDown').style.display="block";

                var fromDate = dom.byId('fromHeight').style.display = "block";
                fromDate.disabled = false;
                var fromDateLbl = dom.byId('fromDateDropDown').style.display="block";

                var andLbl = dom.byId('andDropDown').style.display="block";
            } else {
                var toDate = dom.byId('toHeight').style.display="none";
                toDate.disabled = true;
                var toDateLbl = dom.byId('toDateDropDown').style.display="none";

                var andLbl = dom.byId('andDropDown').style.display="none";
            }
        },

        _onBtnSubmitClicked: function () {

            this.queryString = '';
            this.layer = dom.byId('layerSelect').value;
            if (this.layer === 'MountainPeaks') {
                this.url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";
                this.queryType = dom.byId('querySelect').value;
                if (this.queryType === 'Type') {
                    this.state = 'STATE';
                }

            } else if (this.layer === 'ParksAndOpenSpace') {
                this.url = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0";
                this.queryType = dom.byId('querySelect').value;
                if (this.queryType === 'Type') {
                    this.state = 'TYPE';
                }

            }

            this.category = dom.byId('categoryType').value;

            if (this.queryType === 'Type') {

                this.queryString = this.state + "=" + "'" + this.category + "'";
            } else {

                this.feature = dom.byId('featureType').value;
                this.toDate = dom.byId('toHeight').value;

                this.fromDate = dom.byId('fromHeight').value;

                this.on = dom.byId('condition').value;
                if (this.on === '=') {
                    this.condition = '=';
                    this.queryString = this.feature + " " + this.on + " " + this.fromDate;

                } else if (this.on === '<') {
                    this.condition = '<';
                    this.queryString = this.feature + " " + this.on + " " + this.fromDate;
                } else if (this.on === '>') {
                    this.condition = '>';
                    this.queryString = this.feature + " " + this.on + " " + this.fromDate;
                } else {
                    this.condition = 'AND';
                    this.queryString = this.feature + " " + 'BETWEEN' + " " + this.fromDate + " " + this.on + " " + this.toDate;
                }
            }
            console.log(this.queryString);
            this._executeQuery();

        },

        _onBtnClearClicked: function () {

            /****Source - https://developers.arcgis.com/javascript/3/jsapi/graphicslayer-amd.html****/
            graphics.clear();
        },

        _executeQuery: function () {
            //var map = this.map;
            this.layer = dom.byId('layerSelect').value;
            if (this.layer === 'MountainPeaks') {
                this.url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";
            } else {
                this.url = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0";
            }
            queryTask = new esri.tasks.QueryTask(this.url);
            query = new esri.tasks.Query();
            query.returnGeometry = true;
            if (this.layer === 'MountainPeaks') {
                query.outFields = ["STATE", "MTN_PEAK", "ELEV_ft", "PROMINENCE_ft", "ISOLATION_mi", "LAT", "LON"];
            } else if (this.layer === 'ParksAndOpenSpace') {
                query.outFields = ["UNIT_ID", "PARK_NAME", "PARK_LBL", "TYPE"];
            }

            query.outSpatialReference = mapp.spatialReference;

            if (mapp.loaded) {
                query.where = this.queryString;
                queryTask.execute(query, this.showResults);
            } else {
                mapp.on("load", function () {
                    query.where = this.queryString;
                    queryTask.execute(query, showResults);
                });
            }

        },

        _onChangeClicked: function () {
            this._execute();

        },

        queryResult: function (featureSet) {
            var catOptions = ""; //Category Options
            var featrOptions = ""; //Feature Type
            this.layer = dom.byId('layerSelect').value;
            var array = [];
            if (this.layer === 'MountainPeaks') {
                //console.log('Features'+featureSet.features);
                var resultFeatures = featureSet.features //This is an array
                for (var i = 0, il = resultFeatures.length; i < il; i++) {
                    this.queryResults = resultFeatures[i];
                    array[i] = this.queryResults.attributes.STATE; //Fetched all the states which are of a category type which is analogous to the requirement
                }
                this.catOpt = [...new Set(array)]; //Set used to extract distinct states from the array
                //var key=[...new Map(array)];
                console.log(this.catOpt);
            } else{
                //console.log('Features'+featureSet.features);
                var resultFeatures = featureSet.features;
                for (var i = 0, il = resultFeatures.length; i < il; i++) {
                    this.queryResults = resultFeatures[i];
                    array[i] = this.queryResults.attributes.TYPE;

                }
                this.catOpt = [...new Set(array)];
                console.log(this.catOpt);

            }


            if (this.layer === 'MountainPeaks') {
                this.url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";
                var categoryOptions = this.catOpt; //["Alaska", "Hawaii"];
                for (var i = 0; i < categoryOptions.length; i++) {
                    catOptions += "<option value=" + "\"" + categoryOptions[i] + "\"" + ">" + categoryOptions[i] + "</option>";
                }
                document.getElementById("categoryType").innerHTML = catOptions;


                var mapLayer = new esri.layers.FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0", {
                    mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["*"]
                });
                var arr = [];
                dojo.connect(mapLayer, 'onLoad', function () {

                    for (i = 0; i < mapLayer.fields.length; i++) {
                        if(mapLayer.fields[i].type === "esriFieldTypeInteger"){
                        v = mapLayer.fields[i].name;
                        arr[i] = mapLayer.fields[i].name;
                        }
                    }
                    var featOptions = arr; //["ELEV_ft", "PROMINENCE_ft"];
                    for (var j = 0; j < featOptions.length; j++) {
                        if(featOptions[j] != undefined)
                        featrOptions += "<option value=" + "\"" + featOptions[j] + "\"" + ">" + featOptions[j] + "</option>";
                    }
                    document.getElementById("featureType").innerHTML = featrOptions;

                });

            } else if (this.layer === 'ParksAndOpenSpace') {
                this.url = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0";
                var categoryOptions = this.catOpt; //["Regional Open Space", "Natural Areas"];
                for (var i = 0; i < categoryOptions.length; i++) {
                    catOptions += "<option value=" + "\"" + categoryOptions[i] + "\"" + ">" + categoryOptions[i] + "</option>";
                }
                document.getElementById("categoryType").innerHTML = catOptions;


                var mapLayer = new esri.layers.FeatureLayer("https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0", {
                    mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["*"]
                });
                var arr = [];
                dojo.connect(mapLayer, 'onLoad', function () {

                    for (i = 0; i < mapLayer.fields.length; i++) {
                        if(mapLayer.fields[i].type === "esriFieldTypeInteger"){
                        v = mapLayer.fields[i].name;
                        arr[i] = mapLayer.fields[i].name;
                        }
                    }
                    var featOptions = arr; //["ELEV_ft", "PROMINENCE_ft"];
                    for (var j = 0; j < featOptions.length; j++) {
                        if(featOptions[j] != undefined)
                        featrOptions += "<option value=" + "\"" + featOptions[j] + "\"" + ">" + featOptions[j] + "</option>";
                    }
                    document.getElementById("featureType").innerHTML = featrOptions;

                });

            }

        },
        _execute: function () {

            query = new esri.tasks.Query();
            query.returnGeometry = true;
            this.layer = dom.byId('layerSelect').value;
            if (this.layer === 'MountainPeaks') {
                this.url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";
                query.outFields = ["STATE", "MTN_PEAK", "ELEV_ft", "PROMINENCE_ft", "ISOLATION_mi", "LAT", "LON"]; //Make it * to fecth all fields
                queryTask = new esri.tasks.QueryTask(this.url);
            } else {
                this.url = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0";
                query.outFields = ["UNIT_ID", "PARK_NAME", "PARK_LBL", "TYPE"];
                queryTask = new esri.tasks.QueryTask(this.url);
            }

            if (mapp.loaded) {
                query.where = "1=1";
                queryTask.execute(query, this.queryResult);
            } else {
                mapp.on("load", function () {
                    query.where = "1=1";
                    queryTask.execute(query, this.queryResult);
                });
            }

        }


    });
});
Tags : ux-field


Related Questions


How to optimise tree structure menu

Updated April 13, 2015 20:07 PM

A simplified version of UX designer competencies

Updated May 20, 2015 03:07 AM

Force naming item using modal

Updated April 20, 2015 22:07 PM

UX Designers - working with developers

Updated June 02, 2015 23:07 PM

finding a UX mentor help me out

Updated July 09, 2015 13:07 PM