Replace web map in widget code?

[Anonymous User]

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?

[IainCampion]

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

[JoeO_Brien]

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.

[LarryStout]

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

[IainCampion]

Thanks,

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

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

[LarryStout]

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

[RebeccaStrauch__GISP]

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.

[LarryStout]

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

[RebeccaStrauch__GISP]

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!

[JoeO_Brien]

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