FeatureLayer from FeatureCollection

GregKnight · ‎09-21-2015

I am trying to create a polygon feature layer from a feature collection. I have modified the Flickr sample to use polygon geometries, rather than point geometries. The features are not getting added to the layer properly. I have put together a JSFiddle here that illustrates the problem.

JSFiddle

I have commented out line 137 where I add the features to the layer, as this results in the map turning white. While the API doesn't display any errors in the console, I don't get the results on the map either. What am I missing?

RobertScheitlin__GISP · ‎09-21-2015

Greg,

OK,

Here is a fiddle that is working.

View solution in original post

RobertScheitlin__GISP · ‎09-21-2015

Greg,

When you define the buildingFeatures graphic object you do not define the spatialReference of the geometry and the object still needs to be converted/cast to a graphic object.

RobertScheitlin__GISP · ‎09-21-2015

Greg,

OK,

Here is a fiddle that is working.

GregKnight · ‎09-21-2015

Thank you Robert. That did the trick.

LefterisKoumis · ‎12-14-2015

Robert, I cannot access the fiddle you posted. It just gives me a blank screen in fiddle. Can you check or post the solution? Thanks.

RobertScheitlin__GISP · ‎12-14-2015

Lefteris,

See if this one works for you

Edit fiddle - JSFiddle

LefterisKoumis · ‎12-14-2015

Unfortunately, no. I tried in Chrome, IE and Firefox. Chorme and IE is completely blank. In firefox it just gives me the top and left menu but the content is blank as well.

RobertScheitlin__GISP · ‎12-14-2015

Lefteris,

Not sure why is is not working for you but here is the code:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Identify with Popup</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css" />
  <style> html, body, #map {
      height:100%;
      width:100%;
      margin:0;
      padding:0;
    }
    .esriScalebar {
      padding: 20px 20px;
    }
    #map {
      padding:0;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    var buildingFeatures = [
      {
      "geometry": {
        "rings": [
            [
              [-7934268.5205879416, 5239938.2059039511],
              [-7934272.5229558591, 5239933.8636669926],
              [-7934296.1346804313, 5239908.1790492274],
              [-7934333.0325830523, 5239942.0546528958],
              [-7934299.2766397167, 5239978.7181594633],
              [-7934262.3488515429, 5239945.0184453987],
              [-7934268.5205879416, 5239938.2059039511]
            ]
        ],
        "spatialReference":{"wkid":102100}
      },
      "attributes": {
        "bl_id": "B-US-MA-1002",
        "name": "LIBRARY",
        "use1": "ACADEMIC"
      }
    }];

    var map;
    require([
        "esri/map",
        "esri/graphic",
        "esri/layers/FeatureLayer",
        "esri/geometry/Extent",
        "dojo/on",
        "dojo/_base/array",
        "dojo/domReady!"
        ],
      function (
        Map,
        Graphic,
        FeatureLayer,
        Extent,
        on,
        array
      ) {

        var featureLayer;

        var mapExtent = new Extent({
          "xmin": -7934548,
          "ymin": 5239708,
          "xmax": -7933850,
          "ymax": 5240063,
          "spatialReference": {
            "wkid": 102100
          }
        });

        map = new Map("map", {
          basemap: "satellite",
          extent: mapExtent
        });

        //create a feature collection for the buildings
        var featureCollection = {
          "layerDefinition": null,
          "featureSet": {
            "features": [],
            "geometryType": "esriGeometryPolygon"
          }
        };

        featureCollection.layerDefinition = {
          "geometryType": "esriGeometryPolygon",
          "objectIdField": "ObjectID",
          "drawingInfo": {
            "renderer": {
              "type": "simple",
              "symbol": {
                "type": "esriSFS",
                "style": "esriSFSSolid",
                "color": [
                        31,
                        121,
                        180,
                        255],
                "outline": {
                  "type": "esriSLS",
                  "style": "esriSLSSolid",
                  "color": [
                            110,
                            110,
                            110,
                            255],
                  "width": 0.4
                }
              }
            }
          },
          "fields": [{
            "name": "ObjectID",
            "alias": "ObjectID",
            "type": "esriFieldTypeOID"
          }, {
            "name": "bl_id",
            "type": "esriFieldTypeString",
            "alias": "BL_ID",
            "domain": null,
            "editable": true,
            "nullable": true,
            "length": 12
          }, {
            "name": "name",
            "type": "esriFieldTypeString",
            "alias": "name",
            "domain": null,
            "editable": true,
            "nullable": true,
            "length": 25
          }, {
            "name": "use1",
            "type": "esriFieldTypeString",
            "alias": "use1",
            "domain": null,
            "editable": true,
            "nullable": true,
            "length": 32
          }]
        };

        //create a feature layer based on the feature collection
        featureLayer = new FeatureLayer(featureCollection, {
          id: 'buildingFeatures'
        });

        map.on("layers-add-result", function (results) {
          addBuildingFeatures();
        });

        //add the building feature layer
        map.addLayers([featureLayer]);

        function addBuildingFeatures() {
          var features = array.map(buildingFeatures, function(feature){
            return new Graphic(feature);
          });
          featureLayer.applyEdits(features, null, null);
        }
      });
  </script>
</head>

<body>
  <div id="map"></div>
</body>

</html>

LefterisKoumis · ‎12-14-2015

Thank you.

LefterisKoumis · ‎12-14-2015

A question for featurecollection. If I want to use the layer definition of an existing feature layer that is on the map (same geometry, fields...) to define a new feature layer with a different featureSet, can I define the feature collection like:

featureCollection =

layerDefinition: <existing layer definition>

featureSet: <new>

?

Thank you.