Hi
Any one can help to pick my mistakes in given code. In web console data is showing but it's not displaying on map.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>GeoJSONLayer - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/request",
"esri/Graphic",
"esri/geometry/Point",
"esri/layers/FeatureLayer",
], function(Map, MapView, esriRequest, Graphic,Point, FeatureLayer) {
const url ="http://localhost:5000"
const map = new Map({
basemap: "satellite",
});
const view = new MapView({
container: "viewDiv",
center: [67.068037, 24.872328],
zoom: 12,
map: map
});
const fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{
name: "Name",
alias: "Name",
type: "string"
},
{
name: "FAT",
alias: "FAT",
type: "string"
},
{
name: "Type",
alias: "Type",
type: "string"
},
{
name: "DC",
alias: "DC",
type: "string"
},
{
name: "ID",
alias: "ID",
type: "string"
},
{
name: "POP",
alias: "POP",
type: "string"
}
];
const pTemplate = {
title: "{title}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "Name",
label: "Name",
visible: true
},
{
fieldName: "FAT",
label: "FAT",
visible: true
},
{
fieldName: "Type",
label: "Type",
visible: true
},
{
fieldName: "DC",
label: "DC",
visible: true
},
{
fieldName: "ID",
label: "ID",
visible: true
},
{
fieldName: "POP",
label: "POP",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}
]
};
const dataRenderer = {
type: "simple",
symbol : {
type: "simple-marker",
color: "blue",
size: 3,
outline: {
width: 0.5,
color: [0, 0, 0, 0.2]
}
},
}
var options = {
query: {
f: "json"
},
responseType: "json"
};
esriRequest(url, options).then(webservice)
function webservice(response){
var graphicsArray = response.data.map(function(result){
var resultPnts = result.SHAPE.points.map(function(point){
return new Point({
x:point.x,
y:point.y,
spatialReference : result.SHAPE.srid
});
})
var atts = {
"ObjectID": result.OBJECTID,
"Splitter": result.Splitter,
"Comment": result.Comment,
"Name": result.Name,
"ID": result.ID,
"Placement": result.Placement,
"POP": result.POP
};
var graArr = resultPnts.map(function(pnt){
var markerSymbol = {
type: "simple-marker",
color: [226, 119, 40]
};
return new Graphic({
geometry:pnt,
symbol: markerSymbol,
attributes: atts
})
})
return graArr
})
const layer = new FeatureLayer({
geometryType: "point",
source: [graphicsArray],
fields: fields,
objectIdField: "ObjectID",
renderer: dataRenderer,
popupTemplate: pTemplate
});
map.add(layer);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
