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
Solved! Go to 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 #]).
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
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.
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.
oK, WILL check it again
Locallayer widget accept only service URL.
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.
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
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?
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 #]).