Esri Json to FeatureLayer

BillChappell — Wed, 03 Feb 2016 17:48:11 GMT

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>

<title>FeatureLayer</title>

<style>

html, body, #map {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

</style>

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>

</html>

Re: Esri Json to FeatureLayer

JakeSkinner — Sat, 11 Dec 2021 17:53:01 GMT

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>

Re: Esri Json to FeatureLayer

BillChappell — Wed, 03 Feb 2016 20:14:38 GMT

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..

topic Re: Esri Json to FeatureLayer in ArcGIS JavaScript Maps SDK Questions

Esri Json to FeatureLayer

Re: Esri Json to FeatureLayer

Re: Esri Json to FeatureLayer