Skip to content

Commit

Permalink
actually reading values from the dbf now, bad thematic mapping is go
Browse files Browse the repository at this point in the history
  • Loading branch information
@RandomEtc
RandomEtc committed Nov 23, 2009
1 parent 403f8b3 commit c8c5a6c
Show file tree
Hide file tree
Showing 3 changed files with 203 additions and 18 deletions.
26 changes: 21 additions & 5 deletions dbf.js
View file
@@ -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:
Expand Down Expand Up @@ -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');

}

Expand Down
65 changes: 52 additions & 13 deletions index.html
View file
Expand Up @@ -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');

Expand Down Expand Up @@ -84,29 +110,42 @@
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) {
var shp = record.shape;
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 {
Expand Down
130 changes: 130 additions & 0 deletions shp.html
View file
@@ -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>

0 comments on commit c8c5a6c

Please sign in to comment.