AnsweredAssumed Answered

FeatureLayer Renderer Based on External Attributes

Question asked by Tyler.Waring_carync on Mar 26, 2019
Latest reply on Mar 29, 2019 by Tyler.Waring_carync

Greetings, 

I am trying to combine information from an ArcGIS Server feature layer with attributes from a Salesforce database in a feature layer in a Javascript application. I would like to be able to load a featurelayer into a map application and update the rendere based on attributes that I gather from Salesforce.

 

My thinking was that I could use the MapView.whenLayerView to get a list of the features within the MapView.extent. Each time the MapView extent changes I could use LayerView.queryFeatures to loop over each graphic, append an attribute to the graphic and then set the symbol of the graphic. 

 

Unfortunately this does not seem to work. Am I doing this wrong? Can this even be done?

 

Thanks, Tyler 

loadFeatureLayers = (mapView) => {
    const self = this
    loadModules(['esri/layers/FeatureLayer'])
    .then(([FeatureLayer]) =>
    {
      layers.forEach(function(layer){
        let fl = new FeatureLayer({
            url: layer.url + layer.serviceIndex
            , baseUrl : layer.url
            , serviceIndex : layer.serviceIndex
            , outFields: ["*"]
            , popupTemplate: layer.popupTemplate
            , definitionExpression: layer.definitionExpression
        });
        fl.minScale = layer.minScale;
        fl.renderer = layer.classrenderer
        fl.when(function(featureLayer){
          featureLayer.id = layer.id;
          let layersConcat = self.state.layers.concat({'featureLayerId' : featureLayer.id, 'identifyable' : true})
          self.setState({layers: layersConcat})
        });
        //fl.renderer = layer.renderer
        mapView.map.add(fl)
        mapView.whenLayerView(fl).then(function(layerView) {
          layerView.watch("updating", function(value) {
            if (!value) { // wait for the layer view to finish updating
              // query all the features available for drawing.
              const adoptedSymbol = {
                "type": "simple-marker"  // autocasts as new SimpleMarkerSymbol()
                , "size": 12
                , "color": "red"
                , "outline": {  // autocasts as new SimpleLineSymbol()
                    "width": 0.5
                    , "color": "white"
                }
              }
              const unadoptedSymbol = {
                "type": "simple-marker"  // autocasts as new SimpleMarkerSymbol()
                , "size": 12
                , "color": "blue"
                , "outline": {  // autocasts as new SimpleLineSymbol()
                    "width": 0.3
                    , "color": "white"
                }
              }
              layerView.queryFeatures({
                geometry: mapView.extent,
                returnGeometry: true,
                outFields: ["*"]
              }).then(function(results) {
                let graphics = results.features;
                let testVal = false;
                let flGraphics = []
                graphics.forEach(function(g, index) {
                  let graphic = JSON.parse(JSON.stringify(g))
                  graphic.geometry.type = "point"
                  let attributes = graphic.attributes
                  testVal = !testVal
                  testVal === true ? graphic.symbol = adoptedSymbol:graphic.symbol = unadoptedSymbol
                  attributes.test =  testVal
                  graphic.attributes = attributes
                  flGraphics.push(graphic)
                });
                fl.source = flGraphics
                //fl.refresh()
              }).catch(function(error) {
                console.error("query failed: ", error);
              });
            }
          });
        });
      })
    })
  }

Outcomes