From c8c5a6c32c3ea26d3de1bc9ae3b793c8680ce00b Mon Sep 17 00:00:00 2001
From: Tom Carden <tom@stamen.com>
Date: Sun, 22 Nov 2009 20:07:49 -0800
Subject: [PATCH] actually reading values from the dbf now, bad thematic
 mapping is go

---
 dbf.js     |  26 ++++++++---
 index.html |  65 +++++++++++++++++++++------
 shp.html   | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 203 insertions(+), 18 deletions(-)
 create mode 100644 shp.html

diff --git a/dbf.js b/dbf.js
index e8e763e..fad8925 100644
--- a/dbf.js
+++ b/dbf.js
@@ -1,9 +1,28 @@
 // ported from http://code.google.com/p/vanrijkom-flashlibs/ under LGPL v2.1
 
-function DbfHeader(src) {
-
+function DbfFile(src) {
   var t1 = new Date().getTime();  
 
+  this.header = new DbfHeader(src);
+
+  var t2 = new Date().getTime();
+  if (window.console && window.console.log) console.log('parsed dbf header in ' + (t2-t1) + ' ms');  
+
+  t1 = new Date().getTime();  
+  
+  this.records = [];
+  for (var i = 0; i < this.header.recordCount; i++) {
+    var record = getRecord(src, this.header, i);
+    this.records.push(record);
+  }  
+
+  t2 = new Date().getTime();
+  if (window.console && window.console.log) console.log('parsed dbf records in ' + (t2-t1) + ' ms');  
+  
+}
+
+function DbfHeader(src) {
+
   var binState = { offset: 0, bigEndian: true };
   
   // endian:
@@ -50,9 +69,6 @@ function DbfHeader(src) {
   }
 
   this.recordsOffset = this.headerSize+1;                                  
-
-  var t2 = new Date().getTime();
-  if (window.console && window.console.log) console.log('parsed dbf in ' + (t2-t1) + ' ms');  
   
 }
 
diff --git a/index.html b/index.html
index 63b4703..7603f9f 100644
--- a/index.html
+++ b/index.html
@@ -3,35 +3,61 @@
 <title>Binary AJAX</title>
 <script type="text/javascript" src="binary.js"></script>
 <script type="text/javascript" src="shapefile.js"></script>
+<script type="text/javascript" src="dbf.js"></script>
 <!--[if IE]><script src="excanvas.js"></script><![endif]-->
 <script type="text/javascript">
 
-var file = "thematicmapping/TM_WORLD_BORDERS_SIMPL-0.3.shp";
+var shpURL = "thematicmapping/TM_WORLD_BORDERS_SIMPL-0.3.shp";
+var dbfURL = "thematicmapping/TM_WORLD_BORDERS_SIMPL-0.3.dbf";
+
+var shpFile;
+var dbfFile;
 
 window.onload = function() {
-  var b = new BinaryAjax(file, onBinaryAjaxComplete, onBinaryAjaxFail);
+  var shpLoader = new BinaryAjax(shpURL, onShpComplete, onShpFail);
+  var dbfLoader = new BinaryAjax(dbfURL, onDbfComplete, onDbfFail);
 }
 
-function onBinaryAjaxFail() { 
-  alert('failed to load ' + file);
+function onShpFail() { 
+  alert('failed to load ' + shpURL);
+}
+function onDbfFail() { 
+  alert('failed to load ' + dbfURL);
 }
 
-function onBinaryAjaxComplete(oHTTP) {
+function onShpComplete(oHTTP) {
   var binFile = oHTTP.binaryResponse;
 
   if (window.console && window.console.log) console.log('got data, parsing shapefile');
 
-  var shpFile = new ShpFile(binFile);
+  shpFile = new ShpFile(binFile);
 
   if (shpFile.header.shapeType != ShpType.SHAPE_POLYGON && shpFile.header.shapeType != ShpType.SHAPE_POLYLINE) {
     alert("Shapefile does not contain Polygon records (found type: "+shp.shapeType+")");
   }  
   
   //if (window.console && window.console.log) console.log(records);
-  render(shpFile.records);
+  if (dbfFile) {
+    render(shpFile.records, dbfFile.records);
+  }
 }
 
-function render(records) {
+function onDbfComplete(oHTTP) {
+  var binFile = oHTTP.binaryResponse;
+
+  if (window.console && window.console.log) console.log('got data, parsing dbf file');
+
+  dbfFile = new DbfFile(binFile);
+
+  //if (window.console && window.console.log) console.log(dbfFile.records);
+
+  if (shpFile) {
+    render(shpFile.records, dbfFile.records);
+  }
+}
+
+
+function render(records, data) {
 
   if (window.console && window.console.log) console.log('creating canvas and rendering');
 
@@ -84,9 +110,7 @@
   ctx.fillRect(0,0,800,400);
 
   ctx.lineWidth = 0.5;
-  ctx.strokeStyle = '#888888'; 
-  ctx.fillStyle = '#fff8f0'; 
-  ctx.beginPath();
+  ctx.strokeStyle = '#ffffff'; 
   for (var i = 0; i < records.length; i++) {
     var record = records[i];
     if (record.shapeType == ShpType.SHAPE_POLYGON || record.shapeType == ShpType.SHAPE_POLYLINE) {
@@ -94,19 +118,34 @@
       for (var j = 0; j < shp.rings.length; j++) {
         var ring = shp.rings[j];
         if (ring.length < 1) continue;
+        ctx.fillStyle = getFillRecord(data[i]);
+        ctx.beginPath();
         ctx.moveTo((ring[0].x - box.x) * sc, 400 - (ring[0].y - box.y) * sc);
         for (var k = 1; k < ring.length; k++) {
           ctx.lineTo((ring[k].x - box.x) * sc, 400 - (ring[k].y - box.y) * sc);
         }
+        ctx.fill();
+        ctx.stroke();
       }
     }
   }
-  ctx.fill();
-  ctx.stroke();
   t2 = new Date().getTime();
   if (window.console && window.console.log) console.log('done rendering in ' + (t2 - t1) + ' ms');
 }
 
+function getFillRecord(record) {
+  var colors = ["#F1EEF6", "#D4B9DA", "#C994C7", "#DF65B0", "#DD1C77", "#980043"]
+  var popn = parseInt(record.values['POP2005']);
+  if (!isNaN(popn)) {
+    popn = Math.max(0, Math.min(100000000, popn));
+    var colorIndex = parseInt((colors.length-1) * popn / 100000000);
+    var color = colors[colorIndex];
+    //if (window.console && window.console.log) console.log('popn: ' + popn + ' color: ' + color);  
+    return color;
+  }
+  return '#000000';
+}
+
 </script>
 <style type="text/css">
 body {
diff --git a/shp.html b/shp.html
new file mode 100644
index 0000000..63b4703
--- /dev/null
+++ b/shp.html
@@ -0,0 +1,130 @@
+<html>
+<head>
+<title>Binary AJAX</title>
+<script type="text/javascript" src="binary.js"></script>
+<script type="text/javascript" src="shapefile.js"></script>
+<!--[if IE]><script src="excanvas.js"></script><![endif]-->
+<script type="text/javascript">
+
+var file = "thematicmapping/TM_WORLD_BORDERS_SIMPL-0.3.shp";
+
+window.onload = function() {
+  var b = new BinaryAjax(file, onBinaryAjaxComplete, onBinaryAjaxFail);
+}
+
+function onBinaryAjaxFail() { 
+  alert('failed to load ' + file);
+}
+
+function onBinaryAjaxComplete(oHTTP) {
+  var binFile = oHTTP.binaryResponse;
+
+  if (window.console && window.console.log) console.log('got data, parsing shapefile');
+
+  var shpFile = new ShpFile(binFile);
+
+  if (shpFile.header.shapeType != ShpType.SHAPE_POLYGON && shpFile.header.shapeType != ShpType.SHAPE_POLYLINE) {
+    alert("Shapefile does not contain Polygon records (found type: "+shp.shapeType+")");
+  }  
+  
+  //if (window.console && window.console.log) console.log(records);
+  render(shpFile.records);
+}
+
+function render(records) {
+
+  if (window.console && window.console.log) console.log('creating canvas and rendering');
+
+  var canvas = document.getElementById('map');
+
+  if (window.G_vmlCanvasManager) {
+    G_vmlCanvasManager.initElement(canvas); 
+  }
+
+  var t1 = new Date().getTime();
+  if (window.console && window.console.log) console.log('calculating bbox...');
+
+  var box;
+  for (var i = 0; i < records.length; i++) {
+    var record = records[i];
+    if (record.shapeType == ShpType.SHAPE_POLYGON || record.shapeType == ShpType.SHAPE_POLYLINE) {
+      var shp = record.shape
+      for (var j = 0; j < shp.rings.length; j++) {
+        var ring = shp.rings[j];
+        for (var k = 0; k < ring.length; k++) {
+          if (!box) {
+            box = new Rectangle(ring[k].x, ring[k].y, 0, 0);
+          }
+          else {
+            var l = Math.min(box.x, ring[k].x);
+            var t = Math.min(box.y, ring[k].y);
+            var r = Math.max(box.x+box.w, ring[k].x);
+            var b = Math.max(box.y+box.h, ring[k].y);
+            box.x = l;
+            box.y = t;
+            box.w = r-l;
+            box.h = b-t;
+          }
+        }
+      }
+    }
+  }
+
+  var t2 = new Date().getTime();
+  if (window.console && window.console.log) console.log('found bbox in ' + (t2 - t1) + ' ms');
+
+  t1 = new Date().getTime();
+  if (window.console && window.console.log) console.log('starting rendering...');
+
+  var ctx = canvas.getContext('2d');
+  
+  var sc = Math.min(800 / box.w, 400 / box.h);
+
+  ctx.fillStyle = '#ccccff';
+  ctx.fillRect(0,0,800,400);
+
+  ctx.lineWidth = 0.5;
+  ctx.strokeStyle = '#888888'; 
+  ctx.fillStyle = '#fff8f0'; 
+  ctx.beginPath();
+  for (var i = 0; i < records.length; i++) {
+    var record = records[i];
+    if (record.shapeType == ShpType.SHAPE_POLYGON || record.shapeType == ShpType.SHAPE_POLYLINE) {
+      var shp = record.shape;
+      for (var j = 0; j < shp.rings.length; j++) {
+        var ring = shp.rings[j];
+        if (ring.length < 1) continue;
+        ctx.moveTo((ring[0].x - box.x) * sc, 400 - (ring[0].y - box.y) * sc);
+        for (var k = 1; k < ring.length; k++) {
+          ctx.lineTo((ring[k].x - box.x) * sc, 400 - (ring[k].y - box.y) * sc);
+        }
+      }
+    }
+  }
+  ctx.fill();
+  ctx.stroke();
+  t2 = new Date().getTime();
+  if (window.console && window.console.log) console.log('done rendering in ' + (t2 - t1) + ' ms');
+}
+
+</script>
+<style type="text/css">
+body {
+  background-color: #eee;
+  color: #000;
+  font: 12px sans-serif;
+  margin: 20px;
+}
+canvas {
+  background-color: #fff;
+  padding: 10px;
+}
+</style>
+</head>
+<body>
+<h1>Binary Ajax Shapefile Loader</h1>
+<p>Loading shapefile... uninformative errors may appear in the dark crevices of your browser.</p>
+<canvas id="map" width="800" height="400"></canvas>
+<p>See <a href="http://github.com/RandomEtc/shapefile-js">http://github.com/RandomEtc/shapefile-js</a> for more details.</p>
+</body>
+</html>