Enhanced Basemap Gallery Widget 2.8 - 05/1/2018

[#1]

Here is another enhancement to a widget for the Web App Builder.

Live Preview Site

Web AppBuilder for ArcGIS | Help - Enhanced Basemap Gallery

List of the latest enhancements and changes:

1. Fixed issue when adding a second basemap to fade and the original basemap came from the web map the widget would hang.

List of the older enhancements and changes:

1. Fixed issue with new basemap thumbnail urls having bad paths.
2. Fixed issue with default basemaps not appearing in widgets configuration UI.
3. Fixed issue with thumbnail image chooser link hotspot being above the thumbnail image instead of on it, in the widget configuration UI.
4. Fixed references to missing images in the widgets code
5. Adding missing default.jpg
6. Fixed issue that the OTB Basemap Gallery and the eBasemap Gallery has with empty basemap object being added to the json when using basemaps that were not the same spatial reference as the webmap.
7. Redesigned the widgets UI completely base on some suggestions from Jeremie Cornet
8. Add my ability to check the widgets version by holding Alt button and clicking anywhere on the widget.
9. Released for Version 1.1 of the WAB
10. Version 1.0.3.0 had a bug where the widget would not create the hybrid mashup basemap in certain browsers.
11. Default basemap is selected when the widget opens.
12. Added the ability to mashup 2 selected basemaps into a hybrid mashup basemap.
13. A slider is added when a hybrid mashup basemap is created to adjust the opacity levels for the selected basemaps in the hybrid mashup. When the hybrid is removed the default basemap is selected again.

[Muruganandam_Saravanan]

Hi Robert , Great app it was .And I have a doubt , could we add Web maps instead  of base maps. When I tried to add URL of web map ID its not working. 

[RobertScheitlin__GISP]

Muruganandam,

  No the widget is not designed to switch web maps. You can look at this widget for changing the web map:

ChangeWebMap Widget

[Muruganandam_Saravanan]

Thanks Robert !

[DanielOchoa]

Robert,

I'm having trouble adding BING maps to your eBasemap widget in WABD.  I know this has been covered many times in other posts, but for the life of me I cant find one that answers the question completely.  I have seen the code you've posted that adds them to the widget, but I cant find the file name reference where the changes need to be made. Where does one make the necessary changes?  I understand the concept - but this one has me stuck.  I see the bing references in the ebasemap widget.js file, but the code there doesn't match the code you've posted on the subject in other threads. And there's no way to configure on the front end in WAB.  Any help is appreciated. Thanks.

[RobertScheitlin__GISP]

Daniel,

Follow this blog post first:

How to install a Microsoft Bing Key for use with ArcGIS Online & ArcMap | Support Services Blog

Then if you still have issues look at this post:

https://community.esri.com/thread/160892#comment-561979

[BlakeTerhune]

The enhanced basemap gallery widget says the thumbnail size is 400x400 but it doesn't display at that size so the aspect ratio of the image gets altered and it appears slightly distorted. For comparison, the default basemap gallery widget takes 84x67 (5:4) and ArcGIS Online uses 200x133 (3:2) for web map thumbnails. Is there something I should be doing differently with thumbnails?

[RobertScheitlin__GISP]

Blake,

   I need to update that tooltip. The correct message should be 84x67 (5:4).

[Tevfik_ÇağrıDural1]

Hello Robert, 

Thank you so much for this widget. It helped me a lot. 

I'm just having a probem with bing maps just as Humza Akhtar‌ did. Whenever I choose two bing maps, the second one is invisible all the time. So the opacity bar changes the opacity of the first basemap.

I've set my portal to use Bing maps based on the post; How to install a Microsoft Bing Key for use with ArcGIS Online & ArcMap | Support Services Blog 

Do you have any idea what could cause the problem and how to solve it?

Thanks in advance.

[RobertScheitlin__GISP]

Tevfik,

   I see the issue you are reporting and I am debugging the issue. I will keep you informed on the progress.

[DanielChantlos1]

Robert,

Esri released some new vector basemaps last month (Introducing Esri Vector Basemaps (Beta) | ArcGIS Blog ). We really like how clean/smooth these operate on mobile devices and desktop alike. Do you have any plans to incorporate these into the enhanced Basemap widget?

[RobertScheitlin__GISP]

Daniel,

   Currently WAB does not support listing or adding Vector Basemaps. When it becomes supported then the eBasemap Gallery will support it as well. 

[KimberlyGraham1]

Hi Robert,

Your widgets are awesome, thank you!  Does this one allow you to use custom basemaps in a different projection?  We have a ton of historical imagery we would like to appear in the basemap gallery widget and the thought of replicating all of them into web mercator is a bit daunting.  

Thank you!

[RobertScheitlin__GISP]

Kimberly,

   No unfortunately all basemaps must be in the same WKID.

[BlakeTerhune]

As long as they are all in the same projection, they don't all have to be in Web Mercator. The catch is that they have to match the WKID of the Web Map's basemap, which means you have to use your own map service as a basemap (not an Esri basemap). We did this in our app but there are drawbacks. For example, the measure tool doesn't update until you click the map to end the measurement.

[KimberlyGraham1]

Thank you, that is very helpful!

[CCWeedcontrol]

Robbert sorry about posting in the Enhanced Search thread. I was able to locate where to add the image code, in the "config_Enhanced Basemap Gallery.json". I added the following code and i can see the the imagery and i can click on it and it does get added to the map.

But i can't seem to get the thumbnailURL to come up, as you can see i have the Image.jpg in a folder where my application is stored. What am i doing wrong?

"basemapGallery": {
    "basemaps": [
      {
        "layers": [
          {
            "id": "raster_2017",
            "layerType": "ArcGISTiledMapServiceLayer",
            "url": "**/MapServer",
            "visibility": true,
            "opacity": 1,
            "title": "World Imagery"
          }
        ],
        "title": "2016 Imagery",
        "thumbnailUrl": "C:/inetpub/wwwroot/BuildingPermitTracker2/images/Image.jpg",
        "spatialReference": {
          "wkid": 102100,
          "latestWkid": 3857
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks!

[RobertScheitlin__GISP]

CC Weedcontrol,

   You should not use a absolute file path in a web app like that. You need to use the url to the file:

"thumbnailUrl": "images/Image.jpg",

[CCWeedcontrol]

Robber,

I mad the changes you suggested ("thumbnailUrl" = "images/image.jpg") but i still can't see the image icon.

The image Dimension is 60x60 pixels, size is 2.98 KB.

[RobertScheitlin__GISP]

Ah, try

"thumbnailUrl": "./images/Image.jpg",

[CCWeedcontrol]

Robert at first i did not see the "dot" before the forwards slash, but now i can see the image.

THANKS!

[RickeyFight]

Robert, 

Have you tested this for 2.4 yet? 

I just tried it and nothing shows up.

[RobertScheitlin__GISP]

I just brought it up in a 2.4 app without any issue.

[RickeyFight]

Okay I will play with it some more. 

Thank you 

[RobertScheitlin__GISP]

I recommend starting a fresh clean app and adding your webmap and the widget to see if you get any issues.

[AmyRoust]

Just downloaded this widget today and am having trouble with the widget icons. I started by using the thumbnails in the image folder that came with the widget and got an error message saying that they aren't at least 400x400 in size. I tried a 400x400 photo and got this:

Help?

[AmyRoust]

Found a workaround. I removed the widget, went into AGOL and changed the thumbnail for each of the basemaps, and then re-added the widget.

[AmyRoust]

The locals are in LOVE with this widget! Thanks, Robert. It's great to finally get all of our historical imagery out for everyone to enjoy.

An enhancement suggestion for your next round: the icons for each basemap jump around when you select a different vintage. This confuses people at first because they are expected everything to stay in the same place. A couple of screen shots to illustrate:

First opens as this:

When I switch to 1954, I get this:

In the second example, all of the images slide one slot up. For example, 1966 goes from the second position to the first position. The end user who wants to go through each year instinctively goes to the second position, then the third, etc. Some people figure out what's going on; others get confused when things don't change as they expect. My thought is that the list of options could stay the same, regardless of which image was highlighted at the top. Also, it's a little odd to have the default basemap show up in the list twice when it's not activated.

Just something to consider for a future iteration. We are happy people here in NE Kansas.

[LukasHampl1]

Hello Robert,

Great widget. Good job, but I have a question. Changing the transparency of the second basemap occurs after releasing the slider only. How do I get the slider to change the transparency of the second basemap during move (realtime)?

Thanks

[RobertScheitlin__GISP]

Lukas,

   That is not currently possible in this widget.

[NatashaManzuiga]

Hi Robert, Can I simulate a Click on a thumbnail or can I call a function to select a basemap  from another widget?

Thanks in advance,

Naty

[RobertScheitlin__GISP]

Naty,

   Get a reference to the eBasemap Gallery widget from your other widget and then use:

widget.basemapGallery.select(your desired basemap id);‍

[NatashaManzuiga]

Robert, it works....But if the widget is not open?

I would like to load the eBasemap gallery but I dont want to see it on startup..

I'm using Foldable Theme.

Thanks,

Naty

[RobertScheitlin__GISP]

Naty,

  Opening a widget programatically has been answered several time in different threads. Here is one:

https://community.esri.com/thread/169518 

[JeffPace]

What layer types are supported as Basemap layers? We serve our imagery as WMS.  

[RobertScheitlin__GISP]

Jeff,

   WMS is not supported as a basemap to my knowledge.

[JeffPace]

How about WebTileLayers, which are supported (using the${level}, ${row}, ${col} syntax)

[RobertScheitlin__GISP]

If the OTB Basemap Gallery widget supports it then mine would also.

[JeffPace]

Rats, looks like not.

[JeffPace]

Seems like the links arent working.  Can you update them please?

[RobertScheitlin__GISP]

Fixed

[GarethYoung1]

Robert,

We have created a basemap in AGOL that has another layer moved to the basemap to enable popups and this has been set to transparent so the symbology doesn't show.  This works great as an individual basemap.  However, when we create a hybrid basemap, the tranparency disappers and the the symbology is visible on the popup layer.  When  the second basemap is removed from the hybrid the transperent symbology on the original basemap persists as being on.

Have you any suggestion on how to resolve?

Thanks

Gareth

[RobertScheitlin__GISP]

Gareth,

   That is because my widget takes all the basemaps layer and sets their visibility, opacity to make sure that they are merging with the other basemap and its layers. I never thought of some one have a layer in the basemap set to transparent and not wanting it to blend with the other basemap. I am not sure how I would handle this scenario... How would I know that your layer is a layer that should not have the opacity adjusted?

[GarethYoung1]

Thanks Robert.  I thought that might be the case but wanted to ask just be to sure.

[NatashaManzuiga]

Hi Robert, I 'm using the version 2.0.1.

I want to load basemaps based on a filter and I'm able to do this..I added a parameter for each basemap on my config file...

But now, I need to reload the basemap list with thumbnails ... I could even destroy and recreate it.

How can I do this?

Thank you in advance,

Naty

[RobertScheitlin__GISP]

Naty,

   Here is some vanilla JS api code I use to filter the basemaps to only 2 after two seconds then I restore all the basebase back after 10 seconds:

      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      basemapGallery.on("load", function(msg) {
        // store all the orginal basemaps so we can restore them
        window.basemaps = basemapGallery.basemaps.concat();
      });

      setTimeout(function(){
        // filter the basemaps to only Imagery and Topographic
        basemapGallery.basemaps = basemapGallery.basemaps.filter(limitbasemaps);
        basemapGallery.startup();
        setTimeout(function(){
          basemapGallery.domNode.parentElement.style.height = "280px";
        }, 50);
        basemapGallery.domNode.parentElement.style.height = "279px";
      }, 2000);

      function limitbasemaps(basemap){
        if(basemap.title === 'Imagery' || basemap.title === 'Topographic'){
          return true;
        }else{
          return false;
        }
      }

      setTimeout(function(){
        //restore all the orginal basemaps back.
        basemapGallery.basemaps = window.basemaps;
        basemapGallery.startup();
        setTimeout(function(){
          basemapGallery.domNode.parentElement.style.height = "280px";
        }, 50);
        basemapGallery.domNode.parentElement.style.height = "279px";
      }, 10000);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[NatashaManzuiga]

Hi Robert, thanks for your answer.

I already implemented filter in initBasemaps() function...and it works

I need to run again initBasemaps() from another widget?

and if yes how can I check if BasemapGallery already exists in basemapGalleryDiv?

I tried to run initBasemaps()from another widget...with the filtered basemaps list but the BasemapGallery doesn't refresh.

Thank you in advance,

Naty

[RobertScheitlin__GISP]

Naty,

   You can add this function then call it from your other widget. The function has a parameter of basemapTitlesArr which is an array of strings that represents the basemap titles you want to be visible.

      filterBasemaps: function(basemapTitlesArr) {
        function limitbasemaps(basemap){
          var retval = false;
          basemapTitlesArr.map(lang.hitch(this, function(bmTitle){
            if(basemap.title === bmTitle){
              retval = true;
            }
          }));
          return retval
        }
        this.basemapGallery.basemaps = this.basemapGallery.basemaps.filter(limitbasemaps);
        this.basemapGallery.startup();
      },‍‍‍‍‍‍‍‍‍‍‍‍‍

[JTessier]

Robert Scheitlin, GISP‌, do you know if this functionality is in esri's roadmap, or if it is available Out of the Box at 10.8.1?

[RobertScheitlin__GISP]

No to both.

[JTessier]

Thanks for the quick reply, Robert Scheitlin, GISP‌, I should have also asked, does this custom widget work at/against 10.8.1?