[GIS] Populating a Dojo widget with country names based on an ESRI hosted layer

arcgis-javascript-apifeature-layer

Wow, Javascript is not that easy – can someone help me make a simple breakthrough just to understand some basic concepts.

Does anyone know how to populate a filteringSelect Dojo dijit with the names of countries from:

http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/6

I have the following code to make a featureLayer:

countryLayer = new esri.layers.FeatureLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/6",{
                          mode:esri.layers.FeatureLayer.MODE_SELECTION,
                          setMaxAllowableOffset:maxOffset(map,1),
                          outFields:["NAME"]
                        });

I think the next step is to somehow loop through all the country names and populate the dijit – but I'm struggling with this.

I have my HTML for the dijit something like this, but I'm not even sure if thats right:

<div dojotype="dijit.layout.ContentPane" title="Test" >
            <input id="filteringSelect" jsid="filteringSelect" data-dojo-type="dijit.form.FilteringSelect" data-dojo-props="
                                                placeHolder:'Country',
                                                store:countryStore,
                                                searchAttr:'NAME',
                                                name:'NAME'">
        </div>

Best Answer

If I understand you correctly, you just want to query for the names... correct? The better way to do that is with the query task.

https://developers.arcgis.com/javascript/jssamples/index.html#query_and_select

https://developers.arcgis.com/javascript/jssamples/query_nomap.html

Once you execute the query, you can do what you want with the data. I am not familiar with dojo yet but this should point you in the right direction.

Related Solutions

[GIS] Adapting ESRI ArcGIS API for JavaScript Feature Layer With Selection sample for use in Configurable Map Viewer (CMV)

The following configuration below seems to be working fine. I'd appreciate any issues being pointed out.

The configuration of the widget:

select: {
                include: true,
                id: 'select',
                type: 'titlePane',
                canFloat: true,
                path: 'gis/dijit/Select',
                title: 'Select',
                open: false,
                position: 10,
                options: {
                    map: true,
                    mapClickMode: true,
                    featureLayerURL: 'http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1',
                    content: "<b>Status</b>: ${STATUS}" +
                            "<br><b>Cumulative Gas</b>: ${CUMM_GAS} MCF" +
                            "<br><b>Total Acres</b>: ${APPROXACRE}" +
                            "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters",
                    title: '${FIELD_NAME}',
                    defExpress: "PROD_GAS='Yes'",
                    clearSelectMsg: 'No Selected Fields',
                    fieldToSum: 'CUMM_GAS',
                    selectSumMsgPrefix: 'Selected Fields Production:',
                    selectSumUnits: 'mcf'
                }
            },

The widget:

define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'esri/toolbars/draw',
'esri/InfoTemplate',
'esri/layers/FeatureLayer',
'esri/symbols/SimpleFillSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/Color',
'esri/tasks/query',
'dijit/form/Button',
'dojo/_base/lang',
'dojo/on',
'dojo/_base/array',
'dojo/dom',
'dojo/text!./Select/templates/Select.html',
'xstyle/css!./Select/css/Select.css'
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Draw, InfoTemplate, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, Color, Query, Button, lang, on, arrayUtil, dom, SelectTemplate, css) {
    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
        widgetsInTemplate: true,
        templateString: SelectTemplate,
        selectTools: null,

        postCreate: function () {
            this.selectTools = new Draw(this.map);

            this.selectQuery = new Query();

            on(this.selectTools, "DrawEnd", lang.hitch(this, function (geometry) {
                this.selectTools.deactivate();
                this.selectQuery.geometry = geometry;
                this.featureLayer.selectFeatures(this.selectQuery,
                FeatureLayer.SELECTION_NEW);
            }));

            this.fieldsSelectionSymbol =
                new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                new Color([255, 0, 0]), 2),
                new Color([255, 255, 0, 0.5]));


            var infoTemplate = new InfoTemplate(this.title, this.content);

            this.featureLayer = new FeatureLayer(this.featureLayerURL,
            {
                mode: FeatureLayer.MODE_ONDEMAND,
                infoTemplate: infoTemplate,
                outFields: ["*"]
            });

            this.featureLayer.setDefinitionExpression(this.defExpress);
            this.featureLayer.setSelectionSymbol(this.fieldsSelectionSymbol);
            this.featureLayer.on("selection-complete", lang.hitch(this, 'sumGasProduction'));
            var clearMsg = this.clearSelectMsg;
            this.featureLayer.on("selection-clear", function () {
                dom.byId('messages').innerHTML = "<i>" + clearMsg + "</i>";
            });

            this.map.addLayer(this.featureLayer);

        },

        select: function () {
            this.selectTools.activate(Draw.EXTENT);
        },
        clearSelection: function () {
            this.featureLayer.clearSelection();
        },


        sumGasProduction: function (event) {
                        var productionSum = 0;
                        var sumField = this.fieldToSum;

                        arrayUtil.forEach(event.features, function (feature) {
                            productionSum += feature.attributes[sumField];

                        });
                        dom.byId('messages').innerHTML = "<b>" + this.selectSumMsgPrefix + " " + productionSum + " " + this.selectSumUnits + ". </b>";
                    }
    });
});

Related Question