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; } } }

Comenzar con ArcGIS JavaScript - Colapsar 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>

Expandir<\/H2><\/P>En ejercicios anteriores hemos añadido widgets a nuestra aplicación web de mapeo, como el Search widget<\/A> para poder buscar por dirección, y el BasemapGallery widget<\/A> para poder cambiar el mapa base.<\/P>

<\/P>

Por defecto, un widget está expandido cuando se añade a la vista. Una desventaja de esto es que ocupa mucho espacio en la pantalla. Como solución, la ArcGIS API for Javascript<\/STRONG> ofrece el widget

Expand<\/A>, con el cual puedes ocultar un widget bajo un botón, para que el usuario pueda expandirlo o contraerlo.<\/P>

<\/P>

El procedimiento estándar para esto es:<\/P>

crear un widget<\/LI>
luego crear un Expand<\/STRONG> para contener este widget<\/LI>añadir el Expand<\/STRONG> a la vista<\/LI><\/UL><\/P>En el ejemplo abajo hemos puesto el Expand<\/STRONG> para ambos widgets en un mismo grupo (group: "top-right"<\/SPAN>), de modo que la galería del mapa base se cierra automáticamente cuando se abre el campo de búsqueda, y viceversa.<\/P><\/P>Este método también puede aplicarse a otros widgets.<\/P><\/P>

Haz clic aquí para ver la acción de expandir y contraer widgets.<\/A><\/P>

<\/P>

<SPAN class="doctype token"><!DOCTYPE html><\/><SPAN class=\"token tag\"><SPAN class=\"token tag\"><SPAN class=\"punctuation token\"><<\/>html<\/><SPAN class=\"punctuation token\">><\/><\/><SPAN class=\"token tag\"><SPAN class=\"token tag\"><SPAN class=\"punctuation token\"><<\/>head<\/><SPAN class=\"punctuation token\">><\/><\/><SPAN class=\"token tag\">  <meta charset=\"utf-8\"><\/><SPAN class=\"token tag\">  <meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\"><\/><SPAN class=\"token tag\">  <title>Aan de slag met ArcGIS JavaScript - Widget inklappen</title><\/><SPAN class=\"language-css style token\"><SPAN class=\"token tag\">  <style><br>    html, body, #viewDiv {<br>      padding: 0;<br>      margin: 0;<br>      height: 100%;<br>      width: 100%;<br>    }<br>  </style><br></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN>

target='_top' href='https:\/\/www.pdok.nl\/introductie\/-\/article\/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Achtergrondkaart<\/a> de <a target='_top' href='https:\/\/www.pdok.nl\/'>PDOK<\/a>"<\/SPAN>,
activeLayer: {
id: "brtachtergrondkaart"
}
})
],
title: "BRT Achtergrondkaart (PDOK)",
id: "brtachtergrondkaart_pdok",
thumbnailUrl: "https:\/\/www.pdok.nl\/o\/iv-pdok-theme\/images\/pdok\/map.jpg"
});

// Basiskaarten Esr Nederland
var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); //Lichtgrijze 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 van Esri Nederland
singleLineFieldName: "SingleLine", // Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38
placeholder: searchWidget.allPlaceholder // "Find address or place" voor de English locale, "Adres of plaats zoeken" voor de Nederlandse locale
}]

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

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

});

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<<<|vq_14642|>

Encuentra más publicaciones etiquetadas con

Comentarios

There are no comments yet

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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