mirror of
https://github.com/wavded/js-shapefile-to-geojson
synced 2024-11-23 14:34:54 +00:00
8da264ae24
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.
66 lines
2.7 KiB
HTML
66 lines
2.7 KiB
HTML
<!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>
|
|
|