AnsweredAssumed Answered

Add Local geojson file to Map

Question asked by hmohamed_collin on Jul 5, 2018
Latest reply on Jul 5, 2018 by hmohamed_collin

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> 

Attachments

Outcomes