Fetching values of fields in a feature layer

4038
6
Jump to solution
10-21-2014 09:05 AM
IsraAlhamood
New Contributor II

I'm trying to set the content of an infoTemplate of a feature layer depending on the field value(${OBJECTID})

for example:

if the ${OBJECTID} = 1 then infoTemplate.setContent("Something")

if the ${OBJECTID} = 2 then infoTemplate.setContent("Something2")

 

but whenever I do it it keeps giving me an error.

Any idea on how can I fetch the field value from the feature selected?

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

This is a modification of an existing sample. When you hover over Aiken county, you'll see the content change. The modification is in the countiesGraphicsLayer "mouse_over" event

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>QueryTask with geometry, results as an InfoWindow onHover</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

    <script src="http://js.arcgis.com/3.11/"></script>

    <script>

      var map;

      require([

        "esri/map",

        "esri/graphic",

        "esri/InfoTemplate",

        "esri/SpatialReference",

        "esri/geometry/Extent",

        "esri/layers/GraphicsLayer",

        "esri/symbols/SimpleFillSymbol",

        "esri/symbols/SimpleLineSymbol",

        "esri/tasks/query",

        "esri/tasks/QueryTask",

        "esri/Color",

        "dojo/domReady!"

      ],

        function (

          Map, Graphic, InfoTemplate, SpatialReference, Extent, GraphicsLayer,

          SimpleFillSymbol, SimpleLineSymbol, Query, QueryTask, Color

        ) {

          map = new Map("mapDiv", {

              basemap: "streets",

              center: [-80.94, 33.646],

              zoom: 8

            });

          map.on("load", setUpQuery);

          function setUpQuery () {

            var queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

            //build query filter

            var query = new Query();

            query.returnGeometry = true;

            query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];

            query.outSpatialReference = { "wkid": 102100 };

            query.where = "STATE_NAME = 'South Carolina'";

            var infoTemplate = new InfoTemplate();

            var content = "<b>2000 Population: </b>${POP2000}<br/>" +

                          "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>" +

                          "<b>2007 Population: </b>${POP2007}<br/>" +

                          "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI}";

            infoTemplate.setTitle("${NAME}");

            infoTemplate.setContent(content);

            map.infoWindow.resize(245, 125);

            //Can listen for complete event to process results

            //or can use the callback option in the queryTask.execute method.

            queryTask.on("complete", function (event) {

              map.graphics.clear();

              var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                  new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.35]));

              var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                  new Color([255, 255, 255, 0.35]), 1), new Color([125, 125, 125, 0.35]));

              var features = event.featureSet.features;

              var countiesGraphicsLayer = new GraphicsLayer();

              //QueryTask returns a featureSet.

              //Loop through features in the featureSet and add them to the map.

              var featureCount = features.length;

              for (var i = 0; i < featureCount; i++) {

                //Get the current feature from the featureSet.

                var graphic = features; //Feature is a graphic

                graphic.setSymbol(symbol);

                graphic.setInfoTemplate(infoTemplate);

                countiesGraphicsLayer.add(graphic);

              }

              map.addLayer(countiesGraphicsLayer);

              map.graphics.enableMouseEvents();

              //listen for when the mouse-over event fires on the countiesGraphicsLayer

              //when fired, create a new graphic with the geometry from event.graphic

              //and add it to the maps graphics layer

              countiesGraphicsLayer.on("mouse-over",function (event) {

                map.graphics.clear();  //use the maps graphics layer as the highlight layer

                var graphic = event.graphic;

                if (graphic.attributes.NAME === "Aiken") {

                   map.infoWindow.setContent("Found it");

                } else {

                   map.infoWindow.setContent(graphic.getContent());

                }

                map.infoWindow.setTitle(graphic.getTitle());

                var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);

                map.graphics.add(highlightGraphic);

                map.infoWindow.show(event.screenPoint,

                  map.getInfoWindowAnchor(event.screenPoint));

              });

              //listen for when map.graphics mouse-out event is fired

              //and then clear the highlight graphic

              //and hide the info window

              map.graphics.on("mouse-out", function () {

                map.graphics.clear();

                map.infoWindow.hide();

              });

            });

            queryTask.execute(query);

          }

        });

    </script>

  </head>

  <body class="claro">

    Hover over a county in South Carolina to get more information.

    <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>

  </body>

</html>

View solution in original post

6 Replies
KenBuja
MVP Honored Contributor

You should be able to do this using the syntax

if (feature.attributes.OBJECTID === 1) {

    infoTemplate.setContent("Something")

} else if (feature.attributes.OBJECTID === 2 {

    infoTemplate.setContent("Something2")

} else ...

You could also use switch instead of if if you have many conditions. Take a look at this post showing some different ways of using them.

0 Kudos
IsraAlhamood
New Contributor II

what does feature represent? is it the feature layer name?

sorry I'm a beginner in javascript

0 Kudos
KenBuja
MVP Honored Contributor

This is a modification of an existing sample. When you hover over Aiken county, you'll see the content change. The modification is in the countiesGraphicsLayer "mouse_over" event

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>QueryTask with geometry, results as an InfoWindow onHover</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

    <script src="http://js.arcgis.com/3.11/"></script>

    <script>

      var map;

      require([

        "esri/map",

        "esri/graphic",

        "esri/InfoTemplate",

        "esri/SpatialReference",

        "esri/geometry/Extent",

        "esri/layers/GraphicsLayer",

        "esri/symbols/SimpleFillSymbol",

        "esri/symbols/SimpleLineSymbol",

        "esri/tasks/query",

        "esri/tasks/QueryTask",

        "esri/Color",

        "dojo/domReady!"

      ],

        function (

          Map, Graphic, InfoTemplate, SpatialReference, Extent, GraphicsLayer,

          SimpleFillSymbol, SimpleLineSymbol, Query, QueryTask, Color

        ) {

          map = new Map("mapDiv", {

              basemap: "streets",

              center: [-80.94, 33.646],

              zoom: 8

            });

          map.on("load", setUpQuery);

          function setUpQuery () {

            var queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

            //build query filter

            var query = new Query();

            query.returnGeometry = true;

            query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];

            query.outSpatialReference = { "wkid": 102100 };

            query.where = "STATE_NAME = 'South Carolina'";

            var infoTemplate = new InfoTemplate();

            var content = "<b>2000 Population: </b>${POP2000}<br/>" +

                          "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>" +

                          "<b>2007 Population: </b>${POP2007}<br/>" +

                          "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI}";

            infoTemplate.setTitle("${NAME}");

            infoTemplate.setContent(content);

            map.infoWindow.resize(245, 125);

            //Can listen for complete event to process results

            //or can use the callback option in the queryTask.execute method.

            queryTask.on("complete", function (event) {

              map.graphics.clear();

              var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                  new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.35]));

              var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                  new Color([255, 255, 255, 0.35]), 1), new Color([125, 125, 125, 0.35]));

              var features = event.featureSet.features;

              var countiesGraphicsLayer = new GraphicsLayer();

              //QueryTask returns a featureSet.

              //Loop through features in the featureSet and add them to the map.

              var featureCount = features.length;

              for (var i = 0; i < featureCount; i++) {

                //Get the current feature from the featureSet.

                var graphic = features; //Feature is a graphic

                graphic.setSymbol(symbol);

                graphic.setInfoTemplate(infoTemplate);

                countiesGraphicsLayer.add(graphic);

              }

              map.addLayer(countiesGraphicsLayer);

              map.graphics.enableMouseEvents();

              //listen for when the mouse-over event fires on the countiesGraphicsLayer

              //when fired, create a new graphic with the geometry from event.graphic

              //and add it to the maps graphics layer

              countiesGraphicsLayer.on("mouse-over",function (event) {

                map.graphics.clear();  //use the maps graphics layer as the highlight layer

                var graphic = event.graphic;

                if (graphic.attributes.NAME === "Aiken") {

                   map.infoWindow.setContent("Found it");

                } else {

                   map.infoWindow.setContent(graphic.getContent());

                }

                map.infoWindow.setTitle(graphic.getTitle());

                var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);

                map.graphics.add(highlightGraphic);

                map.infoWindow.show(event.screenPoint,

                  map.getInfoWindowAnchor(event.screenPoint));

              });

              //listen for when map.graphics mouse-out event is fired

              //and then clear the highlight graphic

              //and hide the info window

              map.graphics.on("mouse-out", function () {

                map.graphics.clear();

                map.infoWindow.hide();

              });

            });

            queryTask.execute(query);

          }

        });

    </script>

  </head>

  <body class="claro">

    Hover over a county in South Carolina to get more information.

    <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>

  </body>

</html>

View solution in original post

IsraAlhamood
New Contributor II

I still didn't get it.

here's my code:

var map;

function init()

{

     map = new esri.Map("mapDiv");

     var basemap: new esri.layer.arcGISTiledMapServiceLayer("link");

     map.addLayer(basemap);

     var content = "Hello!";

     var infoTemplate = new esri.InfoTemplate();

     infoTemplate.setTitle("<b>${BUILDING_NO}</b>);

     infoTemplate.setTitle(content);

     var featureLayer = new esri.layers.FeatureLayer("link",

     mode:esri.layers.FeatureLayer.MODE_ONDEMAND,

     outFields:["*"],

     infoTemplate:infoTemplate

     });

     map.addLayer(featureLayer);

}

What I didn't get is what does feature o graphic(in the other code) suppose to represent.

I tried both ways and it didn't work.

0 Kudos
IsraAlhamood
New Contributor II

Ken,

It worked thank you so much.

0 Kudos
KenBuja
MVP Honored Contributor

Glad to help. Please remember to mark the correct post as answered. This will help others when searching on this question.

0 Kudos