https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/05\/22\/aan-de-slag-met-arcgis-javascript-widgets-inklappen<\/A>, with which the search bar and the basemap gallery can be collapsed and expanded. <\/P><!DOCTYPE html><\/>
<<\/>html<\/>
<<\/>head<\/>
<<\/>meta<\/> charset<\/>
=<\/>
"utf-8"<\/>
><\/>
<<\/>meta<\/> name<\/>
=<\/>
"viewport"<\/>
content<\/>
=<\/>
"initial-scale=1, maximum-scale=1, user-scalable=no"<\/>
><\/>
<<\/>title<\/>
Aan de slag met ArcGIS JavaScript - Thuisknop
<<\/>title<\/>
<<\/>style<\/>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
Background map<\/a> from <a target='_top' href='https:\/\/www.pdok.nl\/'>PDOK<\/a>"<\/SPAN>,<\/SPAN>
activeLayer:<\/SPAN> {<\/SPAN>
id:<\/SPAN> "brtachtergrondkaart"<\/SPAN>
}<\/SPAN>
}<\/SPAN>)<\/SPAN>
]<\/SPAN>,<\/SPAN>
title:<\/SPAN> "BRT Background map (PDOK)"<\/SPAN>,<\/SPAN>
id:<\/SPAN> "brtachtergrondkaart_pdok"<\/SPAN>,<\/SPAN>
thumbnailUrl:<\/SPAN> "images\/map.jpg"<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>
\/\/ Base maps Esr Netherlands<\/SPAN>
var<\/SPAN> lightGrayCanvas_RD_EsriNL =<\/SPAN> new<\/SPAN> Basemap<\/SPAN>(<\/SPAN>{<\/SPAN>portalItem:<\/SPAN> {<\/SPAN>id:<\/SPAN> "9ff6521e85d24df1aa9cd4aebfef748b"<\/SPAN>}<\/SPAN>}<\/SPAN>)<\/SPAN>;<\/SPAN> \/\/Light gray Canvas RD<\/SPAN>
var<\/SPAN> darkGrayCanvas_RD_EsriNL =<\/SPAN> new<\/Span> Basemap<\/span>({portalItem:{id:"62a3befb579e4d9f9c5c51576c8a7c25"}}); //Dark gray Canvas RD
var topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); //Topo RD
var open_Topo_RD_EsriNL = new Basemap({portalItem: {id: "0698b71eb7cf47898086d072e574ac32"}}); //Open Topo RD
var stratenkaart_RD_EsriNL = new Basemap({portalItem:{id:"9fe1a753955f418fa1cbaf1c47610a47"}}); //Street map RD
var luchtfoto_RD_EsriNL = new Basemap({portalItem:{id:"38e1a1c6ee2c421290622400d22ecf57"}}); //Aerial photo RD
var dutchBasemaps = new LocalBasemapsSource({
basemaps : [brtachtergrondkaart, topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL]
});
var map = new Map({
basemap: topo_RD_EsriNL
});
var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: new Point({x: 155000, y: 463000, spatialReference: 28992}),
zoom: 3
});
var homeWidget = new Home({
view: view
});
view.ui.add(homeWidget, "top-left");
var compass = new Compass({
view: view
});
view.ui.add(compass, "top-left");
var basemapGallery = new BasemapGallery class="punctuation token">(<\/SPAN>{<\/SPAN>\n container:<\/SPAN> document.<\/SPAN>createElement<\/SPAN>(<\/SPAN>"div"<\/SPAN>)<\/SPAN>,<\/SPAN>\n view:<\/SPAN> view,<\/SPAN>\n source:<\/SPAN> dutchBasemaps \n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n basemapGalleryExpand =<\/SPAN> new<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>\n expandIconClass:<\/SPAN> "esri-icon-basemap"<\/SPAN>,<\/SPAN> // see https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-icon-font\/<\/SPAN>\n expandTooltip:<\/SPAN> basemapGallery.<\/SPAN>label,<\/SPAN>\n view:<\/SPAN> view,<\/SPAN>\n content:<\/SPAN> basemapGallery.<\/SPAN>domNode,<\/SPAN>\n group:<\/SPAN> "top-right"<\/SPAN>\n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n var<\/span> searchWidget =<\/span> new<\/span> Search<\/span>({\n container:} document.("div") ,\n view: view ,\n includeDefaultSources: false\n } ) ;\n\n searchWidget.sources = [ {\n locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer" }), // GeocodeServer from Esri Netherlands\n singleLineFieldName: "SingleLine", // This option allows you to search by postal code/house number combination, for example: 4181 AE 38\n placeholder: searchWidget.allPlaceholder // "Find address or place" for the English locale, "Adres of plaats zoeken" for the Dutch locale\n } ]\n \n searchWidgetExpand = new Expand({\n expandIconClass: "esri-icon-search",\n expandTooltip: searchWidget.label,\n view: view,\n content: searchWidget.domNode,\n expanded: true,\n group: "top-right"\n });\n\n view.ui.add([searchWidgetExpand, basemapGalleryExpand], "top-right");\n\n });\n
<<<|...|>
