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

Erste Schritte mit ArcGIS JavaScript - Home-Schaltfläche

Egge-Jan_Pollé

<\/HEAD>

<\/A><\/P>

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

<\/P>

Home Widget<\/H2><\/P>Auf einer interaktiven Karte können Benutzer hinein- und herauszoomen sowie hin und her schwenken. Um dem Benutzer anschließend die Möglichkeit zu geben, wieder zur Startposition, der sogenannten Standard-Kartenansicht, zurückzukehren, kannst du deiner Anwendung eine thuisknop<\/STRONG> hinzufügen.<\/P>Unten zeigen wir, wie du schnell und einfach so ein Home<\/A> Widget hinzufügen kannst. Klicke hier, um die Webkarte mit thuisknop in Aktion zu sehen.<\/A><\/P>
<\/P>
Achtung: Wie du sehen kannst, sind in dieser Webanwendung auch einige Widgets enthalten, die wir in früheren Übungen hinzugefügt haben, wie ein
https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/05\/aan-de-slag-met-arcgis-javascript-kaart-draaien<\/A> und ein https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/05\/22\/aan-de-slag-met-arcgis-javascript-widgets-inklappen<\/A>, mit denen die Suchleiste und die Basiskartengalerie ein- und ausgeklappt werden können. <\/P>
<!DOCTYPE html><\/><<\/>html<\/>><\/><\/><<\/>head<\/>><\/><\/><<\/>meta<\/> charset<\/>=<\/>"<\/>utf-8"<\/><\/>><\/><\/><<\/>meta<\/> name<\/>=<\/>"<\/>viewport"<\/><\/> content<\/>=<\/>"<\/>initial-scale=<\/>1, maximum-scale=<\/>1, user-scalable=<\/>no"<\/><\/>><\/><\/><<\/>title<\/>><\/>Anfangen mit ArcGIS JavaScript - Thuisknoptitle> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } ,<\/SPAN>
activeLayer:<\/SPAN> {<\/SPAN>
id:<\/SPAN> "brtachtergrondkaart"<\/SPAN>
}<\/SPAN>
}<\/SPAN>)<\/SPAN>
]<\/SPAN>,<\/SPAN>
title:<\/SPAN> "BRT Hintergrundkarte (PDOK)"<\/SPAN>,<\/SPAN>
id:<\/SPAN> "brtachtergrondkaart_pdok"<\/SPAN>,<\/SPAN>
thumbnailUrl:<\/SPAN> "images\/map.jpg"<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>

\/\/ Basiskarten Esr Nederland<\/SPAN>
var<\/SPAN> lightGrayCanvas_RD_EsriNL =<\/SPAN> new<\/SPAN> Basemap<\/SPAN>(<\/SPAN>{<\/SPAN>portalItem:<\/SPAN> {<\/SPAN>id:<\/SPAN> "9ff6521e85d24df1aa9cd4aebfef748b"<\/SPAN>}<\/SPAN>}<\/SPAN>(<\/SPAN>{<\/SPAN>\n container:<\/SPAN> document.<\/SPAN>createElement<\/SPAN>(<\/SPAN>"div"<\/SPAN>)<\/SPAN>,<\/SPAN>\n view:<\/SPAN> view,<\/SPAN>\n\t\tsource:<\/SPAN> dutchBasemaps \n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n basemapGalleryExpand =<\/SPAN> new<\/SPAN> Expand<\/SPAN>(<\/SPAN>{<\/SPAN>\n expandIconClass:<\/SPAN> "esri-icon-basemap"<\/SPAN>,<\/SPAN> \/\/ siehe 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>(<\/Span>{<\/span>\n container:<\/span> document.<\/span>createElement<\/span>(<\/span>\"div\"<\/span>)<\/span>,<\/span>\n view:<\/span> view,<\/span>\n includeDefaultSources:<\/span> false<\/span>\n }) ; \n \n searchWidget.sources = [ { \n locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer" }), // GeocodeServer von Esri Nederland \n singleLineFieldName: "SingleLine", // Diese Option ermöglicht die Suche nach Postleitzahl/Hausnummer-Kombination, z.B.: 4181 AE 38 \n placeholder: searchWidget.allPlaceholder // "Find address or place" für die English locale, "Adres of plaats zoeken" für die Nederlandse 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

Finde mehr Beiträge mit dem Tag

Kommentare

There are no comments yet

Nehmen Sie an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registrieren Sie ein kostenloses Konto.

Schnellzugriffe

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