I am using JavaScript 4.7 and I am able to retrieve json using esriRequest from our ArcGIS server.
However, I have difficulty in showing this data on the map layer.
the call map.addLayer(featureLayer); is not working. Here is the code I am using
<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>Request Test</title>
<link rel="stylesheet" href="http://js.arcgis.com/4.2/dijit/themes/claro/claro.css">
<style>
html, body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#header {
height: 3%;
overflow: auto;
}
</style>
<script src="http://js.arcgis.com/4.7/"></script>
<script>
require([
"esri/request",
"dojo/on",
"esri/Map",
"esri/layers/FeatureLayer",
"esri/renderers/support/jsonUtils",
"esri/views/MapView",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color", "esri/renderers/SimpleRenderer",
"esri/tasks/support/FeatureSet",
"dojo/domReady!"
], function (
esriRequest,
on,
Map,
FeatureLayer,
rendererJsonUtils, MapView, SimpleMarkerSymbol, Color, SimpleRenderer,
FeatureSet
) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});
var input = document.getElementById("inputUrl");
/************************************************
*
* Define the 'options' for our request.
*
*************************************************/
var options = {
query: {
f: 'json'
}
responseType: 'json'
};
// Make the request on a button click using the
// value of the 'input' text.
on(btnQuery, "click", function () {
var url = input.value;
esriRequest(url, options).then(function (response) {
var responseJSON = JSON.stringify(response, null, 2);
var search_layer_result = JSON.parse(responseJSON);
var fs = new FeatureSet(search_layer_result);
var layerDefinition = {
"displayFieldName": "NAME",
"geometryType": "esriGeometryPoint",
"spatialReference": {
"wkid": 32633
},
"fields": [
{
"name": "OBJECTID",
"type": "esriFieldTypeOID",
"alias": "OBJECTID"
},
{
"name": "NAME",
"type": "esriFieldTypeString",
"alias": "NAME",
"length": 50
}
]
};
var featureCollection = {
layerDefinition: layerDefinition,
featureSet: fs
};
var featureLayer = new FeatureLayer(featureCollection);
map.addLayer(featureLayer);
});
});
});
</script>
</head>
<body>
<div class="container">
<div>
<h2>Using esri/request</h2>
<button id="btnQuery">Make Request</button>
<input id="inputUrl" type="text" value="https://arcgisserver/map">
</div>
</div>
<div id="viewDiv">MAP HERE</div>
</body>
</html>
1 Answer 1
According to the documentation :
FeatureLayers may be created in one of three ways: from a service URL, an ArcGIS portal item ID, or from an array of client-side graphics
So in your case, you would use the third option : https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#source
By looking at your layerDefinition, your esriRequest should return two values : OBJECTID and NAME
Now use them to populate the attributes of your graphics :
var features = [
{
geometry: {
type: "point",
x: -100,
y: 38
},
attributes: {
ObjectID: objectid,
name: name
}
},
...
];
var featureLayer = new FeatureLayer({
source: features
});
And as Berend said, in ArcGIS Javascript version 4, you should be using :
map.add(featureLayer);
layer = new FeatureLayer({url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0"});Is that what you want? See here for details: developers.arcgis.com/javascript/latest/api-reference/… Oh, and one minor thing: As far as I know there is no such thing as Java 4.7, do you mean ArcGIS API for JavaScript 4.7 by any chance?addLayer(). You should probably be usingadd(): developers.arcgis.com/javascript/latest/api-reference/…