Display Shapefiles on Google Maps with this Google Mapplet

It would be nice to import and overlay ESRI Shapefiles over a Google Maps backdrop without having to upload the files to a web server. With the new HTML5 FileReader objects  implemented in modern browsers, it is now possible to do this. I burnt some midnight oil to write this tool to read, reproject to the Mercator coordinate system, and display Shapefiles as Google Maps overlays.

The following steps demonstrate how to use the tool.

1. Use a modern browser (such as Chrome or FireFox) to open this page http://dominoc925-pages.appspot.com/mapplets/vshpfile.html.
   
   
   
2. Click Import shapefile.
   
   The Import Shapefile dialog box appears.
   
3. In the SHP field, click the Choose File button. Browse and select a Shapefile e.g. mgrs6x8_east.shp.
   
   
   
4. In the DBF field, click the Choose File button. Browse and select the Shapefile's corresponding DBF file e.g. mgrs6x8_east.dbf.
   
   
   
5. In the Coordinate system type field, choose the correct system for the Shapefile e.g. Geographic. If Projected is chosen, then choose the correct Projection.
   
   
   
6. In the Geodetic Datum field, choose the correct datum e.g. WGS84.
   
7. Click Start Import.
   
   If all goes well, the Shapefile will be displayed on the Google Maps backdrop. It might be necessary to zoom into the Shapefile's bounds by clicking the More commands | Fit shapefile buttons on the sidebar.
   
   
   
8. Click on the Shapefile overlay to display the DBF attributes in an Info window.
   
   
   
9. Repeat to display more Shapefiles. 

WebApp to show DBASE (*.dbf) file information

The ESRI Shapefile format stores database attributes in DBASE DBF (*.dbf) file and shape geometries in another associated file (*.shp). Using the DBASE file structure documentation in http://www.dbf2002.com/dbf-file-format.html, I wrote a simple Javascript web app to show basic information about a DBF file, similar to the open source ShapeLib's dbfinfo executable.

 The web app can be run from this page http://dominoc925-pages.appspot.com/webapp/dbf_info/default.html.

1. To use the web app, simply drag and drop one or more DBASE files (*.dbf) into the dashed box as shown in the screenshot below.
   
   
2. Or click the button and choose one or more (*.dbf) files. .
   
   
   
   Basic information about the DBF file is displayed, including the number of records, the number of columns, column names and type.
   
   
   
   

Note: This will run only on Chrome and a development version of FireFox that uses Gecko 7 at the moment. 

WebApp to show Shapefile information

I wrote a simple HTML5 Web App to show basic information about one or more ESRI Shapefile (*.shp) files similar to the shpinfo command from the open source ShapeLib library. The processing of the Shapefile is done in the local web browser without having to upload it to a server. The web app can be run from this web site http://dominoc925-pages.appspot.com/webapp/shpfile_info/default.html.

One the page is displayed, either click the button and select one or more Shapefiles or drag and drop *.shp files into the dashed box as shown in the screenshots below.

The Shapefile information is displayed in the web page.

Code snippet to check browser support for FileReader's readAsArrayBuffer method

The HTML5 FileReader object specifications provides for a few methods to read files including readAsBinaryString, readAsText, readAsDataURL and readAsArrayBuffer. Not all browsers have implemented all the methods. For instance, Chrome already has support for the readAsArrayBuffer method but FireFox will support the same method in future versions that uses Gecko 7.0. It would be wise to put in some checks in the Javascript code to detect whether the readAsArrayBuffer method is supported and take appropriate actions if it is not.

The following Javascript code snippet shows a simple example of detecting support for the FileReader  readAsArrayBuffer API.

if (window.FileReader && window.FileReader.prototype.readAsArrayBuffer) {
    alert('The FileReader APIs are supported');
} else {
    alert('The FileReader readAsArrayBuffer API is not supported');
}

Javascript class to read a binary file in a browser

I found this nice open source code at https://github.com/vjeux/jDataView that provides a class for reading binary files in the browser.

The following Javascript code snippet is a simple example I wrote showing how to parse through a binary file using the HTML5 FileReader and the jDataView class.

function onFileButtonChange(evt){
    var files = evt.target.files;
    var f = files[0];

    //create a new instance of the HTML5 FileReader
    var reader = new FileReader();    
    //onload is called when the binary file is loaded
    reader.onload = function(e){        
        //store the binary array buffer in the buff variable
        var buff = e.target.result;
        
        //create a new instance of the jDataView
        var dv = new jDataView(buff);
        
        var offset = 0;
        //read a little endian signed integer (4 bytes) from byte offset 0. 
        var field1 = dv.getInt32(offset,true);
        
        offset+= 4;    //Move to the next field
        //read a little endian double (8 bytes) from byte offset 4
        var field2 = dv.getFloat64(offset,true);
        //...etc...
    };
    //read in a binary file as an ArrayBuffer
    reader.readAsArrayBuffer(f);
}

Visit the project repository for more details about the jDataView class.

Note that the HTML5 FileReader object's readAsArrayBuffer method has only been implemented in Chrome and FireFox 7+ at this point in time.