Change BasemapGallery thumbnail size

[AustinMulder]

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,

[AdrianWelsh]

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...

[RickeyFight]

Austin,

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

[KenBuja · Accepted solution]

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

[KenBuja]

Changing .esriBasemapGalleryNode fixes the overlap problem

.esriBasemapGalleryNode {
  width: 150px;
}

[AustinMulder]

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

[ChrisSmith7]

Austin,

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

[KenBuja]

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)?

[AustinMulder]

faceplam...yes, it is now working.

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

[ChrisSmith7]

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.