Heightgraph map marker hidden by route quality coding

[janusbenissa]

Hi The popup on the map with the gradient percentage is now hide behind the track. I think it is only a matter of changing the z-index to place it on top of a track? Regards Jan

[rkflx]

I also noticed this for a long time already and incidentally looked into this a bit last week. It's not as simple as changing a z-index, though.

Essentially, we want to place the popup not only above the track, but above the markers too. Currently, the popup SVG is injected into the svg element of the overlay-pane: https://github.com/GIScience/Leaflet.Heightgraph/blob/9e45353ae01e4389124701bdacb62ee255d3fec1/src/L.Control.Heightgraph.js#L466

However, simply changing this to marker-pane is not enough, because that pane does not yet contain an svg, which would have to be added first (but only once, not on every cursor movement). It could also be argued to create a custom pane.

(The reason it works for the magenta line is because it is part of the svg, while the Leaflet.hotline used for the route quality coding is implemented using a canvas element in a separate pane. Moving the canvas to the overlay-pane has its own challenges...).

[tbsmark86]

As the heightgraph code is already forked anyway it can be patched further to fix this.

As already mentiond by rkflx the marker just has to be moved from the overlay pane to the more appropriate tooltip pane Here is an approach for dist/L.Control.Heightgraph.js:

@@ -5104,14 +5104,15 @@
         var normalizedY = layerPoint.y - 75;

         if (!this._mouseHeightFocus) {
-          var heightG = select(".leaflet-overlay-pane svg").append("g");
+         var svg = L.svg({pane: 'tooltipPane'}).addTo(this._map);
+          var heightG = select(svg._container).append("g");
           this._mouseHeightFocus = heightG.append('svg:line').attr('class', 'height-focus line').attr('x2', '0').attr('y2', '0').attr('x1', '0').attr('y1', '0');
           this._mouseHeightFocusLabel = heightG.append("g").attr('class', 'height-focus label');
           this._mouseHeightFocusLabelRect = this._mouseHeightFocusLabel.append("rect").attr('class', 'bBox');
           this._mouseHeightFocusLabelTextElev = this._mouseHeightFocusLabel.append("text").attr('class', 'tspan');
           this._mouseHeightFocusLabelTextType = this._mouseHeightFocusLabel.append("text").attr('class', 'tspan');
           var pointG = this._pointG = heightG.append("g").attr("class", "height-focus circle");
-          pointG.append("svg:circle").attr("r", 5).attr("cx", 0).attr("cy", 0).attr("class", "height-focus circle-lower");
+          //pointG.append("svg:circle").attr("r", 5).attr("cx", 0).attr("cy", 0).attr("class", "height-focus circle-lower");
         }

         this._mouseHeightFocusLabel.style("display", "block");

About the pointG: It's duplicate with the fix so I've disabled it. Interested in a pull request?