Add Local geojson file to Map

HushamMohamed · ‎07-05-2018

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

    <!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>  
        <!--<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/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>  ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎07-05-2018

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>
  <!--<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/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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎07-05-2018

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>
  <!--<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/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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

HushamMohamed · ‎07-05-2018

Thank you for your response.

fantastic, and more than I need