topic Re: Replace web map in widget code? in Web AppBuilder Custom Widgets Questions

Replace web map in widget code?

Anonymous User — Thu, 30 Oct 2014 19:26:44 GMT

How do you write code in a widget to replace an app's web map?

I attempted to use esri/arcgis/utils like this:

arcgisUtils.createMap(myWebMapId, this.map.id).then(lang.hitch(function(response) {

this.map = response.map;

}));

This code did not visibly change the map control. Then I had an idea to clear the contents of the map div before loading the map:

var mapDiv = dom.byId(this.map.id);

mapDiv.innerHTML = "";

arcgisUtils.createMap(myWebMapId, this.map.id).then(lang.hitch(function(response) {

this.map = response.map;

}));

In this case, the map control did load and display my web map! However, all of the app's widgets disappeared.

How can I replace the map contents without removing the app's widgets?

Re: Replace web map in widget code?

IainCampion — Thu, 08 Jan 2015 21:10:17 GMT

I have a similar situation ...

as we would like to use the WAB for our viewer and port our custom components over and use out of the box where possible ...

Our Canterbury Maps Portal => Home

JS Viewer => Canterbury Maps

You can re-load a map view via the startup phase and pre-load ...

you just need to capture the map object as it available in the startup phase ...

startup: function() {

this.inherited(arguments);

console.log('startup');

console.log('map object',this.map);

this.initMapsGallery();

var _map = this.map;

}

function cmap(){

var deferred;

deferred = arcgisUtils.createMap(webMapItemID, "map");

deferred.then(function (response) {

// this.map = response.map;

console.log(_map);

_map.destroy();

_map = response.map;

console.log('map is changed - yah!');

}

only problem is the widgets gets disconnected ... and so you have to iterate through them to re-start ... [ which I am trying to figure out with limit docos from esri ...]

if this fails ....

other approach is to do this ...

window.open('?' + window.location.hash + '&webmap=0c4c5d8e982c4704b22da9de51cd1ba3', '_self');

here below is some debug code trying to figure out how to load widgets etc ...

var wm = WidgetManager.getInstance();

console.log('widget manager', wm);

console.log(wm.getWidgetsByName("Scalebar"));

var _widget = wm.getWidgetsByName("Scalebar");

var _widget1 = wm.getWidgetById("widgets/LayerList/Widget_16");

console.log(_widget1);

_widget[0].destroy();

//_widget1.destroy();

// 'widgets/Scalebar/Widget'

var _j = {'uri': 'widgets/Scalebar/Widget','position': {'left': 25,'bottom': 25}};

var _j1 = { "label": "LayerList","uri": "widgets/LayerList/Widget"};

var _deferred = wm.loadWidget(_j);

var _deferred1 = wm.loadWidget(_j1);

_deferred.then(function(_r){

wm.openWidget(_r);

})

_deferred1.then(function(_r){

console.log('_r', _r);

wm.openWidget(_r);

wm.maximizeWidget(_r);

wm.normalizeWidget('LayerList');

})

console.log(wm.getAllWidgets());

Good luck ...

Cheers

coomsie

Re: Replace web map in widget code?

JoeO_Brien — Thu, 19 Feb 2015 01:12:23 GMT

I've been running into the same problem. I'm trying to write a custom widget that allows the user to change the app's webmap by selecting from their account's layers or searching ArcGISOnline. First I wasn't able to use map.destroy because it just wouldn't work and then new maps would be created under it. Instead I had to use dojo to find and destroy all of the map_root divs before adding a new map.

It mostly works but I had to do some elaborate things to get the widgets to accept the new map. For some widgets it was fairly simple, I just needed to use their setMap method. But other widgets had more complicated details. For the basemap gallery I had to use dijit.byId(dojo.query('.jimu-widget-basemapgallery')[0].id).basemapGallery.map=map instead of just setMap(map). For the draw tool I had to use dijit.byId(dojo.query('.jimu-widget-draw')[0].id).drawBox.setMap(map). The layer list was a pain to update, too. Now everything works except the Home Button, My Location, and Geocoder. For some reason setting them to the new map does nothing and I can't find anywhere else to change them.

At this point it might be easier just to destroy and re-create the widgets but I was having problems with that as well.

I did manage to make a custom widget that lets the app user browse their map layers and search AGOL and then add those layers to the map and that worked perfectly fine. It's just destroying and re-creating the map that screws stuff up.

Re: Replace web map in widget code?

LarryStout — Fri, 20 Feb 2015 15:09:51 GMT

I don't think this is exactly what anyone has requested, but the technique may be useful. I needed to "intercept" the WebMap and remove any layers that were secured or that were unreachable before loading the web map. I added a reference in index.html to a new JavaScript file, modifyWebMap.js. That's where all of the magic happens.

The file is 375 lines, so I've attached a link to it rather than copying the code into this reply:

ftp://ftp.hamiltoncounty.in.gov/GIS/AWAB/modifyWebMap%202015-02-20.zip

Larry

Update:

I've updated the files I use for this. There is now a preProcess.js called by index.html. preProcess.js calls validateWebMap.js (and probably other files in the future). These are part of the Web AppBuilder Application you can download from here: Larrys Custom WAB Widgets and More

Larry

Re: Replace web map in widget code?

IainCampion — Sun, 22 Feb 2015 20:45:40 GMT

Thanks,

p.s. like some of your other widgets ...

are you wiling to share .. maybe via github.com so others can contribute.

Re: Replace web map in widget code?

LarryStout — Mon, 23 Feb 2015 03:15:49 GMT

That's my goal. I'm not very good with GitHub yet, but I plan to change that soon. In the meantime, You can have anything you want. Just send me an email using the feedback link on http://gis.hamiltoncounty.in.gov/mapviewer/index.html.

Larry

Re: Replace web map in widget code?

RebeccaStrauch__GISP — Mon, 23 Feb 2015 22:18:58 GMT

Larry, I like your custom-tabbed splash screen. Is that in widget or a sharable format?

BTW - I'm updating my Web AppBuilder Developer Edition – Customization Resource List‌ and added a link to your sample page. just fyi.

Re: Replace web map in widget code?

LarryStout — Mon, 23 Feb 2015 22:27:18 GMT

Rebecca,

It's a widget, but has dependencies on another widget (that I call Acme). Acme is like a traffic cop. It starts several widgets, and modifies the behavior/appearance of several Esri widgets. Here's a link to what little documentation I have written so far: ftp://ftp.hamiltoncounty.in.gov/GIS/AWAB/2015-02-10_DOCS.zip

I'm about finished with mods to Esri's Bookmark and Draw widget. I'm chasing some Safari issues now, and hope to add to the documentation soon.

Thanks for adding me to your resource list.

Larry

Update:

The documentation is now part of the Web AppBuilder Application you can download from here: Larrys Custom WAB Widgets and More

Larry

Re: Replace web map in widget code?

RebeccaStrauch__GISP — Mon, 23 Feb 2015 22:45:45 GMT

Larry,

I added a link to your zipped doc link shown above. Looks like there are a lot of good tips in there (although I haven't read it all yet.). If you prefer for me not to link to it yet, let me know. If/when you post all in a discussion or blog, I'll link to that.

Thanks for sharing....and I hope your will be able to share your code view github or geonet!

Re: Replace web map in widget code?

JoeO_Brien — Tue, 24 Feb 2015 18:46:27 GMT

Thanks Larry. I'll take a look at that. It could be very useful.

Re: Replace web map in widget code?

MelindaFrost — Wed, 25 Feb 2015 18:17:30 GMT

To avoid having to reset all the widget references manually what you could do instead is post an update to portal with your webmap json with additional layers using

var portal = portalUtils.getPortal(this.appConfig.portalUrl);

portal.getUser().then(lang.hitch(this, function (user) {

user.updateItem(this.map.itemId, argsUpdate).then(lang.hitch(this, function (updateItem) {

//if want to reload with what just pushed to portal

topic.publish('appConfigChanged', this.appConfig, 'mapChange'); //this will trigger map update which will refresh page and hence all the widgets

}));

I have done something similar and sniffed out the structure of the json for webmap in fiddler. I then just update the json object with my changes.

If you want to make a brand new web map, I would suggest add an item and then update appConfig and call the change event

user.addItem(args, '').then(lang.hitch(this, function (newItem) {

if (newItem.success) {

var itemId = newItem.id;

this.appConfig.map.itemId = itemId;

topic.publish('appConfigChanged', this.appConfig, 'mapChange'); //this will trigger map update which will refresh page and hence all the widgets

}

}));

it is a page refresh but you no long have to deal with destroying, recreating dom as well as updating all the widget references to webmap

Re: Replace web map in widget code?

SamDrummond2 — Tue, 17 Mar 2015 21:06:27 GMT

Hello All,

I spent some time looking through the jimu.js folder specifically at the MapManager, LayoutManager and the WidgetManager to see how Esri manages with map and widget lifecycle. From this I have found the following solution.

When the user clicks on a button to load a new web map the following happens:

//The widget broadcasts a message that the map is about to be destroyed

topic.publish('beforeMapDestory', this.map);

//The map is destroyed

this.map.destroy();

//A new deffered object is created to handle the creation of a new webmap

var mapDeferred = jimuUtils.createWebMap(portalUrl, webMapItemId, mapContainerId, webMapOptions);

//The deffered is executed ensuring that the response is executed with "this" being the widget.js file

mapDeferred.then(lang.hitch(this, this._processNewMapSuccess), lang.hitch(this, this._processNewMapFail));

When the web map creation is complete the following function is executed:

//I set up the returned web map as a map object

var map = response.map;

map.itemId = this.appConfig.map.itemId;

map.itemInfo = response.itemInfo;

map.webMapResponse = response;

// enable snapping

var options = {

snapKey: keys.copyKey

};

map.enableSnapping(options);

//The widget gets a handle on the appConfig

var appConfig = this.appConfig

//The widget gets the configuration for the widget of interest

//This would need to be made dynamic but for testing I

//just simply grabbed the widget by its position in the array

var mapSwitcherWidgetConfig = appConfig.widgetPool.widgets[9]

//The widget changes the openAtStart propertie to true

mapSwitcherWidgetConfig.openAtStart = true

//The map is set as the applications map property

this.map = map;

//The widget broadcasts a message that the map has been changed

//The app builder handles all the magic from here

topic.publish('mapChanged', this.map);

One thing I haven't included in the code above is that you can change the intial map extent in the appConfig so that when the new web map loads its displayed at the extent that the user was previously viewing at.

Hope this helps everyone.

Regards

Sam

Re: Replace web map in widget code?

NikhilSharma — Thu, 16 Apr 2015 19:01:23 GMT

Hi,

May I know which .js file to change i.e what is the name of the .js file in which I am supposed to make these changes in the code?

Thanks,

Nikhil

Re: Replace web map in widget code?

EricMcPhee — Thu, 06 Aug 2015 19:13:36 GMT

I was able to implement this code...partially. When I first open my map, I can click my drop down and choose the web map that I want to see and that works...once. But each time I try again, it will not change the web map. Chrome Dev tools show that the widgets are destroyed and that the "map changed" and then the widgets get recreated, but the map never changes.

Has anyone else experienced this?