diff --git a/src/layers/renderers/drawCells.js b/src/layers/renderers/drawCells.ts
similarity index 69%
rename from src/layers/renderers/drawCells.js
rename to src/layers/renderers/drawCells.ts
index a5601f7d..3c3bdc18 100644
--- a/src/layers/renderers/drawCells.js
+++ b/src/layers/renderers/drawCells.ts
@@ -1,4 +1,4 @@
-import {getGridPolygon} from "utils/graphUtils";
+import {getGridPolygon, getPackPolygon} from "utils/graphUtils";
 
 export function drawCells() {
   cells.selectAll("path").remove();
@@ -6,6 +6,6 @@ export function drawCells() {
   const cellIds = customization === 1 ? grid.cells.i : pack.cells.i;
   const getPolygon = customization === 1 ? getGridPolygon : getPackPolygon;
 
-  const paths = cellIds.map(getPolygon);
+  const paths = Array.from(cellIds).map(getPolygon);
   cells.append("path").attr("d", "M" + paths.join("M"));
 }
diff --git a/src/layers/renderers/drawCoastline.ts b/src/layers/renderers/drawCoastline.ts
index c31639d7..b226f65f 100644
--- a/src/layers/renderers/drawCoastline.ts
+++ b/src/layers/renderers/drawCoastline.ts
@@ -11,17 +11,6 @@ export function drawCoastline(vertices: IGraphVertices, features: TPackFeatures)
   const lineGen = d3.line().curve(d3.curveBasisClosed);
   const SIMPLIFICATION_TOLERANCE = 0.3; // px
 
-  // map edge rectangle
-  debug
-    .append("rect")
-    .attr("x", 0)
-    .attr("y", 0)
-    .attr("width", graphWidth)
-    .attr("height", graphHeight)
-    .attr("fill", "none")
-    .attr("stroke", "black")
-    .attr("stroke-width", 0.1);
-
   for (const feature of features) {
     if (!feature) continue;
     if (feature.type === "ocean") continue;
diff --git a/src/scripts/connectVertices.ts b/src/scripts/connectVertices.ts
index 5a1496aa..8ba29ec9 100644
--- a/src/scripts/connectVertices.ts
+++ b/src/scripts/connectVertices.ts
@@ -71,20 +71,20 @@ function findStartingVertex({
   const neibCells = cells.c[startingCell];
   const cellVertices = cells.v[startingCell];
 
+  const otherFeatureNeibs = neibCells.filter(neibCell => featureIds[neibCell] !== featureId);
+  if (otherFeatureNeibs.length) {
+    const index = neibCells.indexOf(Math.min(...otherFeatureNeibs)!);
+    return cellVertices[index];
+  }
+
   const externalVertex = cellVertices.find(vertex => {
     const [x, y] = vertices.p[vertex];
-    if (x < 0 || y < 0) return true;
+    if (x < 0 || y < 0 || x > graphWidth || y > graphHeight) return true;
     return vertices.c[vertex].some((cellId: number) => cellId >= packCellsNumber);
   });
   if (externalVertex !== undefined) return externalVertex;
 
-  const otherFeatureNeibs = neibCells.filter(neibCell => featureIds[neibCell] !== featureId);
-  if (!otherFeatureNeibs.length) {
-    throw new Error(`Markup: firstCell ${startingCell} of feature ${featureId} has no neighbors of other features`);
-  }
-
-  const index = neibCells.indexOf(Math.min(...otherFeatureNeibs)!);
-  return cellVertices[index];
+  throw new Error(`Markup: firstCell of feature ${featureId} has no neighbors of other features or external vertices`);
 }
 
 const CONNECT_VERTICES_MAX_ITERATIONS = 50000;
diff --git a/src/scripts/generation/generation.ts b/src/scripts/generation/generation.ts
index 259468e8..3fa43760 100644
--- a/src/scripts/generation/generation.ts
+++ b/src/scripts/generation/generation.ts
@@ -62,6 +62,7 @@ async function generate(options?: IGenerationOptions) {
     pack = newPack;
 
     // temp rendering for debug
+    renderLayer("cells");
     renderLayer("coastline", pack.vertices, pack.features);
     renderLayer("heightmap");
     renderLayer("rivers", pack);
diff --git a/src/utils/debugUtils.ts b/src/utils/debugUtils.ts
index 07ff89bb..59aaef10 100644
--- a/src/utils/debugUtils.ts
+++ b/src/utils/debugUtils.ts
@@ -1,5 +1,23 @@
-// utils used for debugging (not in PROD) only
-export function drawArrow([x1, y1]: TPoint, [x2, y2]: TPoint, width = 1, color = "#444"): void {
+// utils to be used for debugging (not in PROD)
+
+export function drawPoint([x, y]: TPoint, {radius = 1, color = "red"} = {}) {
+  debug.append("circle").attr("cx", x).attr("cy", y).attr("r", radius).attr("fill", color);
+}
+
+export function drawPolygon(
+  points: TPoints,
+  {fill = "lighblue", fillOpacity = 0.3, stroke = "#222", strokeWidth = 0.2} = {}
+) {
+  debug
+    .append("polyline")
+    .attr("points", [...points, points[0]])
+    .attr("fill", fill)
+    .attr("fill-opacity", fillOpacity)
+    .attr("stroke", stroke)
+    .attr("stroke-width", strokeWidth);
+}
+
+export function drawArrow([x1, y1]: TPoint, [x2, y2]: TPoint, {width = 1, color = "#444"} = {}): void {
   const angle = Math.atan2(y2 - y1, x2 - x1);
   const normal = angle + Math.PI / 2;