KellyThomas/in-memory-feature-collection-js

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

    <!-- ArcGIS JavaScript API - Required CSS -->
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">

    <!-- ArcGIS JavaScript API -->
    <script src="https://js.arcgis.com/3.17/"></script>

    <style>
        html, body, #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- This is the div where we inject the Map -->
    <div id="map"></div>
    <script>

        // The ArcGIS JavaScript API uses AMD modules
        require([
                "esri/map",
                "esri/graphic",
                "esri/layers/FeatureLayer",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/renderers/SimpleRenderer",
                "dojo/_base/Color",
                "dojo/domReady!"
            ],
            // This is the AMD loader callback that assigns a scoped alias to each library module
            function(
                Map,
                Graphic,
                FeatureLayer,
                SimpleMarkerSymbol,
                SimpleRenderer,
                Color
            ) {

                // Initialize the map
                var map = new Map("map", {
                    basemap: "hybrid",
                    center: [-104.41, 69.26],
                    zoom: 10
                });

                // Create an in-memory layer for displaying geographic features such as points, lines and polygons
                var layerDefinition = {
                    "objectIdField": "id",
                    "geometryType" : "esriGeometryPoint",
                    "fields":[{
                        "name" : "id",
                        "alias" : "id",
                        "type" : "esriFieldTypeString"
                    },{
                        "name" : "depth",
                        "alias" : "depth",
                        "type": "esriFieldTypeInteger"
                    },{
                        "name" : "magnitude",
                        "alias" : "magnitude",
                        "type": "esriFieldTypeDouble"
                    },{
                        "name" : "plant",
                        "alias" : "plant",
                        "type": "esriFieldTypeString"
                    }]
                };

                // Create a single graphic (geographic feature) for display
                var myPoint = {
                    "geometry":{
                        "x":-104.4140625,"y":69.2578125,
                        "spatialReference":{"wkid":4326}
                    },
                    "attributes":{
                        "id":1,
                        "depth":200,
                        "magnitude":3.0,
                        "XCoord":-104.4140625,
                        "YCoord":69.2578125,
                        "plant":"Mesa Mint"
                    }
                };

                // Inject the myPoint JSON object into our Graphic
                var graphic = new Graphic(myPoint);

                // FeatureCollections are JSON that can be injected directly into an ArcGIS FeatureLayer
                var featureCollection = {
                    "layerDefinition": layerDefinition,
                    "featureSet": {
                        "features": [graphic],
                        "geometryType": "esriGeometryPoint"
                    }
                };

                // Inject the FeatureCollection in a FeatureLayer
                // FeatureLayer is one of the ways we can display and manipulate geographic features
                var fl2 = new FeatureLayer(featureCollection);

                // Create a square yellow symbol that will be associated with the feature we created above
                var symbol = new SimpleMarkerSymbol();
                symbol.style = SimpleMarkerSymbol.STYLE_SQUARE;
                symbol.setSize(20);
                symbol.setColor(new Color([255,255,0,0.5]));

                // Create an automated way to assign that symbol to any point features
                var renderer = new SimpleRenderer(symbol);

                // Assign the renderer to our in-memory feature layer
                fl2.setRenderer(renderer);

                // And, finally add the feature layer to the map.
                // As soon as it's added to the map the features will be displayed as defined in the SimpleRenderer
                map.addLayer(fl2);

                // Initialize a click listener that will display a popup when you click on a feature
                map.on("click", function(evt) {

                    if(evt.hasOwnProperty("graphic")){
                        map.infoWindow.setTitle("Test Graphic");
                        map.infoWindow.setContent("ID: " + evt.graphic.attributes.id + ", <br> Plant: " + evt.graphic.attributes.plant);
                        map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
                    }
                    else {
                        map.infoWindow.hide();
                    }
                });
            });
    </script>
</body>

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

	<!-- ArcGIS JavaScript API - Required CSS -->
	<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">

	<!-- ArcGIS JavaScript API -->
	<script src="https://js.arcgis.com/3.17/"></script>

	<style>
	html, body, #map {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<!-- This is the div where we inject the Map -->
	<div id="map"></div>
	<script>

	// The ArcGIS JavaScript API uses AMD modules
	require([
	"esri/map",
	"esri/graphic",
	"esri/layers/FeatureLayer",
	"esri/symbols/SimpleMarkerSymbol",
	"esri/renderers/SimpleRenderer",
	"dojo/_base/Color",
	"dojo/domReady!"
	],
	// This is the AMD loader callback that assigns a scoped alias to each library module
	function(
	Map,
	Graphic,
	FeatureLayer,
	SimpleMarkerSymbol,
	SimpleRenderer,
	Color
	) {

	// Initialize the map
	var map = new Map("map", {
	basemap: "hybrid",
	center: [-104.41, 69.26],
	zoom: 10
	});

	// Create an in-memory layer for displaying geographic features such as points, lines and polygons
	var layerDefinition = {
	"objectIdField": "id",
	"geometryType" : "esriGeometryPoint",
	"fields":[{
	"name" : "id",
	"alias" : "id",
	"type" : "esriFieldTypeString"
	},{
	"name" : "depth",
	"alias" : "depth",
	"type": "esriFieldTypeInteger"
	},{
	"name" : "magnitude",
	"alias" : "magnitude",
	"type": "esriFieldTypeDouble"
	},{
	"name" : "plant",
	"alias" : "plant",
	"type": "esriFieldTypeString"
	}]
	};

	// Create a single graphic (geographic feature) for display
	var myPoint = {
	"geometry":{
	"x":-104.4140625,"y":69.2578125,
	"spatialReference":{"wkid":4326}
	},
	"attributes":{
	"id":1,
	"depth":200,
	"magnitude":3.0,
	"XCoord":-104.4140625,
	"YCoord":69.2578125,
	"plant":"Mesa Mint"
	}
	};

	// Inject the myPoint JSON object into our Graphic
	var graphic = new Graphic(myPoint);

	// FeatureCollections are JSON that can be injected directly into an ArcGIS FeatureLayer
	var featureCollection = {
	"layerDefinition": layerDefinition,
	"featureSet": {
	"features": [graphic],
	"geometryType": "esriGeometryPoint"
	}
	};

	// Inject the FeatureCollection in a FeatureLayer
	// FeatureLayer is one of the ways we can display and manipulate geographic features
	var fl2 = new FeatureLayer(featureCollection);

	// Create a square yellow symbol that will be associated with the feature we created above
	var symbol = new SimpleMarkerSymbol();
	symbol.style = SimpleMarkerSymbol.STYLE_SQUARE;
	symbol.setSize(20);
	symbol.setColor(new Color([255,255,0,0.5]));

	// Create an automated way to assign that symbol to any point features
	var renderer = new SimpleRenderer(symbol);

	// Assign the renderer to our in-memory feature layer
	fl2.setRenderer(renderer);

	// And, finally add the feature layer to the map.
	// As soon as it's added to the map the features will be displayed as defined in the SimpleRenderer
	map.addLayer(fl2);

	// Initialize a click listener that will display a popup when you click on a feature
	map.on("click", function(evt) {

	if(evt.hasOwnProperty("graphic")){
	map.infoWindow.setTitle("Test Graphic");
	map.infoWindow.setContent("ID: " + evt.graphic.attributes.id + ", <br> Plant: " + evt.graphic.attributes.plant);
	map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
	}
	else {
	map.infoWindow.hide();
	}
	});
	});
	</script>
	</body>

	</html>