Hi,
I am using ESRI JavaScript API 4.24.
I could able to render the JSON data to the map using the bellow code.
Now I would like to join the response data received from an API, which contain the unique value similar to the rendered json feature service.
Note: I don't have this option - Dynamic data layers on the fly from data inside registered workspaces.
The api response is like this. I have to join the api response and render the map based on the MalePopulation/FemalePopulatin/TotalPopulation.
const misTblDistrict =[
{
KGISDistrictCode: "01",
KGISDistrictName: "Belagavi",
MalePopulation: 233336,
FemalePopulation: 57438,
TotalPopulation: 290774
},
{
KGISDistrictCode: "02",
KGISDistrictName: "Bagalkot",
MalePopulation: 549540,
FemalePopulation: 844171,
TotalPopulation: 1393711
},
{
KGISDistrictCode: "03",
KGISDistrictName: "Vijayapura",
MalePopulation: 202111,
FemalePopulation: 177079,
TotalPopulation: 379190
},
{
KGISDistrictCode: "04",
KGISDistrictName: "Kalburgi",
MalePopulation: 222823,
FemalePopulation: 234340,
TotalPopulation: 457163
},
{
KGISDistrictCode: "05",
KGISDistrictName: "Bidar",
MalePopulation: 385580,
FemalePopulation: 73176,
TotalPopulation: 458756
},
];
this is the running code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Create Map and add a dynamic layer</title>
<link rel="stylesheet"
href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script>
// dojoConfig has to be configured before including the esri js library
var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
var dojoConfig = {
async: true,
//baseUrl: "/js",
//locale: location.search.substring(1) === "" ? "en-us" : location.search.substring(1),
packages: [
{
name: "ksrsac",
location: locationPath + "/js/data",
},
],
parseOnLoad: false,
};
</script>
<script src="https://js.arcgis.com/4.24/"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<script>
require(["esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/geometry/Polygon",
"esri/geometry/SpatialReference",
"dojo/parser",
"esri/renderers/SimpleRenderer",
"dojo/text!ksrsac/district.json"], function (
esriConfig,
Map,
MapView,
FeatureLayer,
Polygon,
SpatialReference,
parser,
SimpleRenderer,
district
) {
parser.parse();
const map = new Map({
basemap: "streets-vector"
});
const view = new MapView({
map: map,
center: [76.00, 15.00],
zoom: 6,
container: "viewDiv"
});
var districts = JSON.parse(district);
const {features, fields, geometryType, spatialReference} = districts;
var districtsFeatureLayer = new FeatureLayer({
id: "districts",
source: features.map((feature) => {
return {
attributes: feature.attributes,
geometry: {
type: 'polygon',
rings: feature.geometry.rings,
spatialReference: new SpatialReference({ wkid: spatialReference.wkid })
}
};
}),
outFields: ["*"],
objectIdField: "OBJECTID",
geometryType: "polygon",
spatialReference: new SpatialReference({ wkid: spatialReference.wkid }),
});
map.add(districtsFeatureLayer);
});
</script>
</body>
</html>
Json data is enclosed for reference.