read shapefile with react and typescript

[Piets0n]

Hi,

im trying to use shpjs with react-leaflet and typescript.

So i just want to start very basic and read a local .zip file like this:

base = '../../../../assets/shapefiles/example.zip';

and call it in a function:

getGEO(): any { let layer; shp(this.base) .then((geojson) => { layer = geojson; }) .catch((error) => console.log(error)); return layer; }

and put in inside a GeoJSON Component like this

`<LeafletMap ... ... ...

`

In the browser i got the following error:

Error: Can't find end of central directory : is this a zip file ? If it is, see http://stuk.github.io/jszip/documentation/howto/read_zip.html at ZipEntries.readEndOfCentral (zipEntries.js:195) at ZipEntries.load (zipEntries.js:300) at new ZipEntries (zipEntries.js:34) at JSZip.push../node_modules/jszip/lib/load.js.module.exports [as load] (load.js:25) at new JSZip (index.js:38) at push../node_modules/shpjs/lib/unzip.js.module.exports (unzip.js:6) at Function.push../node_modules/shpjs/lib/index.js.shp.parseZip (index.js:83) at index.js:139 at Array.<anonymous> (browser.js:110) at MutationObserver.nextTick (browser.js:59)

i double checked all possibilities with the path but without success

Maybe someone got the same error/problem?

[thorbjorn444]

Did you ever solve this? I am facing the exact same issue.

[calvinmetcalf]

maybe look at your network logs to see what is actually being loaded

[thorbjorn444]

Thanks a bunch for getting back to me. That got me on the right track. It turned out that it was an issue with how I was loading the file (with react-dropzone). Instead of passing the filename string to shp(), I got the buffer object, then passed that buffer to shp(), and it worked just fine.

[shesellsanctuary]

Hi @thorbjorn444 ! Can you detail how you did it? I am having the same problem.

[thorbjorn444]

Sure! Here's the outline of the callback function I used on the dropzone that accepted the GIS files. I apologize for the roughness and lack of comments:

import {useCallback} from "react";
import shp from "shpjs";

const onDropGeofile = useCallback((acceptedFiles) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader();
      let fileType = file.name.split('.').pop();
      reader.onabort = () => console.log('file reading was aborted');
      reader.onerror = () => console.log('file reading has failed');
      reader.onload = (e) => {
        const binaryStr = reader.result;
        if (fileType === 'zip') {
          shp(binaryStr).then(function(geojson){
            setGeoData(geojson);
            setCreateDisabled(false);
          }).catch((error) => {
            console.log('didnt work');
            console.log(error);
          });
        } else if (fileType === 'kml') {
          // do other stuff
        }
      };
      if (fileType === 'zip') {
        reader.readAsArrayBuffer(file)
      } else {
        reader.readAsText(file)
      }
    });
  }, [setGeoData, setCreateDisabled]);```

[shesellsanctuary]

Thank you!