diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js
index 1a033eec..14ae872d 100644
--- a/modules/ui/rivers-editor.js
+++ b/modules/ui/rivers-editor.js
@@ -87,8 +87,8 @@ function editRiver(id) {
     }
   }
 
-  function addControlPoint(point) {
-    debug.select("#controlPoints").append("circle")
+  function addControlPoint(point, before = null) {
+    debug.select("#controlPoints").insert("circle", before)
       .attr("cx", point[0]).attr("cy", point[1]).attr("r", .6)
       .call(d3.drag().on("drag", dragControlPoint))
       .on("click", clickControlPoint);
@@ -137,27 +137,10 @@ function editRiver(id) {
 
   function addInterimControlPoint() {
     const point = d3.mouse(this);
-
-    const dists = [];
-    debug.select("#controlPoints").selectAll("circle").each(function() {
-      const x = +this.getAttribute("cx");
-      const y = +this.getAttribute("cy");
-      dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2);
-    });
-
-    let index = dists.length;
-    if (dists.length > 1) {
-      const sorted = dists.slice(0).sort((a, b) => a-b);
-      const closest = dists.indexOf(sorted[0]);
-      const next = dists.indexOf(sorted[1]);
-      if (closest <= next) index = closest+1; else index = next+1;
-    }
-
-    const before = ":nth-child(" + (index + 1) + ")";
-    debug.select("#controlPoints").insert("circle", before)
-      .attr("cx", point[0]).attr("cy", point[1]).attr("r", .8)
-      .call(d3.drag().on("drag", dragControlPoint))
-      .on("click", clickControlPoint);
+    const controls = document.getElementById("controlPoints").querySelectorAll("circle");
+    const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]);
+    const index = getSegmentId(points, point, 2);
+    addControlPoint(point, ":nth-child(" + (index+1) + ")");
 
     redrawRiver();
   }
diff --git a/modules/ui/routes-editor.js b/modules/ui/routes-editor.js
index 78c84f8d..0b743652 100644
--- a/modules/ui/routes-editor.js
+++ b/modules/ui/routes-editor.js
@@ -48,40 +48,26 @@ function editRoute(onClick) {
   function drawControlPoints(node) {
     const l = node.getTotalLength();
     const increment = l / Math.ceil(l / 4);
-    for (let i=0; i <= l; i += increment) {addControlPoint(node.getPointAtLength(i));}
+    for (let i=0; i <= l; i += increment) {
+      const point = node.getPointAtLength(i);
+      addControlPoint([point.x, point.y]);
+    }
     routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;
   }
   
-  function addControlPoint(point) {
-    debug.select("#controlPoints").append("circle")
-      .attr("cx", point.x).attr("cy", point.y).attr("r", .8)
+  function addControlPoint(point, before = null) {
+    debug.select("#controlPoints").insert("circle", before)
+      .attr("cx", point[0]).attr("cy", point[1]).attr("r", .6)
       .call(d3.drag().on("drag", dragControlPoint))
       .on("click", clickControlPoint);
   }
 
   function addInterimControlPoint() {
     const point = d3.mouse(this);
-
-    const dists = [];
-    debug.select("#controlPoints").selectAll("circle").each(function() {
-      const x = +this.getAttribute("cx");
-      const y = +this.getAttribute("cy");
-      dists.push((point[0] - x) ** 2 + (point[1] - y) ** 2);
-    });
-
-    let index = dists.length;
-    if (dists.length > 1) {
-      const sorted = dists.slice(0).sort((a, b) => a-b);
-      const closest = dists.indexOf(sorted[0]);
-      const next = dists.indexOf(sorted[1]);
-      if (closest <= next) index = closest+1; else index = next+1;
-    }
-
-    const before = ":nth-child(" + (index + 1) + ")";
-    debug.select("#controlPoints").insert("circle", before)
-      .attr("cx", point[0]).attr("cy", point[1]).attr("r", .8)
-      .call(d3.drag().on("drag", dragControlPoint))
-      .on("click", clickControlPoint);
+    const controls = document.getElementById("controlPoints").querySelectorAll("circle");
+    const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]);
+    const index = getSegmentId(points, point, 2);
+    addControlPoint(point, ":nth-child(" + (index+1) + ")");
 
     redrawRoute();
   }
@@ -266,9 +252,7 @@ function editRoute(onClick) {
       elSelected = d3.select(parent).append("path").attr("id", id).attr("data-new", 1);
     }
 
-    // add control point
-    const point = d3.mouse(this);
-    addControlPoint({x: point[0], y: point[1]});
+    addControlPoint(d3.mouse(this));
     redrawRoute();
   }
 
diff --git a/modules/utils.js b/modules/utils.js
index 38a9b856..822494aa 100644
--- a/modules/utils.js
+++ b/modules/utils.js
@@ -359,7 +359,7 @@ void function addFindAll() {
 }()
 
 // get segment of any point on polyline
-function getSegmentId(points, point) {
+function getSegmentId(points, point, step = 10) {
   if (points.length === 2) return 1;
   const d2 = (p1, p2) => (p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2;
 
@@ -371,7 +371,7 @@ function getSegmentId(points, point) {
     const p2 = points[i+1];
 
     const length = Math.sqrt(d2(p1, p2));
-    const segments = Math.ceil(length / 10);
+    const segments = Math.ceil(length / step);
     const dx = (p2[0] - p1[0]) / segments;
     const dy = (p2[1] - p1[1]) / segments;