CODEWITHSUNDEEP
svgleaflet
zakjan
zakjan

Reputation: 2559

SVG path hops on intersection in Leaflet map

Having a SVG path, what would be the easiest SVG way to draw hops on intersections, to make paths crossing each other more UX friendly? Both intersections with other paths, and within the path itself.

Something like this:

enter image description here

or

enter image description here

Computing intersections and drawing each path segment separately is an option, but I'm afraid about impact on performance, because the SVG path is drawn internally by Leaflet polyline, and there can be many polylines on the map.

Upvotes: 0

Views: 287

Answers (1)

enxaneta
enxaneta

Reputation: 33054

In the first SVG canvas I'm using an other wider white line to mark the intersection. In the second I'm using javascript to calculate the intersection and I'm drawing a white circle to mark it. The formula for the intersecting lines is from Intersection point of two line segments in 2 dimensions - written by Paul Bourke

function Intersect(p1,p2,p3,p4){
  var denominator = (p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y);
  var ua = ((p4.x - p3.x)*(p1.y - p3.y) - (p4.y - p3.y)*(p1.x - p3.x))/denominator;
  var ub = ((p2.x - p1.x)*(p1.y - p3.y) - (p2.y - p1.y)*(p1.x - p3.x))/denominator;
  var x = p1.x + ua*(p2.x - p1.x);
  var y = p1.y + ua*(p2.y - p1.y);
  if(ua > 0 && ua < 1 && ub > 0  && ub < 1){
  return {x:x,y:y};
  }else{return false;}
}

let p1={x:50,y:90}
let p2={x:50,y:10}
let p3={x:10,y:50}
let p4={x:90,y:50}

let _int = Intersect(p1,p2,p3,p4);

int.setAttributeNS(null,"cx", _int.x);
int.setAttributeNS(null,"cy", _int.y);
svg{border:1px solid; width:60vh}

line{stroke-linecap:round;}
.white{stroke:#fff;stroke-width:6}
.black{stroke:#000;stroke-width:2}
<svg viewBox="0 0 100 100">
  <defs>
  <line id="l1" x2="50" y2="10" x1="50" y1="90" />
  <line id="l2" x1="50" y1="10" x2="10" y2="50" />
  <line id="l3" x1="10" y1="50" x2="90" y2="50" />
  </defs>

 
<use xlink:href="#l1" class="black" /> 
  
<use xlink:href="#l3" class="white" /> 
  
<use xlink:href="#l2" class="black" />
<use xlink:href="#l3" class="black" /> 
  
  
</svg>

<svg viewBox="0 0 100 100">

 
<use xlink:href="#l1" class="black" /> 
<use xlink:href="#l2" class="black" />
  
<circle id="int" cx="0" cy="0" r="3" fill="white" />
  
<use xlink:href="#l3" class="black" /> 
  
  
</svg>

Upvotes: 0

Related Questions