Github/js-shapefile-to-geojson
1
0
Fork 0
mirror of https://github.com/wavded/js-shapefile-to-geojson synced 2025-12-15 19:00:46 +00:00
Code Issues Releases Wiki Activity

Add support for loading via File API

Browse Source 
Shapefile and DBF constructors now support referencing files
via both url and a HTML 5 File API handle. This can be used
to load and map content added to file input(s) and processed
on the client browser.

FileReader and FileReaderSync are both used depending upon
availability to make this functionality work in both Gecko
and Webkit inside Web Workers.
This commit is contained in:
Chad Burt
2013-09-09 17:01:36 -07:00
parent c4cf216ec4
commit 8da264ae24
3 changed files with 187 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
files.html Normal file
View File

@@ -0,0 +1,65 @@
<!doctype html>
<html>
<head>
<title>js-shapefile-to-geojson Demo Page</title>
<style>
html, body {
height: 100%;
width: 100%;
}
#map {
height: 400px;
background-color: #eee;
}
</style>
</head>
<body>
<a href="http://github.com/wavded/js-shapefile-to-geojson"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<h2>js-shapefile-to-geojson Demo Page</h2>
<p>Pure client-side JavaScript (no server side code) parsing of shapefiles and dbase files to GeoJSON format displayed using OpenLayers.</p>
<div id="map"></div>
<p>View project at <a href="http://github.com/wavded/js-shapefile-to-geojson">http://github.com/wavded/js-shapefile-to-geojson</a>.
<script src="http://rs1.adc4gis.com/js/openlayers/2.9.1/OpenLayers-Proj4.js"></script>
<script src="stream.js"></script>
<script src="shapefile.js"></script>
<script src="dbf.js"></script>
<script type="text/javascript">
OpenLayers._getScriptLocation = function(){
return "http://rs1.adc4gis.com/js/openlayers/2.9.1/";
};
var map = new OpenLayers.Map("map",{allOverlays: true}),
parser = new OpenLayers.Format.GeoJSON(),
vector = new OpenLayers.Layer.Vector("Converted")
map.addLayer(vector);
var onchange = function(e) {
var shpFile = document.getElementById('shp').files[0];
var dbfFile = document.getElementById('dbf').files[0];
if (shpFile) {
var opts = { shp: shpFile };
if (dbfFile) {
opts['dbf'] = dbfFile;
}
shapefile = new Shapefile(opts, function(data){
var features = parser.read(data.geojson);
vector.addFeatures(features);
map.zoomToExtent(vector.getDataExtent());
console.log(data);
});
}
}
document.body.onload = function(){
document.getElementById('shp').addEventListener('change', onchange, false);
document.getElementById('dbf').addEventListener('change', onchange, false);
}
</script>
<br>
<br>
.shp <input id="shp" type="file" name=".shp" />
.dbf <input id="dbf" type="file" name=".dbf" />
</body>
</html>