I am trying to draw a line between a leaflet marker and it's tooltip, since the offset of the tooltip has to be quite huge. Otherwise it would be hard to find the tooltip for the marker.
It should look somewhat like this:
I already tried to draw the line using the accepted answer on this post: How to draw a line between two divs? and overriding the default tooltip.
Something like this:
L.ConnectedTooltip = L.Tooltip.extend({
_setPosition: function (pos) {
L.Tooltip.prototype._setPosition.call(this, pos);
var tooltipPoint = this._map.layerPointToContainerPoint(pos);
var line = this.lineUtils.connectWithLine(tooltipPoint,this._container,"black",2,this);
this._container.innerHTML += line;
}
})
I did not get this approach to work properly, because adding the line directly to the dom like in the answer seems to break the whole map and adding the line into the container, somehow get complicated if you use a https://github.com/bbecquet/Leaflet.RotatedMarker . So my question if you guys have an idea how to achieve this kind of tooltip. Maybe a separate svgpane just to draw the lines on ?
Thank you for your time !
