How do I Create a FeatureLayer with client side graphics in 3.x?

JoshuaMcCurry · ‎04-19-2017

I am trying to convert a graphics array to a FeatureLayer, exactly like the following ESRI API example:

I'm having to convert this example back to 3.2 because I need to add a feature table which is not yet available in 4.3.

Can anybody tell me how to do this with the 3.2 library instead of the 4.3?

More specifically, I need to know how to get the same results on the 'new Point' function found on line 293. In 4.3, the array that is created has a lot more attributes that the same array created in 3.2. From what I can tell, this is what is keeping me from creating the new FeatureLayer in 3.2.

Thank you.

RobertScheitlin__GISP · ‎04-19-2017

Joshua,

Have you seen the FeatureCollection sample in 3.20?

Feature collection | ArcGIS API for JavaScript 3.20

View solution in original post

RobertScheitlin__GISP · ‎04-19-2017

Joshua,

Have you seen the FeatureCollection sample in 3.20?

Feature collection | ArcGIS API for JavaScript 3.20

JoshuaMcCurry · ‎04-20-2017

Thanks Robert...FeatureCollection worked perfectly!

RobertScheitlin__GISP · ‎04-19-2017

Joshua,

Also here is that 4.x sample converted to 3.20:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Create a FeatureLayer with client side graphics - 3.20</title>
  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #infoDiv {
      position: absolute !important;
      top: 15px;
      right: 5px;
      max-height: 80%;
      max-width: 300px;
      background-color: black;
      padding: 8px;
      border-top-left-radius: 5px;
      color: white;
      opacity: 0.8;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.20/"></script>

  <script>
    require([
      "esri/map",
      "esri/graphic",
      "esri/dijit/PopupTemplate",
      "esri/layers/FeatureLayer",
      "esri/layers/Field",
      "esri/geometry/Point",
      "esri/renderers/SimpleRenderer",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/dijit/Legend",
      "esri/request",
      "dojo/_base/array",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function(Map, Graphic, PopupTemplate, FeatureLayer, Field, Point,
      SimpleRenderer, SimpleMarkerSymbol, Legend, esriRequest,
      arrayUtils, dom, on
    ) {

      var lyr, legend;

      // Set up popup template for the layer
      var pTemplate = new PopupTemplate({
        title: "{title}",
        fieldInfos: [{
          fieldName: "place",
          label: "Location",
          visible: true
        }, {
          fieldName: "time",
          label: "Date and time",
          visible: true
        }, {
          fieldName: "mag",
          label: "Magnitude",
          visible: true
        }, {
          fieldName: "mmi",
          label: "Intensity",
          visible: true
        }, {
          fieldName: "depth",
          label: "Depth",
          visible: true
        }, {
          fieldName: "felt",
          label: "Number who felt the quake",
          visible: true,
          format: {
            digitSeparator: true,
            places: 0
          }
        }, {
          fieldName: "sig",
          label: "Significance",
          visible: true
        }, {
          fieldName: "url",
          label: "More info",
          visible: true
        }, {
          fieldName: "time",
          format: {
            dateFormat: "short-date-short-time"
          }
        }]
      });

      /**************************************************
       * Create the map and view
       **************************************************/

      var map = new Map("mapDiv", {
        basemap: "dark-gray",
        center: [-144.492, 62.771],
        zoom: 5,
      });

      map.infoWindow.highlight = false;

      map.on("load", function() {
        // Request the earthquake data from USGS when the view resolves
        getData()
          .then(createGraphics) // then send it to the createGraphics() method
          .then(createLayer) // when graphics are created, create the layer
          .then(createLegend) // when layer is created, create the legend
          .otherwise(errback);
      });

      // Request the earthquake data
      function getData() {

        // data downloaded from the USGS at http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/ on 4/4/16
        // month.geojson represents recorded earthquakes between 03/04/2016 and 04/04/2016
        // week.geojson represents recorded earthquakes betwen 03/28/2016 and 04/04/2016

        var url = "week.geojson";

        return esriRequest({
          url,
          handleAs: "json"
        });
      }

      /**************************************************
       * Create graphics with returned geojson data
       **************************************************/

      function createGraphics(response) {
        // Create an array of Graphics from each GeoJSON feature
        return arrayUtils.map(response.features, function(feature, i) {
          return new Graphic(
            new Point({
              x: feature.geometry.coordinates[0],
              y: feature.geometry.coordinates[1]
            }), null,
            // select only the attributes you care about
            {
              ObjectID: i,
              title: feature.properties.title,
              type: feature.properties.type,
              place: feature.properties.place,
              depth: feature.geometry.coordinates[2] + " km",
              time: feature.properties.time,
              mag: feature.properties.mag,
              mmi: feature.properties.mmi,
              felt: feature.properties.felt,
              sig: feature.properties.sig,
              url: feature.properties.url
            }
          );
        });
      }

      /**************************************************
       * Create a FeatureLayer with the array of graphics
       **************************************************/

      function createLayer(graphics) {

        var featureCollection = {
          "layerDefinition": null,
          "featureSet": {
            "features": graphics,
            "geometryType": "esriGeometryPoint"
          }
        };
        featureCollection.layerDefinition = {
          "geometryType": "esriGeometryPoint",
          "objectIdField": "ObjectID",
          "drawingInfo": {
            "renderer": {
              "type": "simple",
              "symbol": {
                "color": [255, 255, 255, 0],
                "size": 20,
                "angle": 0,
                "xoffset": 0,
                "yoffset": 0,
                "type": "esriSMS",
                "style": "esriSMSCircle",
                "outline": {
                  "color": [211, 0, 85, 255],
                  "width": 1,
                  "type": "esriSLS",
                  "style": "esriSLSSolid"
                }
              },
              "visualVariables": [{
                "type": "sizeInfo",
                "field": "mag", // earthquake magnitude
                "valueUnit": "unknown",
                "minDataValue": 2,
                "maxDataValue": 7,
                // Define size of mag 2 quakes based on scale
                "minSize": {
                  "type": "sizeInfo",
                  "expression": "view.scale",
                  "stops": [{
                      "value": 1128,
                      "size": 12
                    },
                    {
                      "value": 36111,
                      "size": 12
                    },
                    {
                      "value": 9244649,
                      "size": 6
                    },
                    {
                      "value": 73957191,
                      "size": 4
                    },
                    {
                      "value": 591657528,
                      "size": 2
                    }
                  ]
                },
                // Define size of mag 7 quakes based on scale
                "maxSize": {
                  "type": "sizeInfo",
                  "expression": "view.scale",
                  "stops": [{
                      "value": 1128,
                      "size": 80
                    },
                    {
                      "value": 36111,
                      "size": 60
                    },
                    {
                      "value": 9244649,
                      "size": 50
                    },
                    {
                      "value": 73957191,
                      "size": 50
                    },
                    {
                      "value": 591657528,
                      "size": 25
                    }
                  ]
                }
              }]
            }
          },
          "fields": [{
            name: "ObjectID",
            alias: "ObjectID",
            type: "oid"
          }, {
            name: "title",
            alias: "title",
            type: "string"
          }, {
            name: "type",
            alias: "type",
            type: "string"
          }, {
            name: "place",
            alias: "place",
            type: "string"
          }, {
            name: "depth",
            alias: "depth",
            type: "string"
          }, {
            name: "time",
            alias: "time",
            type: "date"
          }, {
            name: "mag",
            alias: "Magnitude",
            type: "double"
          }, {
            name: "url",
            alias: "url",
            type: "string"
          }, {
            name: "mmi",
            alias: "intensity",
            type: "double"
          }, {
            name: "felt",
            alias: "Number of felt reports",
            type: "double"
          }, {
            name: "sig",
            alias: "significance",
            type: "double"
          }]
        };

        lyr = new FeatureLayer(featureCollection, {
          infoTemplate: pTemplate
        });

        map.addLayer(lyr);

        return lyr;
      }

      /******************************************************************
       * Add layer to layerInfos in the legend
       ******************************************************************/

      function createLegend(layer) {
        // if the legend already exists, then update it with the new layer
        if (legend) {
          legend.layerInfos = [{
            layer: layer,
            title: "Magnitude"
          }];
        } else {
          legend = new Legend({
            map: map,
            layerInfos: [{
              layer: layer,
              title: "Earthquake"
            }]
          }, "legDiv");
          legend.startup();
        }
      }

      // Executes if data retrieval was unsuccessful.
      function errback(error) {
        console.error("Creating legend failed. ", error);
      }

    });
  </script>
</head>

<body>
  <div id="mapDiv"></div>
  <div id="infoDiv">
    <h2>Worldwide Earthquakes</h2> Reported from 03/28/16 to 04/04/16
    <div id="legDiv"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍