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: { // autocasts as new SimpleLineSymbol()
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){
//console.log(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", // autocasts as new SimpleMarkerSymbol()
color: [226, 119, 40]
};
return new Graphic({
geometry:pnt,
symbol: markerSymbol,
attributes: atts
})
})
return graArr
})
//console.log(graphicsArray)
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>
Solved! Go to Solution.
Thank you Robert,
error occurs because of an array inside and array. I create an empty array with name myData and push graphic object into myData then call its instance in FeatureLayer. Its working well.
let myData = [];
let g = new Graphic({
geometry:projectedPoint,
symbol: markerSymbol,
attributes: atts
})
myData.push(g)
let layer = new FeatureLayer({
geometryType: "point",
source: myData,
fields: fields,
objectIdField: "ObjectID",
renderer: dataRenderer,
popupTemplate: pTemplate
});
Kawish,
Did you get results from either of your console.log lines you have commented out now?
Yes Robert.
I get data in console. Following data is from line 199.
What is the spatial reference of the data returned by the web service?
Spatial reference is 4326
Maybe spatialReference of points is different from the map.
return new Point({
x:point.x,
y:point.y,
spatialReference : result.SHAPE.srid
});
I had that kind of problem once when using Arcgis js api 3.x and needed to project the points before add to the map.
Spatial reference is 4326 but when i used GeoJSON service it works well.
GeoJSON service that i had used has same spatial reference as same as this web service.
Kawish,
The x and y values you are showing in your screen shot are NOT wkid 4326.
Sorry Robert
4326 is spatial reference of my another service.
Spatial reference of data returned by this service is 32642
Kawish,
Then you have to use the GeometryService or the projection class to project your data.