Update

matthewdowns · Jan 2, 2023 · 5ad7f20 · 5ad7f20
1 parent 2e0c553
commit 5ad7f20
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -26,30 +26,83 @@ and parse each file individually.
 
 ## Usage
 
+### React
+
 Install the package into your application
 ```bash
 npm install --save shapefile.js
 ```
 
-Use the `ShapefileJS` UMD global variable and load a shapefile whenever the file input changes
+Import the `Shapefile` class from `shapefile.js`
+```jsx
+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.
+```js
+const shp = shapefile.parse('shp');
+const shx = shapefile.parse('shx');
+const dbf = shapefile.parse('dbf', {
+  // The expected timezone that dates are stored as in the .dbf file
+  timezone: 'UTC',
+
+  // 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
+- 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
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
 
     <!-- Load the shapefile.js library -->
-    <script src="https://unpkg.com/browse/shapefile.js/dist/index.js"></script>
+    <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) {
-            e.target.files[0].arrayBuffer().then(arrayBuffer => {
+            shapefileInput.files[0].arrayBuffer().then(arrayBuffer => {
               // Load the .zip file to expose its contents
-              ShapefileJS.load(arrayBuffer).then(shapefile => {
+              ShapefileJS.Shapefile.load(arrayBuffer).then(shapefile => {
                 console.log(shapefile.contents)
               })
             })
@@ -65,20 +118,6 @@ Use the `ShapefileJS` UMD global variable and load a shapefile whenever the file
   </body>
 ```
 
-You can parse each file in the Shapefile ZIP. Some files require additional arguments.
-```tsx
-const shp = shapefile.parse('shp');
-const shx = shapefile.parse('shx');
-const dbf = shapefile.parse('dbf', {
-  // The expected timezone that dates are stored as in the .dbf file
-  timezone: 'UTC',
-
-  // 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
-});
-```
-
 
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,6 @@
   "homepage": "https://github.com/matthewdowns/shapefile.js#readme",
   "dependencies": {
     "jszip": "^3.7.1",
-    "moment": "^2.29.1",
     "moment-timezone": "^0.5.34"
   },
   "devDependencies": {

diff --git a/rollup.config.js b/rollup.config.js
@@ -5,12 +5,6 @@ const { resolve } = require('path')
 const { dependencies } = require('./package.json')
 
 const input = resolve(__dirname, './src/index.ts')
-const globals = {
-  'jszip': 'JSZip',
-  'moment': 'moment',
-  'moment-timezone': 'moment',
-  'path': 'path'
-}
 const external = Object.keys(dependencies)
 
 const development = {
@@ -26,7 +20,6 @@ const development = {
       file: resolve(__dirname, `./dist/shapefile.js`),
       format: 'umd',
       name: 'ShapefileJS',
-      globals,
       sourcemap: true
     }
   ],
@@ -49,7 +42,6 @@ const production = {
       file: resolve(__dirname, `./dist/shapefile.min.js`),
       format: 'umd',
       name: 'ShapefileJS',
-      globals,
       sourcemap: false
     }
   ],

diff --git a/src/lib/Shapefile/Shapefile.test.ts b/src/lib/Shapefile/Shapefile.test.ts
@@ -1,5 +1,5 @@
 import { readFileSync } from 'fs'
-import moment from 'moment'
+import moment from 'moment-timezone'
 import { join, resolve } from 'path'
 import { DbaseVersion, ShapePolygon } from '../../types'
 import Shapefile from './Shapefile'