diff --git a/apps/golfview/golfview.js b/apps/golfview/golfview.js
index 7b31201d2..75103f7b5 100644
--- a/apps/golfview/golfview.js
+++ b/apps/golfview/golfview.js
@@ -1,52 +1,83 @@
 let course = require("Storage").readJSON("course_data(3).json");
-
-console.log(Object.keys(course));
-
-g.setBgColor(0, 0, 0);
-g.clear();
-
-for (var feature of course.features) {
-  //console.log(Object.keys(feature));
-  if (feature.type === "fairway") {
-    g.setColor(0, 0, 1);
-  } else if (feature.type === "tee") {
-    g.setColor(1, 0, 0);
-  } else if (feature.type === "green") {
-    g.setColor(0, 1, 0);
-  } else if (feature.type === "bunker") {
-    g.setColor(1, 1, 0);
-  } else {
-    continue;
-  }
-
-  var nodelist = [];
-  feature.nodesXY.forEach(function (node) {
-    nodelist.push(node.x);
-    nodelist.push(node.y);
-  });
-  newnodelist = g.transformVertices(nodelist, {
-    x: 150, // x offset (default 0)
-    y: 150, // y offset (default 0)
-    scale: 0.45, // scale factor (default 1)
-    rotate: course.angle - Math.PI / 2.0, // angle in radians (default 0)
-  });
-
-  g.fillPoly(newnodelist, true);
-  console.log(feature.type);
-  console.log(newnodelist);
+let hole = course;
+function distance(a, b) {
+  return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2))
 }
 
-var nodelist = [];
-course.nodesXY.forEach(function (node) {
-  nodelist.push(node.x);
-  nodelist.push(node.y);
+function drawHole(l) {
+
+  console.log(l);
+  let hole_straight_distance = distance(
+    hole.nodesXY[0],
+    hole.nodesXY[hole.nodesXY.length - 1]
+  );
+
+  let scale = 0.9 * l.h / hole_straight_distance;
+
+  let transform = {
+    x: l.x + l.w / 2, // x offset (default 0)
+    y: l.h * 0.95, // y offset (default 0)
+    scale: scale, // scale factor (default 1)
+    rotate: hole.angle - Math.PI / 2.0, // angle in radians (default 0)
+  }
+
+  for (var feature of hole.features) {
+    //console.log(Object.keys(feature));
+    if (feature.type === "fairway") {
+      g.setColor(0, 0, 1);
+    } else if (feature.type === "tee") {
+      g.setColor(1, 0, 0);
+    } else if (feature.type === "green") {
+      g.setColor(0, 1, 0);
+    } else if (feature.type === "bunker") {
+      g.setColor(1, 1, 0);
+    } else {
+      continue;
+    }
+
+    var nodelist = [];
+    feature.nodesXY.forEach(function (node) {
+      nodelist.push(node.x);
+      nodelist.push(node.y);
+    });
+    newnodelist = g.transformVertices(nodelist, transform);
+
+    g.fillPoly(newnodelist, true);
+    //console.log(feature.type);
+    //console.log(newnodelist);
+  }
+
+  var waynodelist = [];
+  hole.nodesXY.forEach(function (node) {
+    waynodelist.push(node.x);
+    waynodelist.push(node.y);
+  });
+
+  newnodelist = g.transformVertices(waynodelist, transform);
+  g.setColor(0, 1, 1);
+  g.drawPoly(newnodelist);
+}
+
+// The layout, referencing the custom renderer
+var Layout = require("Layout");
+var layout = new Layout({
+  type: "h", c: [
+    {
+      type: "v", c: [
+        { type: "txt", font: "10%", label: "Hole 1" },
+        { type: "txt", font: "10%", label: "Par 4" },
+        { type: "txt", font: "10%", label: "Hcp 15" },
+        { type: "txt", font: "35%", label: "420" },
+        { type: "txt", font: "20%", label: "69" },
+      ]
+    },
+    { type: "custom", render: drawHole, id: "graph", bgCol: g.theme.bg, fillx: 1, filly: 1 }
+  ]
 });
 
-newnodelist = g.transformVertices(nodelist, {
-  x: 150, // x offset (default 0)
-  y: 150, // y offset (default 0)
-  scale: 0.45, // scale factor (default 1)
-  rotate: course.angle - Math.PI / 2.0, // angle in radians (default 0)
-});
-g.setColor(0, 1, 1);
-g.drawPoly(newnodelist);
\ No newline at end of file
+console.log(g.getWidth());
+console.log(g.getHeight());
+
+g.clear();
+layout.render();
+layout.debug();
\ No newline at end of file
diff --git a/apps/golfview/maptools.js b/apps/golfview/maptools.js
index af05343c8..fffd57ca0 100644
--- a/apps/golfview/maptools.js
+++ b/apps/golfview/maptools.js
@@ -47,6 +47,10 @@ function rotateVec(a, theta) {
     return pt;
 }
 
+function distance(a,b) {
+    return Math.sqrt(Math.pow(a.x-b.x,2) + Math.pow(a.y-b.y,2))
+}
+
 // https://stackoverflow.com/questions/19721439/download-json-object-as-a-file-from-browser
 function downloadObjectAsJSON(exportObj, exportName) {
     var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));