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

Commencer avec ArcGIS JavaScript - Réduire les 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>

Développer<\/H2><\/P>Dans des exercices précédents, nous avons ajouté des widgets à notre application de cartographie web, tels que le Search widget<\/A> pour pouvoir rechercher par adresse, et le BasemapGallery widget<\/A> pour pouvoir changer la carte de fond.<\/P>

<\/P>

Par défaut, un widget est déployé lorsqu'il est ajouté à la vue. Un inconvénient de cela est bien sûr qu'il prend alors beaucoup de place sur l'écran. Comme solution, l'ArcGIS API for Javascript<\/STRONG> propose le widget

Expand<\/A>, qui vous permet de cacher un widget sous un bouton, afin que l'utilisateur puisse le déplier et le replier lui-même.<\/P>

<\/P>

La procédure standard pour cela est :<\/P>

créez un widget<\/LI>
puis créez un Expand<\/STRONG> pour y insérer ce widget<\/LI>ajoutez le Expand<\/STRONG> à la vue<\/LI><\/UL><\/P>Dans l'exemple ci-dessous, nous avons également mis les deux widgets dans un seul et même groupe (group: "top-right"<\/SPAN>), de sorte que la galerie de cartes de base se replie automatiquement lorsque le champ de recherche est ouvert, et vice versa.<\/P><\/P>Cette méthode peut également être appliquée à d'autres widgets.<\/P><\/P>

Cliquez ici pour voir le déploiement et le repli des widgets en action.<\/A><\/P>

<\/P>

<!DOCTYPE html><\/><<\/>html<\/>><\/><\/><<\/>head<\/>><\/><\/><<\/>meta<\/> charset<\/>=<\/>"<\/>utf-8"<\/><\/>><\/><\/><<\/>meta<\/> name<\/>=<\/>"<\/>viewport"<\/><\/> content<\/>=<\/>"<\/>initial-scale=<\/>1, maximum-scale=<\/>1, user-scalable=<\/>no"<\/><\/>><\/><\/><<\/>title<\/>><\/>Prise en main avec ArcGIS JavaScript - Widget replier

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

// Cartes de base Esr Nederland
var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); // Toile gris clair 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,
expanded: true,
group: "top-right"
}(;

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

});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ < < < < < < < < < < < < < < < < < < < </ Span }

Trouver plus de publications taguées avec

Réponses

There are no comments yet

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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