feature layer from portal item id 3.x?

BrandonFlessner · ‎03-22-2017

What's the best/easiest way to add a feature layer from a portal item id in 3.x? I'd like to add data from someone else's AGOL/Portal item into my application. The data is public. Here's a 4.3 example of what I'm trying to do: https://jsbin.com/pigopevece/edit?html,output

I believe the portal item (9a4710a21eac4a368464eb7bae8c3fb5) is a feature collection. Note that I don't need the symbology necessarily, just the data. I will specify my own symbols.

Right now my thinking is to make a request to this data url (http://kytc.maps.arcgis.com/sharing/rest/content/items/9a4710a21eac4a368464eb7bae8c3fb5/data ), pull out the feature collection, and create the feature layer from that.

BrandonFlessner · ‎03-22-2017

Thanks Robert, I got a sample up and running here: JS Bin - Collaborative JavaScript Debugging

Note line 35 where you need to push the domain into corsEnabledServers. Won't work without that. You'll also need to point to the index of the layer you want in the layers array from the response (response.layers[0] in this case).

<!DOCTYPE html>
<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>FeatureLayer On Demand</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>
    <script src="https://js.arcgis.com/3.20/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/request",
        "dojo/parser", "dojo/domReady!"
      ], function(
        Map, InfoTemplate, FeatureLayer, esriRequest,
        parser
      ) {
        parser.parse();
        map = new Map("mapDiv", {
          center: [-86, 38],
          zoom: 8,
          basemap: "gray"
        });

        esri.config.defaults.io.corsEnabledServers.push('kytc.maps.arcgis.com');

        map.on("load", initOperationalLayer);

        function initOperationalLayer() {

          var url = 'http://kytc.maps.arcgis.com/sharing/rest/content/items/9a4710a21eac4a368464eb7bae8c3fb5/data';
          var request = esriRequest({
            url: url,
            content: {f: 'json'},
            handleAs: 'json'
          }).then(function(response){
            console.log(response.layers[0]);
            var infoTemplate = new InfoTemplate("${subtype}", "${*}");
            var featureLayer = new FeatureLayer(response.layers[0], {
              infoTemplate: infoTemplate,
              refreshInterval: 1
            });

            map.addLayer(featureLayer);
          }, function(err){
            console.log(err);
          });


        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv">
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎03-22-2017

Brandon,

If you do an esriRequest on that url and get the json responce back from that it is basically a FeatureCollection so just add that to a FeatureLayer object:

var featureLayer = new FeatureLayer( response );‍

BrandonFlessner · ‎03-22-2017

Thanks Robert, I got a sample up and running here: JS Bin - Collaborative JavaScript Debugging

Note line 35 where you need to push the domain into corsEnabledServers. Won't work without that. You'll also need to point to the index of the layer you want in the layers array from the response (response.layers[0] in this case).

<!DOCTYPE html>
<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>FeatureLayer On Demand</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>
    <script src="https://js.arcgis.com/3.20/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/request",
        "dojo/parser", "dojo/domReady!"
      ], function(
        Map, InfoTemplate, FeatureLayer, esriRequest,
        parser
      ) {
        parser.parse();
        map = new Map("mapDiv", {
          center: [-86, 38],
          zoom: 8,
          basemap: "gray"
        });

        esri.config.defaults.io.corsEnabledServers.push('kytc.maps.arcgis.com');

        map.on("load", initOperationalLayer);

        function initOperationalLayer() {

          var url = 'http://kytc.maps.arcgis.com/sharing/rest/content/items/9a4710a21eac4a368464eb7bae8c3fb5/data';
          var request = esriRequest({
            url: url,
            content: {f: 'json'},
            handleAs: 'json'
          }).then(function(response){
            console.log(response.layers[0]);
            var infoTemplate = new InfoTemplate("${subtype}", "${*}");
            var featureLayer = new FeatureLayer(response.layers[0], {
              infoTemplate: infoTemplate,
              refreshInterval: 1
            });

            map.addLayer(featureLayer);
          }, function(err){
            console.log(err);
          });


        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv">
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

MihkelMänna · ‎06-27-2017

Is there a way to add a layer from a Feature Service layer (not a Feature Collection) portal item?

BrandonFlessner · ‎07-03-2017

Mihkel,

I imagine its almost the same pattern. In the solution, the response from the request actually contains multiple layers and I only added the first (response.layers[0]). I would start by going to the the feature service layer url, adding '/data' to the end of it and see what the response is. My guess is that it will contain what you need to create the feature layer in your app.