Match interface with your map

[ReneRubalcava]

https://www.flickr.com/photos/paloetic/4795592340/

Have you ever been working on a mapping application and maybe you're listing some data somewhere that corresponds to the data on your map? We've seen samples in the past that show how to highlight features on the map when you hover over a related item in a list or a table.

That's cool.

But haven't you ever wanted to quickly see in your list what that item corresponds to on the map? Maybe using the matching symbology that is used in the map? I bet you have?

It turns out, that's not incredibly difficult to do.

The renderer (in both v3.x and v4beta) has a method called getSymbol. This method takes a graphic. But if I had a graphic, I'd have the symbol, what are you trying to pull here man?!

Chillax.

Let's assume you are using the QueryTask to query your data. The results of a QueryTask return Features, which are Graphics, but they have no symbols. So you can iterate these results and get the symbol from the renderer.

That could look something like this sample.

require([
  'esri/layers/FeatureLayer',
  'esri/tasks/QueryTask',
  'esri/tasks/support/Query'
], function(
  FeatureLayer, QueryTask, Query
) {
  var featureLayer = new FeatureLayer({
    id: 'myLayer',
    outFields: ['*'],
    url: 'http://services2.arcgis.com/LMBdfutQCnDGYUyc/arcgis/rest/services/Los_Angeles_County_Homeless_Progra...'
  });
  featureLayer.then(function() {
    var node = document.getElementById('my-list');
    var q = new Query({
      where: '1=1',
      outFields: ['*'],
      returnGeometry: false
    });
    var qTask = new QueryTask(featureLayer.url);
    var promise = qTask.execute(q).then(function(results) {
      return results.features.map(function(a) {
        var sym = featureLayer.renderer.getSymbol(a);
        a.symbol = sym;
        return a;
      });
    });
    promise.then(function(features) {
      features.map(function(feature) {
        var attr = feature.attributes;
        var sym = feature.symbol;
        var item = document.createElement('li');
        var img = document.createElement('img');
        img.setAttribute('src', sym.source.url);
        img.setAttribute('height', 25);
        img.setAttribute('width', 25);
        var span = document.createElement('span');
        span.innerHTML = attr.ProgName;
        item.appendChild(img);
        item.appendChild(span);
        node.appendChild(item);
      });
    });
  });
});

There's no map in this sample, as it's not the focus here. We're just creating a FeatureLayer so that we can leech off it's renderer. Then when we do the Query of the layer, we use the renderer to get the symbol and create an list element with an image and some text.

You can see a demo of this here.

You can not take this sample and hook it up so that when you click on an item, it can zoom to the location on the map and maybe display some detailed data in another part of the page or in the popup, that's totally up to you. I just wanted to show how easy it is to get access to the symbology of features to use them in your actual user-interface. So go forth and hack away!

For more geodev tips and tricks, check out my blog.