Help with UniqueValueRenderer and JSON data

713
5
Jump to solution
10-23-2018 10:54 AM
Anil_KumarAUP
New Contributor

Looking for help with UniqueValueRenderer. I am a beginner with some expertise with this API. I was successful with the same data and a SimpleRenderer. Looked at different samples, but the map wont render and there were no errors. 

Can some one tell me what is wrong with my page, please? The page doesn't render with WKID:4326 as well. 

---------------------------------------------------------PAGE CONTENT------------------------------------------------------------------------------------

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
FeatureLayer
</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css" />
<script ></script>
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<script>

require([
"esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/renderers/UniqueValueRenderer",
"esri/tasks/FeatureSet", "esri/layers/FeatureLayer",
"dojo/domReady!"
], function(
Map, SimpleMarkerSymbol, Color,UniqueValueRenderer,
FeatureSet, FeatureLayer
) {

var map = new Map("map", {
basemap : "streets",
center : [-102.76, 30.8],
zoom : 12
});

map.on('load', function() {
var jsonFS = {"geometryType":"esriGeometryPoint","features":[{"attributes":{"ID":"A20213","NAME":"UNIT 0506 WI","NEW_LONGITUDE":"-102.529412","NEW_LATITUDE":"32.009867","OLD_LONGITUDE":"-102.529520","OLD_LATITUDE":"32.01","DATE_CHANGED":"10/1/2018 7:13:19 AM","days":"YELLOW","USERNAME":"CME1"},"geometry":{"x":"-102.529412","y":"32.009867","spatialReference" : { "wkid" : 4267}}},{"attributes":{"ID":"A20213","NAME":"UNIT 0506 WI","NEW_LONGITUDE":"-102.529412","NEW_LATITUDE":"32.009867","OLD_LONGITUDE":"-102.529520","OLD_LATITUDE":"32.01","DATE_CHANGED":"10/1/2018 7:14:48 AM","days":"YELLOW","USERNAME":"CME1"},"geometry":{"x":"-102.529412","y":"32.009867","spatialReference" : { "wkid" : 4267}}},{"attributes":{"ID":"A10383","NAME":"A 049","NEW_LONGITUDE":"-102.657806","NEW_LATITUDE":"32.029326","OLD_LONGITUDE":"-102.356761","OLD_LATITUDE":"31.958465","DATE_CHANGED":"10/11/2018 1:34:36 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.657806","y":"32.029326","spatialReference" : { "wkid" : 4267}}},{"attributes":{"ID":"A20468","NAME":"A 053","NEW_LONGITUDE":"-102.679541","NEW_LATITUDE":"32.035086","OLD_LONGITUDE":"-102.670582","OLD_LATITUDE":"32.033601","DATE_CHANGED":"10/18/2018 9:48:01 AM","days":"ORANGE","USERNAME":"EG1"},"geometry":{"x":"-102.679541","y":"32.035086","spatialReference" : { "wkid" : 4267}}},{"attributes":{"ID":"A10229","NAME":"A 045","NEW_LONGITUDE":"-102.654129","NEW_LATITUDE":"32.025142","OLD_LONGITUDE":"-102.601920","OLD_LATITUDE":"31.9079","DATE_CHANGED":"10/11/2018 1:40:08 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.654129","y":"32.025142","spatialReference" : { "wkid" : 4267}}},{"attributes":{"ID":"A10339","NAME":"A 048","NEW_LONGITUDE":"-102.661870","NEW_LATITUDE":"32.028556","OLD_LONGITUDE":"-102.563610","OLD_LATITUDE":"31.807170","DATE_CHANGED":"10/11/2018 1:39:29 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.661870","y":"32.028556","spatialReference" : { "wkid" : 4267}}},{"attributes":{"ID":"A10141","NAME":"A 043","NEW_LONGITUDE":"-102.667519","NEW_LATITUDE":"32.034326","OLD_LONGITUDE":"-102.418201","OLD_LATITUDE":"31.807287","DATE_CHANGED":"10/11/2018 1:37:04 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.667519","y":"32.034326","spatialReference" : { "wkid" : 4267}}},{"attributes":{"ID":"A10222","NAME":"A 046","NEW_LONGITUDE":"-102.664923","NEW_LATITUDE":"32.031107","OLD_LONGITUDE":"-102.629090","OLD_LATITUDE":"31.939628","DATE_CHANGED":"10/11/2018 1:38:52 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.664923","y":"32.031107","spatialReference" : { "wkid" : 4267}}},{"attributes":{"ID":"A10054","NAME":"A 051","NEW_LONGITUDE":"-102.669702","NEW_LATITUDE":"32.025272","OLD_LONGITUDE":"-102.625712","OLD_LATITUDE":"31.966884","DATE_CHANGED":"10/11/2018 1:35:41 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.669702","y":"32.025272","spatialReference" : { "wkid" : 4267}}}]};

var fs = new FeatureSet(jsonFS);

var layerDefinition = {
"displayFieldName" : "Name",
"geometryType" : "esriGeometryPoint",
"spatialReference" : {
"wkid" : 4267
},
"fields" : [
{
"name" : "ID",
"type" : "esriFieldTypeOID",
"alias" : "ID"
},
{
"name" : "NAME",
"type" : "esriFieldTypeString",
"alias" : "Name",
"length" : 10
},
{
"name" : "days",
"type" : "esriFieldTypeString",
"alias" : "days",
"length" : 10
}
]
}

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


featureLayer = new FeatureLayer(featureCollection,
{
outFields:["ID","days"],
mode: FeatureLayer.MODE_ONDEMAND
}
);

var defaultSymbol = new SimpleMarkerSymbol();

var renderer = new UniqueValueRenderer(defaultSymbol,"days");

renderer,addValue("RED", new SimpleMarkerSymbol().setColor(new esri.Color([255,0,0,0.5])));
renderer,addValue("ORANGE", new SimpleMarkerSymbol().setColor(new esri.Color([0,255,0,0.5])));
renderer,addValue("YELLOW", new SimpleMarkerSymbol().setColor(new esri.Color([0,0,255,0.5])));

featureLayer.setRenderer(renderer);

map.addLayer(featureLayer);
});

});
</script>
</head>

<body class='claro'>
<div id="map" style="width:900px; height:600px;"></div>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"9f23b09708964e83a16058716bb53fc0"}
</script>
<script type="text/javascript"  async="async"></script>
<!-- End Browser Link -->

</body>

</html>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Anil,

   This works fine for me:

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    FeatureLayer
  </title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.26/esri/css/esri.css" />
  <script src="https://js.arcgis.com/3.26/"></script>
  <style>
    html,
    body,
    #map {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
      "esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/renderers/UniqueValueRenderer",
      "esri/tasks/FeatureSet", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer",
      "dojo/domReady!"
    ], function(
      Map, SimpleMarkerSymbol, Color, UniqueValueRenderer,
      FeatureSet, FeatureLayer, SimpleRenderer
    ) {

      var map = new Map("map", {
        basemap: "streets",
        center: [-102.76, 30.8],
        zoom: 12
      });

      map.on('load', function() {
        var jsonFS = {
          "geometryType": "esriGeometryPoint",
          "features": [{
            "attributes": {
              "ID": "A20213",
              "NAME": "UNIT 0506 WI",
              "NEW_LONGITUDE": "-102.529412",
              "NEW_LATITUDE": "32.009867",
              "OLD_LONGITUDE": "-102.529520",
              "OLD_LATITUDE": "32.01",
              "DATE_CHANGED": "10/1/2018 7:13:19 AM",
              "days": "YELLOW",
              "USERNAME": "CME1"
            },
            "geometry": {
              "x": "-102.529412",
              "y": "32.009867",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A20213",
              "NAME": "UNIT 0506 WI",
              "NEW_LONGITUDE": "-102.529412",
              "NEW_LATITUDE": "32.009867",
              "OLD_LONGITUDE": "-102.529520",
              "OLD_LATITUDE": "32.01",
              "DATE_CHANGED": "10/1/2018 7:14:48 AM",
              "days": "YELLOW",
              "USERNAME": "CME1"
            },
            "geometry": {
              "x": "-102.529412",
              "y": "32.009867",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10383",
              "NAME": "A 049",
              "NEW_LONGITUDE": "-102.657806",
              "NEW_LATITUDE": "32.029326",
              "OLD_LONGITUDE": "-102.356761",
              "OLD_LATITUDE": "31.958465",
              "DATE_CHANGED": "10/11/2018 1:34:36 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.657806",
              "y": "32.029326",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A20468",
              "NAME": "A 053",
              "NEW_LONGITUDE": "-102.679541",
              "NEW_LATITUDE": "32.035086",
              "OLD_LONGITUDE": "-102.670582",
              "OLD_LATITUDE": "32.033601",
              "DATE_CHANGED": "10/18/2018 9:48:01 AM",
              "days": "ORANGE",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.679541",
              "y": "32.035086",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10229",
              "NAME": "A 045",
              "NEW_LONGITUDE": "-102.654129",
              "NEW_LATITUDE": "32.025142",
              "OLD_LONGITUDE": "-102.601920",
              "OLD_LATITUDE": "31.9079",
              "DATE_CHANGED": "10/11/2018 1:40:08 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.654129",
              "y": "32.025142",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10339",
              "NAME": "A 048",
              "NEW_LONGITUDE": "-102.661870",
              "NEW_LATITUDE": "32.028556",
              "OLD_LONGITUDE": "-102.563610",
              "OLD_LATITUDE": "31.807170",
              "DATE_CHANGED": "10/11/2018 1:39:29 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.661870",
              "y": "32.028556",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10141",
              "NAME": "A 043",
              "NEW_LONGITUDE": "-102.667519",
              "NEW_LATITUDE": "32.034326",
              "OLD_LONGITUDE": "-102.418201",
              "OLD_LATITUDE": "31.807287",
              "DATE_CHANGED": "10/11/2018 1:37:04 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.667519",
              "y": "32.034326",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10222",
              "NAME": "A 046",
              "NEW_LONGITUDE": "-102.664923",
              "NEW_LATITUDE": "32.031107",
              "OLD_LONGITUDE": "-102.629090",
              "OLD_LATITUDE": "31.939628",
              "DATE_CHANGED": "10/11/2018 1:38:52 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.664923",
              "y": "32.031107",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10054",
              "NAME": "A 051",
              "NEW_LONGITUDE": "-102.669702",
              "NEW_LATITUDE": "32.025272",
              "OLD_LONGITUDE": "-102.625712",
              "OLD_LATITUDE": "31.966884",
              "DATE_CHANGED": "10/11/2018 1:35:41 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.669702",
              "y": "32.025272",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }]
        };

        var fs = new FeatureSet(jsonFS);

        var layerDefinition = {
          "displayFieldName": "Name",
          "geometryType": "esriGeometryPoint",
          "spatialReference": {
            "wkid": 4326
          },
          "fields": [{
              "name": "ID",
              "type": "esriFieldTypeOID",
              "alias": "ID"
            },
            {
              "name": "NAME",
              "type": "esriFieldTypeString",
              "alias": "Name",
              "length": 10
            },
            {
              "name": "days",
              "type": "esriFieldTypeString",
              "alias": "days",
              "length": 10
            }
          ]
        }

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


        featureLayer = new FeatureLayer(featureCollection, {
          outFields: ["ID", "days"],
          mode: FeatureLayer.MODE_ONDEMAND
        });

        var defaultSymbol = new SimpleMarkerSymbol();

        var renderer = new UniqueValueRenderer(defaultSymbol, "days");

        renderer.addValue("RED", new SimpleMarkerSymbol().setColor(new esri.Color([255, 0, 0, 0.5])));
        renderer.addValue("ORANGE", new SimpleMarkerSymbol().setColor(new esri.Color([255, 165, 0, 0.5])));
        renderer.addValue("YELLOW", new SimpleMarkerSymbol().setColor(new esri.Color([255, 255, 0, 0.5])));

        featureLayer.setRenderer(renderer);

        map.addLayer(featureLayer);
      });

    });
  </script>
</head>

<body class='claro'>
  <div id="map"></div>
</body>

</html>

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Emeritus

Anil,

  Besides some minor issues in your code your main issue is that a FeatureLayer from a collection like this does not have the capability to auto re-project to the maps Spatial reference. So the points are rendering using your unique value renderer but they are in the armpit of South Africa. When using a standard esri basemap like streets the maps WKID is 102100 and your data is in 4267 with will NOT automatically re-project.

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    FeatureLayer
  </title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css" />
  <script src="https://js.arcgis.com/3.15/"></script>
  <style>
    html, body, #map {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
      "esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/renderers/UniqueValueRenderer",
      "esri/tasks/FeatureSet", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer",
      "dojo/domReady!"
    ], function(
      Map, SimpleMarkerSymbol, Color, UniqueValueRenderer,
      FeatureSet, FeatureLayer, SimpleRenderer
    ) {

      var map = new Map("map", {
        basemap: "streets",
        center: [-102.76, 30.8],
        zoom: 12
      });

      map.on('load', function() {
        var jsonFS = {
          "geometryType": "esriGeometryPoint",
          "features": [{
            "attributes": {
              "ID": "A20213",
              "NAME": "UNIT 0506 WI",
              "NEW_LONGITUDE": "-102.529412",
              "NEW_LATITUDE": "32.009867",
              "OLD_LONGITUDE": "-102.529520",
              "OLD_LATITUDE": "32.01",
              "DATE_CHANGED": "10/1/2018 7:13:19 AM",
              "days": "YELLOW",
              "USERNAME": "CME1"
            },
            "geometry": {
              "x": "-102.529412",
              "y": "32.009867",
              "spatialReference": {
                "wkid": 4267
              }
            }
          }, {
            "attributes": {
              "ID": "A20213",
              "NAME": "UNIT 0506 WI",
              "NEW_LONGITUDE": "-102.529412",
              "NEW_LATITUDE": "32.009867",
              "OLD_LONGITUDE": "-102.529520",
              "OLD_LATITUDE": "32.01",
              "DATE_CHANGED": "10/1/2018 7:14:48 AM",
              "days": "YELLOW",
              "USERNAME": "CME1"
            },
            "geometry": {
              "x": "-102.529412",
              "y": "32.009867",
              "spatialReference": {
                "wkid": 4267
              }
            }
          }, {
            "attributes": {
              "ID": "A10383",
              "NAME": "A 049",
              "NEW_LONGITUDE": "-102.657806",
              "NEW_LATITUDE": "32.029326",
              "OLD_LONGITUDE": "-102.356761",
              "OLD_LATITUDE": "31.958465",
              "DATE_CHANGED": "10/11/2018 1:34:36 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.657806",
              "y": "32.029326",
              "spatialReference": {
                "wkid": 4267
              }
            }
          }, {
            "attributes": {
              "ID": "A20468",
              "NAME": "A 053",
              "NEW_LONGITUDE": "-102.679541",
              "NEW_LATITUDE": "32.035086",
              "OLD_LONGITUDE": "-102.670582",
              "OLD_LATITUDE": "32.033601",
              "DATE_CHANGED": "10/18/2018 9:48:01 AM",
              "days": "ORANGE",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.679541",
              "y": "32.035086",
              "spatialReference": {
                "wkid": 4267
              }
            }
          }, {
            "attributes": {
              "ID": "A10229",
              "NAME": "A 045",
              "NEW_LONGITUDE": "-102.654129",
              "NEW_LATITUDE": "32.025142",
              "OLD_LONGITUDE": "-102.601920",
              "OLD_LATITUDE": "31.9079",
              "DATE_CHANGED": "10/11/2018 1:40:08 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.654129",
              "y": "32.025142",
              "spatialReference": {
                "wkid": 4267
              }
            }
          }, {
            "attributes": {
              "ID": "A10339",
              "NAME": "A 048",
              "NEW_LONGITUDE": "-102.661870",
              "NEW_LATITUDE": "32.028556",
              "OLD_LONGITUDE": "-102.563610",
              "OLD_LATITUDE": "31.807170",
              "DATE_CHANGED": "10/11/2018 1:39:29 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.661870",
              "y": "32.028556",
              "spatialReference": {
                "wkid": 4267
              }
            }
          }, {
            "attributes": {
              "ID": "A10141",
              "NAME": "A 043",
              "NEW_LONGITUDE": "-102.667519",
              "NEW_LATITUDE": "32.034326",
              "OLD_LONGITUDE": "-102.418201",
              "OLD_LATITUDE": "31.807287",
              "DATE_CHANGED": "10/11/2018 1:37:04 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.667519",
              "y": "32.034326",
              "spatialReference": {
                "wkid": 4267
              }
            }
          }, {
            "attributes": {
              "ID": "A10222",
              "NAME": "A 046",
              "NEW_LONGITUDE": "-102.664923",
              "NEW_LATITUDE": "32.031107",
              "OLD_LONGITUDE": "-102.629090",
              "OLD_LATITUDE": "31.939628",
              "DATE_CHANGED": "10/11/2018 1:38:52 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.664923",
              "y": "32.031107",
              "spatialReference": {
                "wkid": 4267
              }
            }
          }, {
            "attributes": {
              "ID": "A10054",
              "NAME": "A 051",
              "NEW_LONGITUDE": "-102.669702",
              "NEW_LATITUDE": "32.025272",
              "OLD_LONGITUDE": "-102.625712",
              "OLD_LATITUDE": "31.966884",
              "DATE_CHANGED": "10/11/2018 1:35:41 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.669702",
              "y": "32.025272",
              "spatialReference": {
                "wkid": 4267
              }
            }
          }]
        };

        var fs = new FeatureSet(jsonFS);

        var layerDefinition = {
          "displayFieldName": "Name",
          "geometryType": "esriGeometryPoint",
          "spatialReference": {
            "wkid": 4267
          },
          "fields": [{
              "name": "ID",
              "type": "esriFieldTypeOID",
              "alias": "ID"
            },
            {
              "name": "NAME",
              "type": "esriFieldTypeString",
              "alias": "Name",
              "length": 10
            },
            {
              "name": "days",
              "type": "esriFieldTypeString",
              "alias": "days",
              "length": 10
            }
          ]
        }

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


        featureLayer = new FeatureLayer(featureCollection, {
          outFields: ["ID", "days"],
          mode: FeatureLayer.MODE_ONDEMAND
        });

        var defaultSymbol = new SimpleMarkerSymbol();

        var renderer = new UniqueValueRenderer(defaultSymbol, "days");

        renderer.addValue("RED", new SimpleMarkerSymbol().setColor(new esri.Color([255, 0, 0, 0.5])));
        renderer.addValue("ORANGE", new SimpleMarkerSymbol().setColor(new esri.Color([255, 165, 0, 0.5])));
        renderer.addValue("YELLOW", new SimpleMarkerSymbol().setColor(new esri.Color([255, 255, 0, 0.5])));

        featureLayer.setRenderer(renderer);

        map.addLayer(featureLayer);
      });

    });
  </script>
</head>

<body class='claro'>
  <div id="map"></div>
</body>

</html>
Anil_KumarAUP
New Contributor

Robert,

Thanks for the quick reply. Here is the working code with 4326, but for SimpleRenderer. It works fine:

Like you said, it works for 102100 and 4326. I thought as per API, will work for all Well Known Ids. 

Since the code below works, I assumed that changing 4326 to 4267 will work, but it didn't.  I am ok to convert my values to 4326, but how will I make this work, coloring based on a specific attribute value.

------------------------------------------------------------------------------Code-----------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.26/esri/css/esri.css">
<script src="http://js.arcgis.com/3.15/"></script>
<!--<script src="travel6.json" type="text/javascript"></script> -->
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<script>

require([
"esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/renderers/SimpleRenderer",
"esri/tasks/FeatureSet", "esri/layers/FeatureLayer",
"dojo/domReady!"
], function(
Map, SimpleMarkerSymbol, Color, SimpleRenderer,
FeatureSet, FeatureLayer
) {

var map = new Map("map", {
basemap : "topo",
center : [-102.50, 32],
zoom : 12
});

// function createFeatureLayer() {
map.on('load', function() {

var jsonFS = {"geometryType":"esriGeometryPoint","features":[{"attributes":{"ID":"A20213","NAME":"UNIT 0506 WI","NEW_LONGITUDE":"-102.529412","NEW_LATITUDE":"32.009867","OLD_LONGITUDE":"-102.529520","OLD_LATITUDE":"32.01","DATE_CHANGED":"10/1/2018 7:13:19 AM","days":"YELLOW","USERNAME":"CME1"},"geometry":{"x":"-102.529412","y":"32.009867","spatialReference" : { "wkid" : 4326}}},{"attributes":{"ID":"A20213","NAME":"UNIT 0506 WI","NEW_LONGITUDE":"-102.529412","NEW_LATITUDE":"32.009867","OLD_LONGITUDE":"-102.529520","OLD_LATITUDE":"32.01","DATE_CHANGED":"10/1/2018 7:14:48 AM","days":"YELLOW","USERNAME":"CME1"},"geometry":{"x":"-102.529412","y":"32.009867","spatialReference" : { "wkid" : 4326}}},{"attributes":{"ID":"A10383","NAME":"A 049","NEW_LONGITUDE":"-102.657806","NEW_LATITUDE":"32.029326","OLD_LONGITUDE":"-102.356761","OLD_LATITUDE":"31.958465","DATE_CHANGED":"10/11/2018 1:34:36 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.657806","y":"32.029326","spatialReference" : { "wkid" : 4326}}},{"attributes":{"ID":"A20468","NAME":"A 053","NEW_LONGITUDE":"-102.679541","NEW_LATITUDE":"32.035086","OLD_LONGITUDE":"-102.670582","OLD_LATITUDE":"32.033601","DATE_CHANGED":"10/18/2018 9:48:01 AM","days":"ORANGE","USERNAME":"EG1"},"geometry":{"x":"-102.679541","y":"32.035086","spatialReference" : { "wkid" : 4326}}},{"attributes":{"ID":"A10229","NAME":"A 045","NEW_LONGITUDE":"-102.654129","NEW_LATITUDE":"32.025142","OLD_LONGITUDE":"-102.601920","OLD_LATITUDE":"31.9079","DATE_CHANGED":"10/11/2018 1:40:08 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.654129","y":"32.025142","spatialReference" : { "wkid" : 4326}}},{"attributes":{"ID":"A10339","NAME":"A 048","NEW_LONGITUDE":"-102.661870","NEW_LATITUDE":"32.028556","OLD_LONGITUDE":"-102.563610","OLD_LATITUDE":"31.807170","DATE_CHANGED":"10/11/2018 1:39:29 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.661870","y":"32.028556","spatialReference" : { "wkid" : 4326}}},{"attributes":{"ID":"A10141","NAME":"A 043","NEW_LONGITUDE":"-102.667519","NEW_LATITUDE":"32.034326","OLD_LONGITUDE":"-102.418201","OLD_LATITUDE":"31.807287","DATE_CHANGED":"10/11/2018 1:37:04 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.667519","y":"32.034326","spatialReference" : { "wkid" : 4326}}},{"attributes":{"ID":"A10222","NAME":"A 046","NEW_LONGITUDE":"-102.664923","NEW_LATITUDE":"32.031107","OLD_LONGITUDE":"-102.629090","OLD_LATITUDE":"31.939628","DATE_CHANGED":"10/11/2018 1:38:52 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.664923","y":"32.031107","spatialReference" : { "wkid" : 4326}}},{"attributes":{"ID":"A10054","NAME":"A 051","NEW_LONGITUDE":"-102.669702","NEW_LATITUDE":"32.025272","OLD_LONGITUDE":"-102.625712","OLD_LATITUDE":"31.966884","DATE_CHANGED":"10/11/2018 1:35:41 PM","days":"YELLOW","USERNAME":"EG1"},"geometry":{"x":"-102.669702","y":"32.025272","spatialReference" : { "wkid" : 4326}}}]};

var fs = new FeatureSet(jsonFS);

var layerDefinition = {
"displayFieldName" : "Name",
"geometryType" : "esriGeometryPoint",
"spatialReference" : {
"wkid" : 4326
},
"fields" : [
{
"name" : "ID",
"type" : "esriFieldTypeOID",
"alias" : "ID"
},
{
"name" : "Name",
"type" : "esriFieldTypeString",
"alias" : "Name",
"length" : 10
}
]
}

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

featureLayer = new FeatureLayer(featureCollection);
var symbol = new SimpleMarkerSymbol().setColor(new esri.Color([255,0,0,0.5]));
var renderer = new SimpleRenderer(symbol);
featureLayer.setRenderer(renderer);

map.addLayer(featureLayer);
});

});
</script>
</head>

<body class='claro'>
<div id="map" style="width:900px; height:600px;"></div>
</body>

</html>

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Anil,

   This works fine for me:

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>
    FeatureLayer
  </title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.26/esri/css/esri.css" />
  <script src="https://js.arcgis.com/3.26/"></script>
  <style>
    html,
    body,
    #map {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
      "esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/renderers/UniqueValueRenderer",
      "esri/tasks/FeatureSet", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer",
      "dojo/domReady!"
    ], function(
      Map, SimpleMarkerSymbol, Color, UniqueValueRenderer,
      FeatureSet, FeatureLayer, SimpleRenderer
    ) {

      var map = new Map("map", {
        basemap: "streets",
        center: [-102.76, 30.8],
        zoom: 12
      });

      map.on('load', function() {
        var jsonFS = {
          "geometryType": "esriGeometryPoint",
          "features": [{
            "attributes": {
              "ID": "A20213",
              "NAME": "UNIT 0506 WI",
              "NEW_LONGITUDE": "-102.529412",
              "NEW_LATITUDE": "32.009867",
              "OLD_LONGITUDE": "-102.529520",
              "OLD_LATITUDE": "32.01",
              "DATE_CHANGED": "10/1/2018 7:13:19 AM",
              "days": "YELLOW",
              "USERNAME": "CME1"
            },
            "geometry": {
              "x": "-102.529412",
              "y": "32.009867",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A20213",
              "NAME": "UNIT 0506 WI",
              "NEW_LONGITUDE": "-102.529412",
              "NEW_LATITUDE": "32.009867",
              "OLD_LONGITUDE": "-102.529520",
              "OLD_LATITUDE": "32.01",
              "DATE_CHANGED": "10/1/2018 7:14:48 AM",
              "days": "YELLOW",
              "USERNAME": "CME1"
            },
            "geometry": {
              "x": "-102.529412",
              "y": "32.009867",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10383",
              "NAME": "A 049",
              "NEW_LONGITUDE": "-102.657806",
              "NEW_LATITUDE": "32.029326",
              "OLD_LONGITUDE": "-102.356761",
              "OLD_LATITUDE": "31.958465",
              "DATE_CHANGED": "10/11/2018 1:34:36 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.657806",
              "y": "32.029326",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A20468",
              "NAME": "A 053",
              "NEW_LONGITUDE": "-102.679541",
              "NEW_LATITUDE": "32.035086",
              "OLD_LONGITUDE": "-102.670582",
              "OLD_LATITUDE": "32.033601",
              "DATE_CHANGED": "10/18/2018 9:48:01 AM",
              "days": "ORANGE",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.679541",
              "y": "32.035086",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10229",
              "NAME": "A 045",
              "NEW_LONGITUDE": "-102.654129",
              "NEW_LATITUDE": "32.025142",
              "OLD_LONGITUDE": "-102.601920",
              "OLD_LATITUDE": "31.9079",
              "DATE_CHANGED": "10/11/2018 1:40:08 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.654129",
              "y": "32.025142",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10339",
              "NAME": "A 048",
              "NEW_LONGITUDE": "-102.661870",
              "NEW_LATITUDE": "32.028556",
              "OLD_LONGITUDE": "-102.563610",
              "OLD_LATITUDE": "31.807170",
              "DATE_CHANGED": "10/11/2018 1:39:29 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.661870",
              "y": "32.028556",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10141",
              "NAME": "A 043",
              "NEW_LONGITUDE": "-102.667519",
              "NEW_LATITUDE": "32.034326",
              "OLD_LONGITUDE": "-102.418201",
              "OLD_LATITUDE": "31.807287",
              "DATE_CHANGED": "10/11/2018 1:37:04 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.667519",
              "y": "32.034326",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10222",
              "NAME": "A 046",
              "NEW_LONGITUDE": "-102.664923",
              "NEW_LATITUDE": "32.031107",
              "OLD_LONGITUDE": "-102.629090",
              "OLD_LATITUDE": "31.939628",
              "DATE_CHANGED": "10/11/2018 1:38:52 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.664923",
              "y": "32.031107",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }, {
            "attributes": {
              "ID": "A10054",
              "NAME": "A 051",
              "NEW_LONGITUDE": "-102.669702",
              "NEW_LATITUDE": "32.025272",
              "OLD_LONGITUDE": "-102.625712",
              "OLD_LATITUDE": "31.966884",
              "DATE_CHANGED": "10/11/2018 1:35:41 PM",
              "days": "YELLOW",
              "USERNAME": "EG1"
            },
            "geometry": {
              "x": "-102.669702",
              "y": "32.025272",
              "spatialReference": {
                "wkid": 4326
              }
            }
          }]
        };

        var fs = new FeatureSet(jsonFS);

        var layerDefinition = {
          "displayFieldName": "Name",
          "geometryType": "esriGeometryPoint",
          "spatialReference": {
            "wkid": 4326
          },
          "fields": [{
              "name": "ID",
              "type": "esriFieldTypeOID",
              "alias": "ID"
            },
            {
              "name": "NAME",
              "type": "esriFieldTypeString",
              "alias": "Name",
              "length": 10
            },
            {
              "name": "days",
              "type": "esriFieldTypeString",
              "alias": "days",
              "length": 10
            }
          ]
        }

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


        featureLayer = new FeatureLayer(featureCollection, {
          outFields: ["ID", "days"],
          mode: FeatureLayer.MODE_ONDEMAND
        });

        var defaultSymbol = new SimpleMarkerSymbol();

        var renderer = new UniqueValueRenderer(defaultSymbol, "days");

        renderer.addValue("RED", new SimpleMarkerSymbol().setColor(new esri.Color([255, 0, 0, 0.5])));
        renderer.addValue("ORANGE", new SimpleMarkerSymbol().setColor(new esri.Color([255, 165, 0, 0.5])));
        renderer.addValue("YELLOW", new SimpleMarkerSymbol().setColor(new esri.Color([255, 255, 0, 0.5])));

        featureLayer.setRenderer(renderer);

        map.addLayer(featureLayer);
      });

    });
  </script>
</head>

<body class='claro'>
  <div id="map"></div>
</body>

</html>
Anil_KumarAUP
New Contributor

Thanks Robert. Perfect.  

0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Anil, 

Don’t forget to mark this question as answered by clicking the correct answer link on the reply that answered your question.


0 Kudos