Add Local geojson on map load

[HushamMohamed]

Assuming that I don't have ArcGIS Server or AGO, is there any approach to add local geojson file to the map, just like  how Robert Scheitlin, GISP did it in this thread

Is there any out of box widget or custom one, to add local geojson file to the map (on map load ), or even a direction on how to convert the code in this thread to widget.

Thanks

[RobertScheitlin__GISP]

Husham,

   I have not used the GeoJSON portion personally but the Local Layer widget supports GeoJSON

https://community.esri.com/thread/119548-locallayerwidget-and-accessifizrwidget 

[HushamMohamed]

Yes you are right,  but the issue is its not loading the geojson on map load, we have to do that annually every time the map started.

[RobertScheitlin__GISP]

The local layer widget does it on map load. Actually there is not even a way to do it manually using this widget as there is no UI for this widget.

[HushamMohamed]

oK, WILL check it again

[HushamMohamed]

Locallayer widget accept only service URL.

[RobertScheitlin__GISP]

OK. Like I said I have not used it for GeoJSON before. You could just add the json to your web server and then you would have a url that you could enter there.

[HushamMohamed]

Thank you Robert, I did that ,  I added the json to my my web server but still showing Red exclamation.

Thank you again, will try again later and let you know

[HushamMohamed]

Unfortionatley I could make it to work, every time trying to add json file from a directory of url, it look like screen shot below, what I am doing wrong?

[RobertScheitlin__GISP · Accepted solution]

OK. So here is the code changes you need to make to the jimu/MapManager to add the GeoJson to your WAB app at load time.

      _show2DWebMap: function(appConfig) {
        //should use appConfig instead of this.appConfig, because appConfig is new.
        // if (appConfig.portalUrl) {
        //   var url = portalUrlUtils.getStandardPortalUrl(appConfig.portalUrl);
        //   agolUtils.arcgisUrl = url + "/sharing/content/items/";
        // }
        if(!appConfig.map.mapOptions){
          appConfig.map.mapOptions = {};
        }
        var mapOptions = this._processMapOptions(appConfig.map.mapOptions) || {};
        mapOptions.isZoomSlider = false;

        var webMapPortalUrl = appConfig.map.portalUrl;
        var webMapItemId = appConfig.map.itemId;
        var webMapOptions = {
          mapOptions: mapOptions,
          bingMapsKey: appConfig.bingMapsKey,
          usePopupManager: true
        };

        if(!window.isBuilder && !appConfig.mode && appConfig.map.appProxy &&
            appConfig.map.appProxy.mapItemId === appConfig.map.itemId) {
          var layerMixins = [];
          array.forEach(appConfig.map.appProxy.proxyItems, function(proxyItem){
            if (proxyItem.useProxy && proxyItem.proxyUrl) {
              layerMixins.push({
                url: proxyItem.sourceUrl,
                mixin: {
                  url: proxyItem.proxyUrl
                }
              });
            }
          });

          if(layerMixins.length > 0) {
            webMapOptions.layerMixins = layerMixins;
          }
        }

        var mapDeferred = this._createWebMapRaw(webMapPortalUrl, webMapItemId, this.mapDivId, webMapOptions);

        mapDeferred.then(lang.hitch(this, function(response) {
          var map = response.map;

          //hide the default zoom slider
          map.hideZoomSlider();

          // set default size of infoWindow.
          map.infoWindow.resize(270, 316);
          //var extent;
          map.itemId = appConfig.map.itemId;
          map.itemInfo = response.itemInfo;
          map.webMapResponse = response;
          // enable snapping
          var options = {
            snapKey: keys.copyKey
          };
          map.enableSnapping(options);

          html.setStyle(map.root, 'zIndex', 0);

          map._initialExtent = map.extent;
//Begin code addition here
          require([
            "esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol",
            "esri/geometry/Polygon", "esri/graphic", "esri/Color", "esri/layers/FeatureLayer"
          ], lang.hitch(this, function(SimpleFillSymbol, SimpleLineSymbol, Polygon, Graphic, Color, FeatureLayer) {

            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);
          }));
//End of code addition
          this.layerInfosObj = LayerInfos.getInstanceSyncForInit(map, map.itemInfo);

          //save layer's original refreshInterval
          this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo){
            layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject){
              if(layerObject){
                lang.setObject("_wabProperties.originalRefreshinterval", layerObject.refreshInterval, layerObject);
              }
            }), lang.hitch(this, function(err){
              console.error("can't get layerObject", err);
            }));
          }));

          if(appConfig.map.mapRefreshInterval && !appConfig.map.mapRefreshInterval.useWebMapRefreshInterval){
            this._updateRefreshInterval(appConfig.map.mapRefreshInterval);
          }

          this._showUnreachableLayersTitleMessage();
          this._publishMapEvent(map);
          setTimeout(lang.hitch(this, this._checkAppState), 500);
          this._addDataLoadingOnMapUpdate(map);
        }), lang.hitch(this, function(error) {
          console.error(error);
          this._showError(error);
          topic.publish('mapCreatedFailed');
        }));
      },
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then paste the json file in the root of the app folder (i.e. [install dir]\server\apps\[app #]).