Hi
I have created JSON service with Node.js and use it to display polygons on map but Geometry is not showing while Legend is working properly as shown in attached image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>JSON</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/Polygon",
"esri/widgets/Editor",
"esri/widgets/Legend",
"esri/layers/FeatureLayer",
"esri/geometry/projection",
"esri/geometry/SpatialReference"
], function(Map, MapView, esriRequest, Graphic,Polygon,Editor, Legend,FeatureLayer, projection, SpatialReference) {
projection.load()
let url ="http://localhost:7001/polygon"
let myData = []
let fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{
name: "CATEGORY",
alias: "CATEGORY",
type: "string"
},
{
name: "TYPE",
alias: "TYPE",
type: "string"
},
{
name: "TOWN",
alias: "TOWN",
type: "string"
},
{
name: "BLOCK_PHASE_SECTOR",
alias: "BLOCK_PHASE_SECTOR",
type: "string"
},
{
name: "STREET",
alias: "STREET",
type: "string"
},
{
name: "DATE",
alias: "DATE",
type: "string"
}
];
let pTemplate = {
title: "{title}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "CATEGORY",
label: "CATEGORY",
visible: true
},
{
fieldName: "TYPE",
label: "TYPE",
visible: true
},
{
fieldName: "TOWN",
label: "TOWN",
visible: true
},
{
fieldName: "BLOCK_PHASE_SECTOR",
label: "BLOCK_PHASE_SECTOR",
visible: true
},
{
fieldName: "STREET",
label: "STREET",
visible: true
},
{
fieldName: "DATE",
label: "DATE",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}
]
};
let map = new Map({
basemap: "satellite",
});
let view = new MapView({
container: "viewDiv",
center: [67.068037, 24.872328],
zoom: 12,
map: map
});
let options = {
query: {
f: "json"
},
responseType: "json"
};
let fetchData = () => esriRequest(url, options).then(response => response.data)
let webservice = res => {
res.map(function(result, i){
let resultPnts = result.Shape.points.map(function(point){
return new Polygon({
rings:point,
spatialReference : {
wkid: 102100
}
});
})
let atts = {
"ObjectID": i,
"CATEGORY": result.CATEGORY,
"TYPE": result.TYPE,
"TOWN": result.TOWN,
"BLOCK_PHASE_SECTOR": result.BLOCK_PHASE_SECTOR,
"STREET": result.STREET,
"DATE": result.DATE
};
let graArr = resultPnts.map(function(pnt){
let markerSymbol = {
type: "simple-fill",
color: [100, 139, 79],
outline: {
color: [255, 255, 255],
width: 1
}
};
let g =new Graphic({
geometry:pnt,
symbol: markerSymbol,
attributes: atts
})
myData.push(g)
})
return graArr
})
console.log(myData)
let layer = new FeatureLayer({
geometryType: "polygon",
source: myData,
fields: fields,
objectIdField: "ObjectID",
popupTemplate: pTemplate
});
map.add(layer)
var legend = new Legend({
view: view,
layerInfos: [
{
layer: layer,
title: "Town"
}
]
});
view.ui.add(legend, 'bottom-left')
}
view.when(() =>{
fetchData()
.then(webservice)
view.popup.autoOpenEnabled = true;
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>