Skip to content

Latest commit

 

History

History
134 lines (98 loc) · 4.19 KB

README.md

File metadata and controls

134 lines (98 loc) · 4.19 KB
Raw

shapefile.js

Libraries.io dependency status for latest release CodeQL Node.js CI

JavaScript Style Guide

Introduction

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.

Usage

React

Install the package into your application

npm install --save shapefile.js

Import the Shapefile class from shapefile.js

import React, { useState } from 'react'
import { Shapefile } from 'shapefile.js'

function ShapefileImporter() {
  const [shapefile, setShapefile] = useState()

  return (
    <input
      type="file"
      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.

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
})

UMD

Add a script tag to your HTML file with your desired shapefile.js version from a CDN provider

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <!-- Load shapefile.js library -->
    <script src="https://unpkg.com/shapefile.js/dist/shapefile.js"></script>

    <!-- Add custom JS logic -->
    <script>
      window.addEventListener('DOMContentLoaded', () => {
        const shapefileInput = document.getElementById('shapefile-input')
        shapefileInput.addEventListener('change', () => {
          if (shapefileInput.files.length > 0) {
            shapefileInput.files[0].arrayBuffer().then(arrayBuffer => {
              // Load the .zip file to expose its contents
              ShapefileJS.Shapefile.load(arrayBuffer).then(shapefile => {
                console.log(shapefile.contents)
              })
            })
          }
        })
      })
    </script>
  </head>
  <body>
    <div>
      <input id="shapefile-input" type="file" />
    </div>
  </body>

License

Distributed under the GPL-3.0 License. See LICENSE for more information.

Contact

Matthew Downs

Email: matthew.downsc@gmail.com

Project Link: https://github.com/matthewdowns/shapefile.js