Add Local geojson on map load

HushamMohamed — Thu, 05 Jul 2018 15:45:28 GMT

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

Re: Add Local geojson on map load

RobertScheitlin__GISP — Thu, 05 Jul 2018 16:47:14 GMT

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

Re: Add Local geojson on map load

HushamMohamed — Thu, 05 Jul 2018 17:01:37 GMT

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.

Re: Add Local geojson on map load

RobertScheitlin__GISP — Thu, 05 Jul 2018 17:24:22 GMT

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.

Re: Add Local geojson on map load

HushamMohamed — Thu, 05 Jul 2018 17:50:22 GMT

oK, WILL check it again

Re: Add Local geojson on map load

HushamMohamed — Thu, 05 Jul 2018 20:20:04 GMT

Locallayer widget accept only service URL.

Re: Add Local geojson on map load

RobertScheitlin__GISP — Thu, 05 Jul 2018 20:23:33 GMT

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.

Re: Add Local geojson on map load

HushamMohamed — Thu, 05 Jul 2018 20:38:19 GMT

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

Re: Add Local geojson on map load

HushamMohamed — Fri, 06 Jul 2018 12:53:05 GMT

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?

Re: Add Local geojson on map load

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:16:44 GMT

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

Re: Add Local geojson on map load

HushamMohamed — Fri, 06 Jul 2018 14:37:05 GMT

Thank you a ton, Yes, its working so far, I have to work on that to make it interact with other widget, like attributes, eSearch.. etc. now its just a static layer.

topic Re: Add Local geojson on map load in Web AppBuilder Custom Widgets Questions

Add Local geojson on map load

Re: Add Local geojson on map load

Re: Add Local geojson on map load

Re: Add Local geojson on map load

Re: Add Local geojson on map load

Re: Add Local geojson on map load

Re: Add Local geojson on map load

Re: Add Local geojson on map load

Re: Add Local geojson on map load

Re: Add Local geojson on map load

Re: Add Local geojson on map load