Monday, December 31, 2012

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.

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.

In the Geodetic Datum field, choose the correct datum e.g. WGS84.

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.

Click on the Shapefile overlay to display the DBF attributes in an Info window.

Monday, December 24, 2012

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.

Monday, December 17, 2012

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.

Monday, December 10, 2012

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.