AnsweredAssumed Answered

How to create a FeatureLayer for 3D maps?

Question asked by vlantaca on Apr 25, 2018
Latest reply on Apr 26, 2018 by kenbuja



I am trying to create my own FeatureLayer and render points with 3D symbols. I am trying to use the sample code Thematic visualization with realistic 3D symbols as an example.


When I try to make a new FeatureLayer from a graphics array, however, I am getting an error:


dojo.js:249 [esri.core.Accessor] Accessor#set Invalid property value, value needs to be one of 'esri.geometry.Extent', 'esri.geometry.Multipoint', 'esri.geometry.Point', 'esri.geometry.Polyline', 'esri.geometry.Polygon', 'esri.geometry.Mesh', or a plain object that can auto-cast (having .type = 'extent', 'multipoint', 'point', 'polyline', 'polygon', 'mesh')


<!DOCTYPE html>

   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
   <title>Thematic visualization with realistic 3D symbols - 4.7</title>

   <link rel="stylesheet" href="">
   <script src=""></script>

      #viewDiv {
         padding: 0;
         margin: 0;
         height: 100%;
         width: 100%;

            Map, SceneView, FeatureLayer, Legend, Point
         ) {

             * Set the Renderer and Layer for the trees. The symbol references
             * a hosted 3D symbol resource that resembles a tree.
             * Four visual variables are used to modify this symbol on the
             * client. One for the crown height (height axis),
             * another for crown diameter from north to south (depth axis), and
             * another for crown diameter from east to west (width axis).
             * The color visual variable shades each tree based on its
             * carbon storage.

            var renderer = {
               type: "simple", // autocasts as new SimpleRenderer()
               symbol: {
                  type: "web-style", // autocasts as new WebStyleSymbol()
                  styleName: "EsriRealisticTreesStyle",
                  name: "Helianthus"
               label: "tree",
               visualVariables: [{
                  type: "color",
                  field: "ObjectID", // Carbon storage
                  stops: [{
                     color: "#ec9df9"
                  legendOptions: {
                     title: "title"

            var fields = [
                  name: "ObjectID",
                  alias: "ObjectID",
                  type: "old"

            // Create Feature Layer
            var newflayer = new FeatureLayer({
               source: [], // autocast as an array of esri/Graphic
               // create an instance of esri/layers/support/Field for each field object
               fields: fields, // This is required when creating a layer from Graphics
               objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics
               renderer: renderer, // set the visualization on the layer
               outFields: ["*"],
               spatialReference: {
                  wkid: 3857
               geometryType: "point" // Must be set when creating a layer from Graphics

               geometry: new Point({
                  x: -9177356,
                  y: 4246783
               attributes: {
                  ObjectID: 1

            var map = new Map({
               //basemap: "streets-night-vector",
               basemap: "osm",
               ground: "world-elevation",
               layers: [newflayer]

            var view = new SceneView({
               container: "viewDiv",
               map: map,
               camera: {
                  position: {
                     x: -9177356,
                     y: 4246783,
                     z: 723,
                     spatialReference: {
                        wkid: 3857
                  heading: 0,
                  tilt: 83
               // Set dock options on the view's popup
               popup: {
                  dockEnabled: true,
                  dockOptions: {
                     breakpoint: false
               // enable shadows to be cast from the features
               environment: {
                  lighting: {
                     directShadowsEnabled: true

            view.when(function() {
               var legend = new Legend({
                  view: view
               view.ui.add(legend, "top-right");


   <div id="viewDiv"></div>



I'm just trying to see if I can add a WebStyleSymbol at the center of the view. As far as I can tell, the error comes when I call newflayer.source.add(). I am declaring a Point object, but I'm not sure what I am doing wrong.


Thanks in advanced