Creating a multivariate renderer for a featurelayer created from points

[DavidChevrier]

Hi,

     I'm creating a feature layer using results from a user's selection by querying an oracle database and using the lat/lon's to create a featurelayer.  I love the smart mapping code, however I'd like to create a multivariant renderer as easy as I create this createClassedSizeRenderer.  Basically, I want the size of the dots to be based on the "expWT" field and the color to be a gradient based on the "expNum" field.

Below is the code I'm using to create and render the feature layer.  Any help would be greatly appreciated.

Thanks,

dave

// get data for selected species and create and symbolize feature layer

 function speciesSelected() {

     // selected code and species need for oracle query
      var species = dijit.byId('selectSpecies').attr('displayedValue');
      var svspp = dijit.byId('selectSpecies').attr('value');

      // make sure they were successfully passed
      if ((species == "") || (svspp == "")) {
            return;
       }
       

       var features = [];
       var oReq = new XMLHttpRequest();
       oReq.onreadystatechange = function () {
             if (oReq.readyState == 4 && oReq.status == 200) {

                   var speciesData = oReq.responseText;

                   var lines = speciesData.split("\n");
                   for (var i = 0; i < (lines.length - 1) ; i++) {
                         var receivedData = lines.split(",");
                         var attr = {};
                         attr["ObjectID"] = i + 1;
                         attr["expNum"] = Number(receivedData[2]);
                         attr["expWT"] = Number(receivedData[3]);
                         attr["SEASON"] = receivedData[4];
                         attr["DATE"] = receivedData[5];
                         attr["YEAR"] = Number(receivedData[6]);

                         var lon = Number(receivedData[0]);
                         var lat = Number(receivedData[1]);
                         var geometry = new Point(lon, lat, new SpatialReference({ wkid: 4326 }));

                         var graphic = new Graphic(geometry);
                               graphic.setAttributes(attr);
                               features.push(graphic);
                         }

                         var featureSet = new FeatureSet();
                         featureSet.features = features;
                         featureSet.geometryType = "esriGeometryPoint";

                         var layerDefinition = {
                               "geometryType": "esriGeometryPoint",
                               "objectIdField": "ObjectID",
                               "fields": [{
                                     "name": "ObjectID",
                                     "alias": "ObjectID",
                                     "type": "esriFieldTypeOID"
                               }, {
                                     "name": "expNum",
                                     "alias": "expNum",
                                     "type": "esriFieldTypeDouble"
                               }, {
                                     "name": "expWT",
                                     "alias": "expWT",
                                     "type": "esriFieldTypeDouble"
                               }, {
                                     "name": "SEASON",
                                     "alias": "SEASON",
                                     "type": "esriFieldTypeString"
                               }, {
                                     "name": "DATE",
                                     "alias": "DATE",
                                     "type": "esriFieldTypeDate"
                               }, {
                                     "name": "YEAR",
                                     "alias": "YEAR",
                                     "type": "esriFieldTypeInteger"
                               }]
                         };

                         var featureCollection = {
                               layerDefinition: layerDefinition,
                               featureSet: featureSet
                         };

                         // Remove old layer if one was previously added
                         var speciesFeatureLayerDelete = map.getLayer('Species Layer');
                         if (speciesFeatureLayerDelete) {
                               map.removeLayer(speciesFeatureLayerDelete);
                         }

                         speciesFeatureLayer = new FeatureLayer(featureCollection, {
                               "id": "Species Layer",
                               "mode": FeatureLayer.MODE_SNAPSHOT,
                               "infoTemplate": popupTemplate,
                               "outfields": outFields
                         });

                        // get max and min lat and lon to set extent for zooming since featurelayer.fullExtent returns null even after loaded

                        var oReq1 = new XMLHttpRequest();
                        oReq1.onreadystatechange = function () {
                              if (oReq1.readyState == 4 && oReq1.status == 200) {
                                    var maxMinLonLatData = oReq1.responseText;
                                    var receivedmmllData = maxMinLonLatData.split(",");
                                    var spatialRef = new SpatialReference({ wkid: 4326 });
                                    var layerExtent = new Extent();
                                    layerExtent.xmax = Number(receivedmmllData[0]);
                                    layerExtent.xmin = Number(receivedmmllData[1]);
                                    layerExtent.ymax = Number(receivedmmllData[2]);
                                    layerExtent.ymin = Number(receivedmmllData[3]);
                                    layerExtent.spatialReference = spatialRef;

                                    map.setExtent(layerExtent);
                                    createRenderer();
                                    map.addLayers([speciesFeatureLayer]);
                              }
                        }
                        oReq1.open("GET", "retrieveMaxMinLonLat.php?svspp=" + svspp + "&seasonQuery=" + currentSeason, true);
                        oReq1.send();

            }

      }
      oReq.open("GET", "retrieveSpeciesData.php?svspp=" + svspp + "&seasonQuery=" + currentSeason, true);
      oReq.send();
}

//  create renderer for species feature layer

function createRenderer() {
      smartMapping.createClassedSizeRenderer({
            layer: speciesFeatureLayer,
            field: currentDisplayField,
            basemap: "oceans",
            classificationMethod: currentClassification,
            showOthers: true,
            numClasses: 5
       }).then(function (response) {
             speciesFeatureLayer.setRenderer(response.renderer);
             speciesFeatureLayer.redraw();
             createLegend();
       });
}

[DavidChevrier · Accepted solution]

In case anyone is wondering how to do this, this is how:

//  create renderer for species feature layer
function createMultivariateRender() {
      var classBreaksRendererResultSize, classBreaksRendererResultColor;

      smartMapping.createClassedSizeRenderer({
                        layer: speciesFeatureLayer,
                        field: "expWT",
                        basemap: "oceans",
                        classificationMethod: currentClassification,
                        showOthers: true,
                        numClasses: 5
      }).then(function (response) {
                        classBreaksRendererResultSize = response.renderer;
                    
                        smartMapping.createClassedColorRenderer({
                            layer: speciesFeatureLayer,
                            field: "expNum",
                            basemap: "oceans",
                            classificationMethod: currentClassification,
                            showOthers: true,
                            numClasses: 5
                        }).then(function (response1) {
                            classBreaksRendererResultColor = response1.renderer;

                            array.forEach(classBreaksRendererResultColor.infos, function (colorLoop1) {
                                colorClassSymbols.push(colorLoop1.maxValue);
                            });

                            var valExp = "When( $feature.expNum < " + colorClassSymbols[0] + ", 0, " +
                               "$feature.expNum >= " + colorClassSymbols[0] + " && $feature.expNum < " + colorClassSymbols[1] + ", 1, " +
                               "$feature.expNum >= " + colorClassSymbols[1] + " && $feature.expNum < " + colorClassSymbols[2] + ", 2, " +
                               "$feature.expNum >= " + colorClassSymbols[2] + " && $feature.expNum < " + colorClassSymbols[3] + ", 3, " +
                               "$feature.expNum >= " + colorClassSymbols[3] + ", 4, 5)";

                            var colorInfo = {
                                "type": "colorInfo",
                                "field": "COLORCAT",
                                "valueExpression": valExp,
                                "valueExpressionTitle": "Expanded Number",
                                "stops": []
                            };

                            var loopNum = 0;
                            array.forEach(classBreaksRendererResultColor.infos, function (colorLoop) {
                                colorInfo.stops.push({
                                    "value": loopNum,
                                    "color": colorLoop.symbol.color,
                                    "label": colorLoop.label
                                });
                                loopNum = loopNum + 1;
                            });
                        
                            classBreaksRendererResultSize.setVisualVariables([colorInfo]);
                            speciesFeatureLayer.setRenderer(classBreaksRendererResultSize);
                            speciesFeatureLayer.redraw();
                            createLegend();
                        });

                    });
                }