ArcGIS JavaScript Tutorial - watchUtils: only add Compass Widget when needed
watchUtils: only add Compass Widget when needed
In general maps are oriented north. This is a widely used convention in cartography. And the same is true for most web maps. With the ArcGIS API for JavaScript 4.x however it is possible to rotate the map on the screen.
The user can rotate the map (or rather the view) in two ways:
right-click + dragwith the mouse- tapping the
AandDkeys
You, as a developer, can also use programmatic navigation by adjusting MapView.rotation
To allow the user to reset the compass orientation to 0 (i.e. with north at the top of the view) you have to add a Compass widget to the view. This widget indicates where north is in relation to the current view rotation. Clicking the widget rotates the view back to face north (heading = 0).
So, in a sense, you could say that you only need this Compass widget when the map is not oriented north. Or, the other way round: most of the time the Compass widget is not needed, because the map is "correctly" oriented.
In the sample below we only add the Compass when the user rotates the map (be it by accident or on purpose). And the moment the compass orientation has been reset to 0 we remove it again.
To check the orientation of the view we use watchUtils like this:
watchUtils.whenTrue(view, "stationary", function() {
if (view.rotation == 0){
view.ui.remove(compassWidget);
} else {
view.ui.add(compassWidget, "top-left");
}
})Below you will find the full code of this sample, and you can view it live:
ArcGIS JavaScript Tutorial - Add Compass Widget only when needed
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>ArcGIS JavaScript Tutorial - Add Compass Widget only when needed</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css"/>
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Compass",
"esri/core/watchUtils"
], function(Map, MapView, Compass, watchUtils) {
var map = new Map({
basemap: "national-geographic"
});
var view = new MapView({
container: "viewDiv",
scale: 500000,
center: [26.26, 39.17],
rotation: 45,
map: map
});
var compassWidget = new Compass({
view: view
});
// Watch view's stationary property for becoming true to check the rotation
// If the rotation equals 0 (i.e. map is oriented North) remove the compass widget,
// otherwise add this widget
watchUtils.whenTrue(view, "stationary", function() {
if (view.rotation == 0){
view.ui.remove(compassWidget);
} else {
view.ui.add(compassWidget, "top-left");
}
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>