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 - Rotating the map

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>

Compass Widget<\/H2><\/P>Yes, a good map should be north-oriented... but sometimes it is also fun or useful to rotate the map to view it from a different perspective.<\/P>With the ArcGIS API for JavaScript 4.x you create a web map that can be rotated by the user (this is standard functionality).<\/P><\/P>Rotating the map, how do you do that? With the cursor on the map, hold down the right mouse button and then<\/STRONG> drag.<\/STRONG> (Yes, maybe you have to explain this to the end users. After all, it is not very intuitive; it also took me a while before I noticed this...) <\/STRONG><\/P><\/P>In this exercise we add a Compass<\/A> widget, which allows the user to rotate the map back to north after they have rotated the map ("Reset compass orientation"). Note: <\/STRONG>with this button you cannot rotate the map, that must be done with a right-mouse-button-drag action<\/STRONG>. Only if you want to rotate the map back to north, then you must click on the compass button.<\/P><\/P>The source code is below. Click here to see how rotating the map works.<\/A><\/P>
<\/P>
class="punctuation token">:<\/SPAN> {<\/SPAN>\n id:<\/SPAN> "brtachtergrondkaart"<\/SPAN>\n }<\/SPAN>\n }<\/SPAN>)<\/SPAN>\n ]<\/SPAN>,<\/SPAN>\n title:<\/SPAN> "BRT Background Map (PDOK)"<\/SPAN>,<\/SPAN>\n id:<\/SPAN> "brtachtergrondkaart_pdok"<\/SPAN>,<\/SPAN>\n thumbnailUrl:<\/SPAN> "images\/map.jpg"<\/SPAN>\n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n\n \/\/ Base maps Esr Netherlands<\/SPAN>\n 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>\n var<\/SPAN> darkGrayCanvas_RD_EsriNL =<\/SPAN> new<\/SPAN> Basemap<\/SPAN>(<\/Span> {portalItem: {id: "esri-icon-basemap", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: basemapGallery.label,
view: view,
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 Nederland
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");

})

<!DOCTYPE html><\/SPAN> <<\/SPAN>html><\/SPAN><\/SPAN> <<\/SPAN>head><\/SPAN><\/SPAN> <<\/SPAN>meta charset="utf-8" >

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.