This was kind of fun to do. Geolocation coordinates return an accuracy in meters.
https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates/accuracy
You can use this value with the view resolution to figure out the size of the marker you want to display.
https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#resolution
I think I did this math right, I'm sure someone will correct if I didn't.
track.on("track", ({ position }) => {
accuracy = position.coords.accuracy;
currentCoords = position.coords;
// divide accuracty (meters) by maps resolution (pixels)
const size = `${accuracy / view.resolution}px`;
symbol.size = size;
layer.removeAll();
layer.add({
geometry: {
type: "point",
latitude: currentCoords.latitude,
longitude: currentCoords.longitude
},
symbol
});
});
https://codepen.io/odoe/pen/zYpmEMB?editors=1000
The Geolocation API also returns a heading you can use to rotate you symbol, which would be simplest, or you could calculate how to draw a short line in that heading. I'll leave that up to you.
https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates/heading
