Issue on Generating FeatureLayer From FeatureCollection With ArcGIS JS API

BehrouzHosseini · ‎12-12-2016

Can you please take a look at This Demo and let me if this is doable to create a FeatureLayer from featureCollection without using URL

Here is the code I am trying to use:

var schoolData = {"schools":[
 { "latitude":49.2752, "longitude":-123.0719, "name":"King George" },
 { "latitude":49.2627, "longitude":-123.1636, "name":"Britannia" },
 { "latitude":49.2253, "longitude":-123.0442, "name":"Killarney" }
 ]};
 
 var featureCollection = {
 "layerDefinition": null,
 "featureSet": {
 "features": [],
 "geometryType": "esriGeometryPoint"
 }
 };
 featureCollection.layerDefinition = {
 "geometryType": "esriGeometryPoint",
 "objectIdField": "ObjectID",
 "drawingInfo": {
 "renderer": {
 "type": "simple",
 "symbol": {
 "type": "esriPMS",
 "width": 15,
 "height": 15
 }
 }
 },
 "fields": [{
 "name": "ObjectID",
 "alias": "ObjectID",
 "type": "esriFieldTypeOID"
 }, {
 "name": "latitude",
 "alias": "Description",
 "type": "esriFieldTypeGeometry"
 }, {
 "name": "longitude",
 "alias": "Title",
 "type": "esriFieldTypeGeometry"
 },{
 "name": "name",
 "alias": "Description",
 "type": "esriFieldTypeString"
 }]
 };
 
 var featureLayer = new FeatureLayer(featureCollection, { id: 'schoolsLayer' });
  map.addLayers(featureLayer);
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎12-12-2016

Behrouz,

Here is your demo code corrected:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.18/esri/css/esri.css">

    <style type="text/css">
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <title> by Behseini</title>
    <script src="https://js.arcgis.com/3.18/"></script>

    <script type='text/javascript'>
        var map, featureLayer;
        require([
                "esri/map",
                "esri/layers/FeatureLayer",
                "esri/geometry/Point",
                "esri/graphic",
                "dojo/on",
                "dojo/_base/array",
                "dojo/domReady!"
            ],
            function(
                Map,
                FeatureLayer,
                Point,
                Graphic,
                on,
                array
            ) {

                map = new Map("map", {
                    basemap: "gray",
                    center: [-123.141608, 49.245291],
                    zoom: 10
                });

                var schoolData = {
                    "schools": [{
                        "latitude": 49.2752,
                        "longitude": -123.0719,
                        "name": "King George"
                    }, {
                        "latitude": 49.2627,
                        "longitude": -123.1636,
                        "name": "Britannia"
                    }, {
                        "latitude": 49.2253,
                        "longitude": -123.0442,
                        "name": "Killarney"
                    }]
                };

                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": {
                        "features": [],
                        "geometryType": "esriGeometryPoint"
                    }
                };
                featureCollection.layerDefinition = {
                    "geometryType": "esriGeometryPoint",
                    "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                "type": "esriSMS",
                                "style": "esriSMSSquare",
                                "color": [76, 115, 0, 255],
                                "size": 8,
                                "angle": 0,
                                "xoffset": 0,
                                "yoffset": 0,
                                "outline": {
                                    "color": [152, 230, 0, 255],
                                    "width": 1
                                }
                            }
                        }
                    },
                    "fields": [{
                        "name": "ObjectID",
                        "alias": "ObjectID",
                        "type": "esriFieldTypeOID"
                    }, {
                        "name": "latitude",
                        "alias": "Description",
                        "type": "esriFieldTypeGeometry"
                    }, {
                        "name": "longitude",
                        "alias": "Title",
                        "type": "esriFieldTypeGeometry"
                    }, {
                        "name": "name",
                        "alias": "Description",
                        "type": "esriFieldTypeString"
                    }]
                };

                featureLayer = new FeatureLayer(featureCollection, {
                    id: 'schoolsLayer'
                });

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

                map.addLayers([featureLayer]);

                function addData() {
                    var features = [];
                    array.forEach(schoolData.schools, function(school) {
                        var attr = {};
                        attr["latitude"] = school.latitude;
                        attr["longitude"] = school.longitude;
                        attr["name"] = school.name;

                        var geometry = new Point(school);

                        var graphic = new Graphic(geometry);
                        graphic.setAttributes(attr);
                        features.push(graphic);
                    });

                    featureLayer.applyEdits(features, null, null);
                }

            });
    </script>


</head>

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

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

View solution in original post

RobertScheitlin__GISP · ‎12-12-2016

Behrouz,

Here is your demo code corrected:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.18/esri/css/esri.css">

    <style type="text/css">
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <title> by Behseini</title>
    <script src="https://js.arcgis.com/3.18/"></script>

    <script type='text/javascript'>
        var map, featureLayer;
        require([
                "esri/map",
                "esri/layers/FeatureLayer",
                "esri/geometry/Point",
                "esri/graphic",
                "dojo/on",
                "dojo/_base/array",
                "dojo/domReady!"
            ],
            function(
                Map,
                FeatureLayer,
                Point,
                Graphic,
                on,
                array
            ) {

                map = new Map("map", {
                    basemap: "gray",
                    center: [-123.141608, 49.245291],
                    zoom: 10
                });

                var schoolData = {
                    "schools": [{
                        "latitude": 49.2752,
                        "longitude": -123.0719,
                        "name": "King George"
                    }, {
                        "latitude": 49.2627,
                        "longitude": -123.1636,
                        "name": "Britannia"
                    }, {
                        "latitude": 49.2253,
                        "longitude": -123.0442,
                        "name": "Killarney"
                    }]
                };

                var featureCollection = {
                    "layerDefinition": null,
                    "featureSet": {
                        "features": [],
                        "geometryType": "esriGeometryPoint"
                    }
                };
                featureCollection.layerDefinition = {
                    "geometryType": "esriGeometryPoint",
                    "objectIdField": "ObjectID",
                    "drawingInfo": {
                        "renderer": {
                            "type": "simple",
                            "symbol": {
                                "type": "esriSMS",
                                "style": "esriSMSSquare",
                                "color": [76, 115, 0, 255],
                                "size": 8,
                                "angle": 0,
                                "xoffset": 0,
                                "yoffset": 0,
                                "outline": {
                                    "color": [152, 230, 0, 255],
                                    "width": 1
                                }
                            }
                        }
                    },
                    "fields": [{
                        "name": "ObjectID",
                        "alias": "ObjectID",
                        "type": "esriFieldTypeOID"
                    }, {
                        "name": "latitude",
                        "alias": "Description",
                        "type": "esriFieldTypeGeometry"
                    }, {
                        "name": "longitude",
                        "alias": "Title",
                        "type": "esriFieldTypeGeometry"
                    }, {
                        "name": "name",
                        "alias": "Description",
                        "type": "esriFieldTypeString"
                    }]
                };

                featureLayer = new FeatureLayer(featureCollection, {
                    id: 'schoolsLayer'
                });

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

                map.addLayers([featureLayer]);

                function addData() {
                    var features = [];
                    array.forEach(schoolData.schools, function(school) {
                        var attr = {};
                        attr["latitude"] = school.latitude;
                        attr["longitude"] = school.longitude;
                        attr["name"] = school.name;

                        var geometry = new Point(school);

                        var graphic = new Graphic(geometry);
                        graphic.setAttributes(attr);
                        features.push(graphic);
                    });

                    featureLayer.applyEdits(features, null, null);
                }

            });
    </script>


</head>

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

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

RobertScheitlin__GISP · ‎12-12-2016

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

BehrouzHosseini · ‎12-13-2016

Thanks Robert!