feature layer from portal item id 3.x?

1827
4
Jump to solution
03-22-2017 07:49 AM
BrandonFlessner
Occasional Contributor

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. 

0 Kudos
1 Solution

Accepted Solutions
BrandonFlessner
Occasional Contributor

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

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
MihkelMänna
Occasional Contributor

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

0 Kudos
BrandonFlessner
Occasional Contributor

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.

0 Kudos