diff --git a/html/force.js b/html/force.js
index 4f933f8..81ae1dc 100644
--- a/html/force.js
+++ b/html/force.js
@@ -372,16 +372,6 @@ function reload() {
   })
 }
 
-var linkcolor = {'default':
-                  d3.scale.linear()
-                  .domain([1, 1.25, 1.5])
-                  .range(["#0a3", "orange", "red"]),
-                 'wifi':
-                  d3.scale.linear()
-                  .domain([1, 3, 10])
-                  .range(["#0a3", "orange", "red"]),
-                }
-
 var dragging = false
 
 var node_drag = d3.behavior.drag()
diff --git a/html/geomap.html b/html/geomap.html
index 8f8a069..ddd1c2c 100644
--- a/html/geomap.html
+++ b/html/geomap.html
@@ -20,6 +20,7 @@
     <script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenLayers.js"></script>
     <script src="http://maps.burningsilicon.net/OpenLayers-2.8/OpenStreetMap.js"></script>
     <script type="text/javascript" src="d3.v2.js"></script>
+    <script type="text/javascript" src="links.js"></script>
     <script type="text/javascript" src="geomap.js"></script>
 
     <script type="text/javascript">
diff --git a/html/geomap.js b/html/geomap.js
index c0679bd..177e79d 100644
--- a/html/geomap.js
+++ b/html/geomap.js
@@ -130,6 +130,14 @@ function load_json(layer, map) {
                                   .transform( new OpenLayers.Projection("EPSG:4326"),
                                                   map.getProjectionObject() 
                                   );
+        var color;
+        switch (d.type) {
+          case "vpn":
+            color = linkcolor['default'](Math.max.apply(null, d.quality.split(",")))
+            break;
+          default:
+            color = linkcolor['wifi'](Math.max.apply(null, d.quality.split(",")))
+        }
 
         var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(
            [new OpenLayers.Geometry.Point(a.lon, a.lat),
@@ -137,9 +145,9 @@ function load_json(layer, map) {
            ]),
            {name: d.name, description: d.id},
            { 
-              strokeColor: '#00ff00', 
-              strokeOpacity: 0.5,
-              strokeWidth: 5
+              strokeColor: color,
+              strokeOpacity: 0.8,
+              strokeWidth: 3
            })
         layer.addFeatures([feature])
       })
diff --git a/html/links.js b/html/links.js
new file mode 100644
index 0000000..e590b3d
--- /dev/null
+++ b/html/links.js
@@ -0,0 +1,11 @@
+var linkcolor = {'default':
+                  d3.scale.linear()
+                  .domain([1, 1.25, 1.5])
+                  .range(["#0a3", "orange", "red"]),
+                 'wifi':
+                  d3.scale.linear()
+                  .domain([1, 3, 10])
+                  .range(["#0a3", "orange", "red"]),
+                }
+
+
diff --git a/html/nodes.html b/html/nodes.html
index 983765c..d76804a 100644
--- a/html/nodes.html
+++ b/html/nodes.html
@@ -87,6 +87,7 @@
     <footer>
     <a href="http://tcatm.github.com/ffmap-d3/">ffmap-d3</a> — © Nils Schneider</a>
     </footer>
+    <script src='links.js' type='text/javascript'></script>
     <script src='force.js' type='text/javascript'></script>
   </body>
 </html>