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.

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; } } }

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.

Find more posts tagged with

Accepted answers

nomid

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.

All comments

Noah Sager

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

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!

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?

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.