Easily read and parse Shapefiles from the browser.
npm install shapefile.js
Easily read and parse Shapefiles from the browser. Shapefile.js allows you to load a .zip as a buffer,
and parse each file individually.
> ### What is a Shapefile?
>
> The shapefile format is a geospatial vector data format for geographic information system (GIS) software.
> It is developed and regulated by Esri as a mostly open specification for data interoperability among Esri
> and other GIS software products. The shapefile format can spatially describe vector features: points,
> lines, and polygons, representing, for example, water wells, rivers, and lakes. Each item usually has
> attributes that describe it, such as name or temperature.
Install the package into your application
``bash`
npm install --save shapefile.js
Import the Shapefile class from shapefile.jsjsx
import React, { useState } from 'react'
import { Shapefile } from 'shapefile.js'
function ShapefileImporter() {
const [shapefile, setShapefile] = useState()
return (
onChange={e => {
if (e.target.files.length > 0) {
e.target.files[0].arrayBuffer().then(arrayBuffer => {
// Load the .zip file to expose its contents
Shapefile.load(arrayBuffer).then(_shapefile => {
// Set shapefile state
setShapefile(_shapefile)
})
})
}
}}
/>
)
}
export default ShapefileImporter
`
You can parse each file in the Shapefile ZIP. Some files require additional arguments.
`js`
const shp = shapefile.parse('shp');
const shx = shapefile.parse('shx');
const dbf = shapefile.parse('dbf', {
// Stop parsing the file when the byte position hits the field descriptors terminator
// This allows you to quickly get the fields used in the .dbf file and ignore the remainder of the file
properties: false
})
Add a script tag to your HTML file with your desired shapefile.js version from a CDN provider
- UNPKG: https://unpkg.com/shapefile.js/dist/shapefile.js
- jsDelivr: https://cdn.jsdelivr.net/npm/shapefile.js/dist/shapefile.js
_You can use the minified version by simply replacing the ending .js extension with .min.js_
Use the ShapefileJS UMD global variable and access the Shapefile class`html
Distributed under the GPL-3.0 License. See LICENSE for more information.
Matthew Downs
Email: matthew.downsc@gmail.com
Project Link: https://github.com/matthewdowns/shapefile.js