AnsweredAssumed Answered

Help with UniqueValueRenderer and JSON data

Question asked by anilaup on Oct 23, 2018
Latest reply on Oct 24, 2018 by rscheitlin

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>

Outcomes