topic Change BasemapGallery thumbnail size in ArcGIS JavaScript Maps SDK Questions

Change BasemapGallery thumbnail size

AustinMulder — Fri, 19 Feb 2016 18:13:07 GMT

I am looking for a way to change the size of the thumbnails within the basemapGallery. I have thumbnails that are 300x200px but the gallery seems to have a default size of around 60x50px which it forces all thumbnails to. i would like to increase the size of these thumbnails but cannot find a single example of how to do this, or any reference anywhere regarding thumbnail size.

Any ideas?

Thanks,

Re: Change BasemapGallery thumbnail size

AdrianWelsh — Fri, 19 Feb 2016 18:15:13 GMT

I do not think that you can change the size of these thumbnails in Esri's out-of-the-box galleries. You will likely have to custom create your own landing page to make a gallery of maps/apps in order to make the thumbnails different. Though, I could be wrong...

Re: Change BasemapGallery thumbnail size

RickeyFight — Fri, 19 Feb 2016 18:17:07 GMT

Austin,

Can you post the code you are working with or a sample you are basing your wepapp off of ?

Re: Change BasemapGallery thumbnail size

KenBuja — Sun, 12 Dec 2021 07:59:44 GMT

In the CSS, you can make changes to the .esriBasemapGalleryThumbnail size.

.esriBasemapGalleryThumbnail {
      height: 100px;
      width: 150px;
    }

However, just modifying this throws off the spacing of the thumbnails, so you'll have to explore the other settings

Re: Change BasemapGallery thumbnail size

KenBuja — Sun, 12 Dec 2021 07:59:47 GMT

Changing .esriBasemapGalleryNode fixes the overlap problem

.esriBasemapGalleryNode {
  width: 150px;
}

Re: Change BasemapGallery thumbnail size

AustinMulder — Fri, 19 Feb 2016 18:54:15 GMT

Thanks for the quick answer Ken,

Unfortunately I am not seeing any change. I am using JavaScript 3.15 if that matters..

here is the site I am working on: NeoTreks Maps - Recreation and Trail Maps for the Untied States

Re: Change BasemapGallery thumbnail size

ChrisSmith7 — Fri, 19 Feb 2016 20:01:43 GMT

Austin,

I tried it on my end and it appears to work - are you sure your browser isn't caching something?

Re: Change BasemapGallery thumbnail size

KenBuja — Fri, 19 Feb 2016 20:16:18 GMT

But you didn't make any changes in the CSS values in your code.

By the way...why are you still using legacy style coding (dojo.require)?

Re: Change BasemapGallery thumbnail size

AustinMulder — Fri, 19 Feb 2016 21:19:34 GMT

faceplam...yes, it is now working.

As to the dojo.require, what would be the appropriate way to do it now?

Re: Change BasemapGallery thumbnail size

ChrisSmith7 — Sun, 12 Dec 2021 07:59:50 GMT

Esri require - check out a sample:

Basemap gallery | ArcGIS API for JavaScript

require([
      "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "dojo/parser",


      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery, arcgisUtils,
      parser
    ) {

Just make sure the module order is the same! Here's some more info:

Working with Dojo | Guide | ArcGIS API for JavaScript

Note, in the example code, there were some modules not passed in the function - they were referenced in the front-end instead of in the script block.

Re: Change BasemapGallery thumbnail size

KenBuja — Fri, 19 Feb 2016 21:29:54 GMT

That's good to hear. BTW, you don't need to include all the BasemapGallery's CSS rules in your code, just the ones you want to modify.

As for moving the AMD-style coding, here are a couple of references you should read:

The abc’s of AMD | ArcGIS Blog

Modern Dojo - Dojo Toolkit Tutorial