Add Local geojson file to Map

Question

I building building a basic application with the ESRI javascript API 3.24, accepting that I don't have ArcGIS Server or AGO, is there any approach to add nearby geojson record to the guide, this inquiry had been asked commonly. I don't have to utilize Terraformer. I am attaching my geojson document and the code I have up until now, there is no error, yet geojson isn't appearing in the map. In the event that there is an answer for this would i be able to apply it on WAB, or is there any out of box widget to add local geojson file to the map (on map load ). <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>FeatureLayertitle> <link rel="stylesheet" href="http://js.arcgis.com/3.24/esri/css/esri.css"> <script src="http://js.arcgis.com/3.24/">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/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/tasks/FeatureSet", "esri/layers/FeatureLayer", "esri/request", "esri/geometry/Polygon", "esri/graphic", "dojo/on", "dojo/_base/array", "dojo/domReady!" ], function( Map, SimpleMarkerSymbol, Color, SimpleRenderer, SimpleFillSymbol,SimpleLineSymbol, FeatureSet, FeatureLayer , esritRequest, Polygon, Graphic, on, array ) { var map = new Map("map", { basemap : "streets", center : [-96.68338, 33.02529], zoom : 18 }); var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255,0,0]), 2),new Color([255,255,0,0.25]) ); // First we create an empty feature collection: var featureCollection = { "layerDefinition": null, "featureSet": { "features": [], "geometryType": "esriGeometryPolygon" } }; //give the feature collection a layer definition: featureCollection.layerDefinition = { "geometryType": "esriGeometryPolygon", "objectIdField": "ObjectID", "drawingInfo": { "renderer": { "type": "simple", "symbol": { "type" : "esriSFS", "style" : "esriSFSSolid", "color": [ 31, 121, 180, 255], "outline": { "type": "esriSLS", "style": "esriSLSSolid", "color": [ 110,110, 110, 255], width: 0.4} } } }, "fields": [{ "name" : "OBJECTID", "type" : "esriFieldTypeOID", "alias" : "OBJECTID" }, { "name" : "RectangleID", "type" : "esriFieldTypeString", "alias" : "RectangleID", "length" : 10 }, { "name" : "section", "type" : "esriFieldTypeString", "alias" : "section", "length" : 2 }, { "name" : "lot", "type" : "esriFieldTypeString", "alias" : "lot", "length" : 3 }, { "name" : "space", "type" : "esriFieldTypeString", "alias" : "space", "length" : 4 }, { "name" : "spaceid", "type" : "esriFieldTypeString", "alias" : "spaceid", "length" : 10 }, { "name" : "Shape_Length", "type" : "esriFieldTypeDouble", "alias" : "Shape_Length" }, { "name" : "Shape_Area", "type" : "esriFieldTypeDouble", "alias" : "Shape_Area" } ] }; //featureCollection object is in the correct format to be passed in to a FeatureLayer: featureLayer = new FeatureLayer(featureCollection, { id: 'myFeatureLayer', // fields: fields, // This is required when creating a layer from Graphics ObjectIdField: "OBJECTID", // This must be defined when creating a layer from Graphics spatialReference: { wkid: 4326 }, mode: FeatureLayer.MODE_ONDEMAND }); function requestData() { var requestHandle = esriRequest({ url: "ab_py_wms.json", callbackParamName: "jsoncallback" }); requestHandle.then(requestSucceeded, requestFailed); } function requestSucceeded(response, io) { //loop through the items and add to the feature layer var features = []; array.forEach(response.features, function(item) { var attr = {}; //pull in any additional attributes if required attr["section"] = item.properties.section; var geometry = new polygon( {rings: item.geometry.coordinates}); var graphic = new Graphic(geometry); graphic.setAttributes(attr); features.push(graphic); }); featureLayer.applyEdits(features, null, null); } function requestFailed(error) { console.log('failed'); } map.addLayers([featureLayer]); console.log(featureLayer); }); script> head> <body class='claro'> <div id="map" style="width:900px; height:600px;" >div> body> html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ geojsontomap.zip Teri_Dane_2-1755784085579.png

RobertScheitlin__GISP · Accepted Answer

Husham, Here is your code fixed and working now. Your issues: * You never called the requestData function. * You had a misspelling in your FeatureSet, FeatureLayer, esritRequest, Polygon, Graphic, on, array * You had a lower case p in your Polygon constructor var geometry = new polygon({ You will need to start a new question in the WAB space for your WAB related portion of this question. <!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.24/esri/css/esri.css"> <script src="http://js.arcgis.com/3.24/"></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/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/tasks/FeatureSet", "esri/layers/FeatureLayer", "esri/request", "esri/geometry/Polygon", "esri/graphic", "dojo/on", "dojo/_base/array", "dojo/domReady!" ], function( Map, SimpleMarkerSymbol, Color, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, FeatureSet, FeatureLayer, esriRequest, Polygon, Graphic, on, array ) { var map = new Map("map", { basemap: "streets", center: [-96.68338, 33.02529], zoom: 18 }); var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]) ); // First we create an empty feature collection: var featureCollection = { "layerDefinition": null, "featureSet": { "features": [], "geometryType": "esriGeometryPolygon" } }; //give the feature collection a layer definition: featureCollection.layerDefinition = { "geometryType": "esriGeometryPolygon", "objectIdField": "ObjectID", "drawingInfo": { "renderer": { "type": "simple", "symbol": { "type": "esriSFS", "style": "esriSFSSolid", "color": [ 31, 121, 180, 255 ], "outline": { "type": "esriSLS", "style": "esriSLSSolid", "color": [110, 110, 110, 255], width: 0.4 } } } }, "fields": [{ "name": "OBJECTID", "type": "esriFieldTypeOID", "alias": "OBJECTID" }, { "name": "RectangleID", "type": "esriFieldTypeString", "alias": "RectangleID", "length": 10 }, { "name": "section", "type": "esriFieldTypeString", "alias": "section", "length": 2 }, { "name": "lot", "type": "esriFieldTypeString", "alias": "lot", "length": 3 }, { "name": "space", "type": "esriFieldTypeString", "alias": "space", "length": 4 }, { "name": "spaceid", "type": "esriFieldTypeString", "alias": "spaceid", "length": 10 }, { "name": "Shape_Length", "type": "esriFieldTypeDouble", "alias": "Shape_Length" }, { "name": "Shape_Area", "type": "esriFieldTypeDouble", "alias": "Shape_Area" } ] }; //featureCollection object is in the correct format to be passed in to a FeatureLayer: featureLayer = new FeatureLayer(featureCollection, { id: 'myFeatureLayer', // fields: fields, // This is required when creating a layer from Graphics ObjectIdField: "OBJECTID", // This must be defined when creating a layer from Graphics spatialReference: { wkid: 4326 }, mode: FeatureLayer.MODE_ONDEMAND }); function requestData() { var requestHandle = esriRequest({ url: "ab_py_wms.json", callbackParamName: "jsoncallback" }); requestHandle.then(requestSucceeded, requestFailed); } function requestSucceeded(response, io) { //loop through the items and add to the feature layer var features = []; array.forEach(response.features, function(item) { var attr = {}; //pull in any additional attributes if required attr["section"] = item.properties.section; var geometry = new Polygon({ rings: item.geometry.coordinates }); var graphic = new Graphic(geometry); graphic.setAttributes(attr); features.push(graphic); }); featureLayer.applyEdits(features, null, null); } function requestFailed(error) { console.log('failed'); } map.addLayers([featureLayer]); map.on('layer-add-result', requestData); console.log(featureLayer); }); </script> </head> <body class='claro'> <div id="map" style="width:900px; height:600px;"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍