elevation profile chart is not rendered

Hi Dima

I am experiencing an issue with the elevation profile when loading a .gpx file using your OSM component on Joomla 5/6.

The map itself loads correctly with the GPX track, but the elevation profile chart is not rendered. Instead, the following errors appear in the browser console (tested on both Microsoft Edge and Firefox):

1. Uncaught TypeError: Cannot read properties of undefined (reading 'each')
   → at replace_resized_imgs

2. Error: <rect> attribute width: A negative value is not valid ("-70")
   → at d3.min.js

3. Uncaught (in promise) SyntaxError: Failed to execute 'querySelector' on 'Element': '[data-name=function(unique=!0){...}]' is not a valid selector.
   → at SVGGElement (d3.min.js)

From the errors, it appears that the D3.js elevation chart is being initialized before the container has a valid width (resulting in a calculated width of -70px), which suggests a timing/rendering issue with the DOM.

Environment:
- Joomla version: 5 / 6
- Browser: Edge (latest) & Firefox (latest) – same result on both
- Component: zhuk.cc OSM with GPX overlay and elevation profile

Thank you for your time and support.
Miltos

Hi Miltos
My demo
joomla.zhuk.cc/index.php/zhosmmap-main/o...externalmarkerlink=0
shows elevation.

Can you give my direct link to page. You can give me by email (if you want) ZhukDL@gmail.com

Hi
I checked your file.
Just set in your path (where you define GPX file)
Tab File Layer
Layer type field to value - GPX (Internal Parser)
I think you set value to GPX - in this case I use third party library, and it doesn't work with your file

When you defile GPX (Internal Parser) - I parse your file.
And all is OK

     

Yes.
And it will work.
Do you have correct elevation diagram now?