Esri Json to FeatureLayer

7232
2
Jump to solution
02-03-2016 09:48 AM
BillChappell
Occasional Contributor II

Hi,

Trying to get Esri Json to show up as a FeatureLayer. I've looked at posts like:

Re: FeatureLayer from JSON  but that's not AMD style or 3.15 JS API.  FeatureLayer creating in javascript ArcGIS API - Geographic Information Systems Stack Exchange shows fragments of code but I'm still stuck. My code failed in firebug with a "a is null error". in the API.

Chrome screams Uncaught TypeError: Cannot read property 'id' is null init.js  So I'm stuck, any ideas?

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

<title>FeatureLayer</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">

<script src="http://js.arcgis.com/3.15/"></script>

<!--<script src="travel6.json" type="text/javascript"></script>  -->

<style>

html, body, #map {

  padding: 0;

  margin: 0;

  height: 100%;

  width: 100%;

}

</style>

<script>

require([

    "esri/map","esri/symbols/SimpleMarkerSymbol", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/domReady!"

  ],

  function(

    Map, SimpleMarkerSymbol, FeatureLayer,InfoTemplate,createFeatureLayer

  ) {

 

    var map = new Map("map", {

      basemap: "streets",

     center: [-73.762713,42.8],

      zoom: 12

    });

       

        // function createFeatureLayer() {

          map.on('load', function(e) {

       

            var jsonFS = { 

              "geometryType": "esriGeometryPoint", 

              "features": [

     

             {  

                "attributes": { 

                  "Name": "Point2", 

                  "ObjectID": 2 

                }, 

                "geometry": { 

                    "x" : -73.739996666387981,

                    "y" : 42.758039999677138

                } 

              }, 

            { 

                "attributes": { 

                  "Name": "Point3", 

                  "ObjectID": 3 

                }, 

                "geometry": { 

                    "x" : -73.737916666754941,

                    "y" : 42.757533332975761 

                 } 

            } 

 

            ]

        }; 

            alert("Can you get this to fire off?");

            var fs = new FeatureSet(jsonFS); 

            var fsCollect = new FeatureSet(); 

            var featuresList = fs.features; 

     

            var layerDefinition = {

              "displayFieldName" : "",

              "fieldAliases" : {

                "FID" : "FID",

                "OBJECTID" : "OBJECTID",

                "LATITUDE" : "LATITUDE",

                "LONGITUDE" : "LONGITUDE",

                "ALTITUDE" : "ALTITUDE",

                "UTCDATE" : "UTCDATE",

                "UTCTIME" : "UTCTIME",

                "SOG" : "SOG",

                "COG" : "COG",

                "SATS_USED" : "SATS_USED",

                "PDOP" : "PDOP",

                "QUALITY" : "QUALITY",

                "LOCALTIME" : "LOCALTIME",

                "TIME" : "TIME",

                "SPEED" : "SPEED"

              },

              "geometryType" : "esriGeometryPoint",

              "spatialReference" : {

                "wkid" : 4326,

                "latestWkid" : 4326

              },

              "fields" : [

                {

                  "name" : "FID",

                  "type" : "esriFieldTypeOID",

                  "alias" : "FID"

                },

                {

                  "name" : "OBJECTID",

                  "type" : "esriFieldTypeInteger",

                  "alias" : "OBJECTID"

                },

                {

                  "name" : "LATITUDE",

                  "type" : "esriFieldTypeDouble",

                  "alias" : "LATITUDE"

                },

                {

                  "name" : "LONGITUDE",

                  "type" : "esriFieldTypeDouble",

                  "alias" : "LONGITUDE"

                },

                {

                  "name" : "ALTITUDE",

                  "type" : "esriFieldTypeDouble",

                  "alias" : "ALTITUDE"

                },

                {

                  "name" : "UTCDATE",

                  "type" : "esriFieldTypeDate",

                  "alias" : "UTCDATE",

                  "length" : 8

                },

                {

                  "name" : "UTCTIME",

                  "type" : "esriFieldTypeString",

                  "alias" : "UTCTIME",

                  "length" : 6

                },

                {

                  "name" : "SOG",

                  "type" : "esriFieldTypeSingle",

                  "alias" : "SOG"

                },

                {

                  "name" : "COG",

                  "type" : "esriFieldTypeSingle",

                  "alias" : "COG"

                },

                {

                  "name" : "SATS_USED",

                  "type" : "esriFieldTypeSmallInteger",

                  "alias" : "SATS_USED"

                },

                {

                  "name" : "PDOP",

                  "type" : "esriFieldTypeSingle",

                  "alias" : "PDOP"

                },

                {

                  "name" : "QUALITY",

                  "type" : "esriFieldTypeSmallInteger",

                  "alias" : "QUALITY"

                },

                {

                  "name" : "LOCALTIME",

                  "type" : "esriFieldTypeString",

                  "alias" : "LOCALTIME",

                  "length" : 9

                },

                {

                  "name" : "TIME",

                  "type" : "esriFieldTypeString",

                  "alias" : "TIME",

                  "length" : 16

                },

                {

                  "name" : "SPEED",

                  "type" : "esriFieldTypeDouble",

                  "alias" : "SPEED"

                }

              ] };

     

            var featureCollection = {

              layerDefinition: layerDefinition, 

              featureSet: fs 

            }; 

 

            alert(featureCollection.featureSet.features.length);  //nothing...

         

            featureLayer = new FeatureLayer(featureCollection); 

             var symbol = new esri.symbol.SimpleMarkerSymbol().setColor(new esri.Color([255,0,0,0.5]));

            var renderer = new esri.renderer.SimpleRenderer(symbol);

            featureLayer.setRenderer(renderer);

            map.addLayer(featureLayer); 

       });

      

       });

        </script> 

      </head> 

       

      <body class='claro'> 

        <div id="map" style="width:900px; height:600px; ></div> 

      </body> 

     

    </html> 

0 Kudos
1 Solution

Accepted Solutions
JakeSkinner
Esri Esteemed Contributor

Hi Bill,

One issue is that I believe the geometry coordinates need to be the same as the web map's spatial reference.  Below is an example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>FeatureLayer</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.15/"></script>
    <!--<script src="travel6.json" type="text/javascript"></script>  -->
    <style>
        html, body, #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require([
            "esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/renderers/SimpleRenderer",
            "esri/tasks/FeatureSet", "esri/layers/FeatureLayer",
            "dojo/domReady!"
        ], function(
            Map, SimpleMarkerSymbol, Color, SimpleRenderer,
            FeatureSet, FeatureLayer
        ) {

            var map = new Map("map", {
                basemap : "streets",
                center : [-73.76, 42.8],
                zoom : 12
            });

            // function createFeatureLayer() {
            map.on('load', function() {

                var jsonFS = {
                    "geometryType" : "esriGeometryPoint",
                    "features" : [
                        {
                          "attributes" : {
                             "Name": "Point2",
                             "OBJECTID": 2

                          },
                          "geometry" : {
                            "x" :  -8208588.5985,
                            "y" : 5273995.736
                          }
                        }
                      ]
                };

                var fs = new FeatureSet(jsonFS);

                var layerDefinition = {
                      "displayFieldName" : "Name",
                      "geometryType" : "esriGeometryPoint",
                      "spatialReference" : {
                        "wkid" : 102100
                      },
                      "fields" : [
                        {
                          "name" : "OBJECTID",
                          "type" : "esriFieldTypeOID",
                          "alias" : "OBJECTID"
                        },
                        {
                          "name" : "Name",
                          "type" : "esriFieldTypeString",
                          "alias" : "Name",
                          "length" : 10
                        }
                      ]
                }

                var featureCollection = {
                    layerDefinition : layerDefinition,
                    featureSet : fs
                };

                featureLayer = new FeatureLayer(featureCollection);
                var symbol = new SimpleMarkerSymbol().setColor(new esri.Color([255,0,0,0.5]));
                var renderer = new SimpleRenderer(symbol);
                featureLayer.setRenderer(renderer);

                map.addLayer(featureLayer);
            });

        });
        </script>
    </head>

    <body class='claro'>
        <div id="map" style="width:900px; height:600px;" ></div>
    </body>

</html>

View solution in original post

2 Replies
JakeSkinner
Esri Esteemed Contributor

Hi Bill,

One issue is that I believe the geometry coordinates need to be the same as the web map's spatial reference.  Below is an example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>FeatureLayer</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.15/"></script>
    <!--<script src="travel6.json" type="text/javascript"></script>  -->
    <style>
        html, body, #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require([
            "esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/renderers/SimpleRenderer",
            "esri/tasks/FeatureSet", "esri/layers/FeatureLayer",
            "dojo/domReady!"
        ], function(
            Map, SimpleMarkerSymbol, Color, SimpleRenderer,
            FeatureSet, FeatureLayer
        ) {

            var map = new Map("map", {
                basemap : "streets",
                center : [-73.76, 42.8],
                zoom : 12
            });

            // function createFeatureLayer() {
            map.on('load', function() {

                var jsonFS = {
                    "geometryType" : "esriGeometryPoint",
                    "features" : [
                        {
                          "attributes" : {
                             "Name": "Point2",
                             "OBJECTID": 2

                          },
                          "geometry" : {
                            "x" :  -8208588.5985,
                            "y" : 5273995.736
                          }
                        }
                      ]
                };

                var fs = new FeatureSet(jsonFS);

                var layerDefinition = {
                      "displayFieldName" : "Name",
                      "geometryType" : "esriGeometryPoint",
                      "spatialReference" : {
                        "wkid" : 102100
                      },
                      "fields" : [
                        {
                          "name" : "OBJECTID",
                          "type" : "esriFieldTypeOID",
                          "alias" : "OBJECTID"
                        },
                        {
                          "name" : "Name",
                          "type" : "esriFieldTypeString",
                          "alias" : "Name",
                          "length" : 10
                        }
                      ]
                }

                var featureCollection = {
                    layerDefinition : layerDefinition,
                    featureSet : fs
                };

                featureLayer = new FeatureLayer(featureCollection);
                var symbol = new SimpleMarkerSymbol().setColor(new esri.Color([255,0,0,0.5]));
                var renderer = new SimpleRenderer(symbol);
                featureLayer.setRenderer(renderer);

                map.addLayer(featureLayer);
            });

        });
        </script>
    </head>

    <body class='claro'>
        <div id="map" style="width:900px; height:600px;" ></div>
    </body>

</html>
BillChappell
Occasional Contributor II

I originally started with Geojson so the coords had to be lat/longs. Found this GitHub - Esri/geojson-layer-js: An easy way to load GeoJSON data into your ArcGIS map  But was unable to use the ClassBreaksRenderer,as it is not yet supported. So back to the drawing board had me with the Esri Json format.. Ran into the goofy error messages, posted this and jumped to Leaflet, where I can read the Geojson and plot the points but stuck there for the moment rendering circlemarkers by classbreaks. I can't tell what's up or down today and overlooked the old obvious map projection issue. 

Thanks for you help.. If you have any extra snow, ship some up, my snowmobiles are sitting in the garage waiting for some.. Albany, NY..

0 Kudos