1

I want to add a Header in the BaseMapGallery Widget. I have added the BaseMapGallery widget in my ExpandWidget as content. How can I now add some text to the BaseMapGallery widget (e.g. instructions) and a title bar?

Here is my code:

var basemapGallery = new BasemapGallery({
    view: view,
    source: [
          // Basemap.fromId("streets-navigation-vector"),
          // Basemap.fromId("satellite"),
          Basemap.fromId("hybrid"),
          Basemap.fromId("dark-gray-vector"),
          Basemap.fromId("osm"),
          Basemap.fromId("gray-vector"),
        ]
}, "basemapGallery");
    var bgExpand2 = new Expand({
     view: view,
     content: basemapGallery
      });

1 Answer 1

1

Instead of sending the basemapGallery directly into your Expand (as the content property), instead create your own DOM Node (I'll call this the "wrapper") that has 2 child DOM Nodes: a holder for the instructions, and then a holder of the widget. After you've done all that, send the "wrapper" into your Expand widget. I've added the notable code below, and a full example demo is here.

// Create a "wrapper" div that contains 2 divs: our instructions, and 
// the div that we will put the Basemap Gallery into. Then send the 
// "wrapper div" in when we create the "Expand"
var wrapper = document.createElement("div");

var instructions = document.createElement("div");
instructions.innerHTML = "Please select a basemap:";
instructions.style.padding = "5px";

var widgetContainer = document.createElement("div");

// add the two divs to the "wrapper"
wrapper.appendChild(instructions);
wrapper.appendChild(widgetContainer);

// send the "widgetContainer" in as the container of the widget
var basemapGallery = new BasemapGallery({
  view: view,
  container: widgetContainer
});

// send the "wrapper" in as the "content" of the "Expand" widget.
var expand = new Expand({
  expandIconClass: "esri-icon-layer-list",
  view: view,
  content: wrapper
});
view.ui.add(expand, "top-right");
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.