3

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/esri/css/main.css">
    <link rel="stylesheet" type="text/css" 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>
Improve this question
2
  • If you have the URL to the FeatureServer, you can use that to instantiate a FeatureLayer object, e.g. 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?
    – Berend
    Commented May 31, 2018 at 14:43
  • One more thing: In version 4.x, the map object does not have a method called addLayer(). You should probably be using add(): developers.arcgis.com/javascript/latest/api-reference/…
    – Berend
    Commented May 31, 2018 at 14:47

1 Answer 1

Reset to default
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);
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.