Good Morning Brandon,
Let me provide all the code changes that I made for you. It's similar to what you were doing, but I modified the style and made the widget smaller as the window shrinks.
1. index.html - Here I made the following CSS changes.
#basemapGallery {
position: absolute;
bottom: 55px;
right: 10px;
z-index: 50;
}
.esriBasemapGalleryNode {
border: 1px solid #ccc;
box-shadow: 0px 0px 7px #000;
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
}
.esriBasemapGalleryLabelContainer {
font-size: 12px;
background-color: #FFFFFF;
height: 1.75em;
border-top: 1px solid #ccc;
}
.esriBasemapGalleryThumbnail {
border: 0px;
margin: 0px;
width: 100%;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail {
border: 0px;
margin: 0px;
}
Then, I added a div called basemapGallery inside the map div.
<div id="map">
<div id="basemapGallery"></div>
</div>
2. Core.js - Here I added the following code inside the function initializeUI to create and configure the basemap gallery.
var topoLayer = new BasemapLayer({
url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
});
var topoBasemap = new Basemap({
layers: [topoLayer],
title: "Topo",
thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/6e03e8c26aad4b9c92a87c1063ddb0e3/info/thumbnail/top..."
});
var imageryLayer = new BasemapLayer({
url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
});
var hybridReferenceLayer = new BasemapLayer({
styleUrl: "http://yourstyleurl",
type: "VectorTileLayer"
});
var imageryBasemap = new Basemap({
layers: [imageryLayer, hybridReferenceLayer],
title: "Satellite",
thumbnailUrl: "http://www.arcgis.com/sharing/rest/content/items/413fd05bbd7342f5991d5ec96f4f8b18/info/thumbnail/ima..."
});
var basemapGallery = new BasemapGallery({
map: app.map,
basemaps: [imageryBasemap],
showArcGISBasemaps: false
}, "basemapGallery");
basemapGallery.on("selection-change", function () {
if (basemapGallery.basemaps[0] === topoBasemap) {
basemapGallery.remove(topoBasemap.id);
basemapGallery.add(imageryBasemap);
} else if (basemapGallery.basemaps[0] === imageryBasemap) {
basemapGallery.remove(imageryBasemap.id);
basemapGallery.add(topoBasemap);
};
_mainView.resizeBasemapGallery();
});
basemapGallery.startup();
3. MainView.js - Here I added the following code inside the constructor function for the MainView class. This resizes the basemap gallery widget based on how big the screen is.
this.resizeBasemapGallery = function() {
if ($('.map .logo-sm').length === 1) {
$('.esriBasemapGalleryLabelContainer').css('display', 'none');
$('#basemapGallery').css({
'height': '40px',
'width': '72px',
'bottom': '30px',
'right': '0px'
});
$('.esriBasemapGalleryNode').css({
'height': '35px',
'width': '52px'
});
$('.esriBasemapGalleryThumbnail').css({
'height': '33px',
'width': '50px'
});
}
else {
$('.esriBasemapGalleryLabelContainer').css('display', 'block');
$('#basemapGallery').css({
'height': '95px',
'width': '120px',
'bottom': '55px',
'right': '10px'
});
$('.esriBasemapGalleryNode').css({
'height': '88px',
'width': '98px'
});
$('.esriBasemapGalleryThumbnail').css({
'height': '67px',
'width': '96px'
});
}
}
