ElevationProfile Hover Indicator Position / Offset Incorrect

[nomid]

Hi,

Problem
I am stuck on an issue relating to the elevation profile widget where when hovering the elevation chart, the indicator does not follow the corresponding lines on the map. See image.

It is clear it partially has the right data, as moving along the chart makes the indicator follow the correct shape of the track/line. The offset distance is not fixed, it varies when zooming in and out. The more I zoom in, the closer the indicator and line paths come to alignment.

Context

• Using SceneView with world-elevation as base map
• Tracks are represented by GeoJSONLayer
• Track's Polyline is made with the primary view's spatial reference
• The elevation chart data appears to be correct 

const map = new Map({
  basemap: "satellite",
  ground: "world-elevation",
});

const _view = new SceneView({
  container: mapDiv.current,
  map: map,
  ...
});

const trackLayer = new GeoJSONLayer({
  url: TRACKS_URL,
  ...
});
view.map.add(trackLayer);

const inputLine = new Graphic({
  geometry: new Polyline({
    paths: polylinePaths, // track coordinates
    spatialReference: view.spatialReference
  })
});

const elevationProfile = new ElevationProfile({
  view,
  container: elevationProfileRef.current,
  input: inputLine,
  ...
});

Question

Why does the indicator not align with the tracks when hovering the elevation profile chart?

Kind regards.

[Noah-Sager]

Hi @nomid, thanks for posting your question here. It would be great if you could share a simplified repro app (here or in a private message) so I could do some testing. Other things to try would be: 1) try loading the geoJSON layer in the map constructor instead of adding it to the map separately, 2) try another layer or layer type and see if that makes a difference in your app. Also, are there any console warnings or errors in the browser?

[nomid]

Hi @Noah-Sager, thank you for your response. I will send through a URL so you can see it firsthand (check your private messages). I'll work on getting a codepen or similar set up for you to test out.

1. Loading the geoJSON layer in the map constructor did not solve the issue

2. I tried a FeatureLayer instead of a GeoJSONLayer and the error persisted

3. There are no errors or warnings in the console

Thanks in advance!

[nomid · Accepted solution]

Just to close this, the issue was to do with my Sidebar component which caused the map to be pushed to the right. By positioning the Sidebar absolutely, the map takes the full width of the screen and the hover indicator now aligns properly.

[Noah-Sager]

Thanks for following-up and posting the resolution. Glad to hear everything is proper now 🙂