Thanks. I did try this out today and it worked much better walking around in the field. I think for our particular use case, which is having users walk around viewing historical buildings, I would prefer to use the device heading as the person is not always going to be moving. I did get the arrow to rotate with the device heading by cloning the graphic as suggested below but could not figure out to remove and replace it correctly. The arrow always draws multiple times when there is a new GPS position. So I am not sure if I was calling the arrowGraphic.removeAll() in the wrong spot or adding it the wrong way.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JS API - Track Widget Example</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.26/"></script>
<style>
html, body, #viewDiv {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<div id="viewDiv"></div>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Track",
"esri/Graphic",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/geometry/Point"
], function(Map, MapView, Track, Graphic, SimpleLineSymbol, SimpleMarkerSymbol, SimpleFillSymbol, Point) {
// Create a new Map instance
const map = new Map({
basemap: "satellite"
});
// Create a new MapView instance
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.2437, 34.0522],
zoom: 13
});
const arrowSymbol = {
type: "simple-marker",
path: "M10,0 L20,30 L10,20 L0,30 Z",
color: [0, 0, 255, 1],
outline: {
color: [0, 0, 0, 1],
width: 1
},
size: 25
};
const arrowGraphic = new Graphic({
symbol: arrowSymbol
});
const track = new Track({
view: view,
graphic: arrowGraphic,
useHeadingEnabled: false
});
// Add the Track widget to the view
view.ui.add(track, "top-right");
function onGeolocationSuccess(position) {
console.log(position);
let previousGraphic;
window.addEventListener("deviceorientation", (event) => {
// Get the updated heading from the device orientation event
let heading = `${event.alpha}` * -1;
// Remove the previous graphic from the view, if there is one
if (previousGraphic) {
view.graphics.remove(previousGraphic);
//view.graphics.remove(arrowGraphic);
}
// Clone the original graphic and update its symbol angle with the heading
const newGraphic = arrowGraphic.clone();
view.graphics.removeAll();
newGraphic.symbol.angle = heading;
// Add the new graphic to the view and store it as the previous graphic
view.graphics.add(newGraphic);
previousGraphic = newGraphic;
});
}
function onGeolocationError(error) {
console.error("Geolocation error: ", error);
}
const geolocationOptions = {
enableHighAccuracy: true,
maximumAge: 0,
timeout: 50
};
if (navigator.geolocation) {
navigator.geolocation.watchPosition(
onGeolocationSuccess,
onGeolocationError,
geolocationOptions
);
} else {
console.error("Geolocation is not supported by this browser.");
}
});
</script>
</body>
</html>
