Community
Select to view content in your preferred language

Help with UniqueValueRenderer and JSON data

909
5
Jump to solution
10-23-2018 10:54 AM
Anil_KumarAUP
by
New Contributor
‎10-23-2018 10:54 AM

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
by MVP Emeritus
MVP Emeritus
‎10-23-2018 12:20 PM

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
by MVP Emeritus
MVP Emeritus
‎10-23-2018 11:31 AM

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
by
New Contributor
‎10-23-2018 12:11 PM

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
by MVP Emeritus
MVP Emeritus
‎10-23-2018 12:20 PM

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
by
New Contributor
‎10-23-2018 08:52 PM

Thanks Robert. Perfect.  

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-24-2018 04:31 AM
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