nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Getting started with ArcGIS JavaScript - Collapse widgets

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A><\/P>

<\/P>

Expand<\/H2><\/P>In previous exercises, we have added widgets to our web mapping application, such as the Search widget<\/A> to search by address, and the BasemapGallery widget<\/A> to change the background map.<\/P>

<\/P>

By default, a widget is expanded when it is added to the view. A disadvantage of this is, of course, that it then takes up a lot of space on the screen. As a solution for this, the ArcGIS API for Javascript<\/STRONG> offers the

Expand<\/A> widget, which allows you to hide a widget under a button so that the user can expand and collapse it themselves.<\/P>

<\/P>

The standard procedure for this is:<\/P>

create a widget<\/LI>
then create an Expand<\/STRONG> to put this widget into<\/LI>add the Expand<\/STRONG> to the view<\/LI><\/UL><\/P>In the example below, we have also put the Expand<\/STRONG> for both widgets in one and the same group (group: "top-right"<\/SPAN>), so that the basemap gallery automatically collapses when the search field is opened, and vice versa.<\/P><\/P>You can also apply this method to other widgets.<\/P><\/P>

Click here to see expanding and collapsing widgets in action.<\/A><\/P>

<\/P>

<!DOCTYPE html><\/>\n<<\/>html<\/>\n<<\/>head<\/>\n  <<\/>meta charset=\"utf-8\"><\/>\n  <<\/>meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\"><\/>\n  <<\/>title>Getting started with ArcGIS JavaScript - Widget collapse<\/>title><\/>\n  <<\/>style><\/>\n    html, body, #viewDiv {<\/>\n      padding: 0;<\/>\n      margin: 0;<\/>\n      height: 100%;<\/>\n      width: 100%;<\/>\n    }<\/>\n  </style><\/>\n  </link rel=stylesheet href=\"https://js.arcgis.com/4.11/esri/css/main.css\"><\/>\n  <script src=\"https://js.arcgis.com/4.11/\"><\/>script><\/>\n  <script>
      require([
        "esri/Map",
        "esri/geometry/Point",
        "esri/views/MapView",
        "esri/layers/WMTSLayer",
        "esri/widgets/Search",
        "esri/tasks/Locator",
		"esri/Basemap",
		"esri/widgets/BasemapGallery",
		"esri/widgets/BasemapGallery/support/LocalBasemapsSource",
		"esri/widgets/Expand"
      ], function(Map, Point, MapView, WMTSLayer, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand) {

      // BRT Background map from PDOK as background map
      var brtachtergrondkaart = new Basemap({
        baseLayers: [
      	new WMTSLayer({
            url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS",
            copyright:
              "<a  target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Background Map</a> from <a target='_top' href='https://www.pdok.nl/'>PDOK</a>",
            activeLayer: {
              id: "brtachtergrondkaart"
}
})
],
        title: "BRT Background Map (PDOK)",
        id: "brtachtergrondkaart_pdok",
        thumbnailUrl: "https://www.pdok.nl/o/iv-pdok-theme/images/pdok/map.jpg"
});

// Base maps Esr Netherlands
var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem:{id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); // Light gray Canvas RD
var darkGrayCanvas_RD_EsriNL = new ,
        content: basemapGallery.domNode,
        group: "top-right"
});

var searchWidget = new Search({
        container: document.createElement("div"),
        view: view,
        includeDefaultSources: false
});

      searchWidget.sources = [{
        locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // GeocodeServer from Esri Netherlands
        singleLineFieldName: "SingleLine", // This option allows searching by postal code/house number combination, for example: 4181 AE 38
        placeholder: searchWidget.allPlaceholder // "Find address or place" for the English locale, "Adres of plaats zoeken" for the Dutch locale
}]

      searchWidgetExpand = new Expand({
        expandIconClass: "esri-icon-search",
        expandTooltip: searchWidget.label,
        view: view,
        content: searchWidget.domNode,
		expanded: true,
        group: "top-right"
      }).;

      view.ui.add([searchWidgetExpand, basemapGalleryExpand], "top-right");

    }).;





‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍< span >< < EM OJ I _34 > > </ span > < span > << EM OJ I _35 > > </ span > < span > << EM OJ I _36 > > </ span > < span > << EM OJ I _37 > > </ span > < span > << EM OJ I _38 > > </ span > < span > << EM OJ I _39 > > </ span > < span > << EM OJ I _40 > > </ span > < span > << EM OJ I _41 > > </ span > < span > << EM OJ I _42 > > </ span > < span > << EM OJ I _43 > > </ span > < span > << EM OJ I _44 > > </ span > < span > << EM OJ I _45 > > </ span > < span > << EM OJ I _46 > > </ span > < span > << EM OJ I _47 > > </ span >< span >< < EM OJ I _48 >> </ span >< span >< < EM OJ I _49 >> </ span >< span >< < EM OJ I _50 >> </ span >< span >< < EM OJ I _51 >> </ span >< span >< < EM OJ I _52 >> </ span >< span >< < EM OJ I _53 >> </ span >< span >< < EM OJ I _54 >> </ span >< span >< < EM OJ I _55 >> </ span >< span >< < EM OJ I _56 >> </ span >< span >< < EM OJ I _57 >> </ span >< span >< < EM OJ I _58 >> </ span >< span >< < EM OJ I _59 >> </ span >< span >< < EM OJ I _60 >> </ span >< span >< < EM OJ I _61 >> </ span >< span >< < EM OJ I _62 >> </ span >< span >< < EM OJ I _63 >> </ span >< span >< < EM OJ I _64 >> </ span >< span >< < EM OJ I _65 >> </ span >< span >< < EM OJ I _66 >> </ span >< span >< < EM OJ I _67 >> </ span >< span >< < EM OJ I _68 >> </ span >< span >< < EM OJ I _69 >> </ span >< span >< < EM OJ I _70 >> </ span >< span >< < EM OJ I _71 >> </ span >< span >< < EM OJ I _72 >> </ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span ></ Span }}</translation>}

Find more posts tagged with

Comments

There are no comments yet

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.