- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Re: Help with UniqueValueRenderer and JSON data
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
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>
Solved! Go to Solution.
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
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>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
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>- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
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>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
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>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
Thanks Robert. Perfect.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
Don’t forget to mark this question as answered by clicking the correct answer link on the reply that answered your question.
