shapefile-js in React?

[gmarshall56]

Hello again:

I am trying to use this shape-js file in my react functional component.

• In my package.json I have : "shpjs": "^3.6.3" as a dependency
• In my react component I have imported as such: import { shp } from 'shpjs/dist/shp';

Here is my code:

        const shpfile = L.geoJson({features:[]},{onEachFeature:function popUp(f,l){
                var out = [];
                if (f.properties){
                    for(var key in f.properties){
                        out.push(key+": "+f.properties[key]);
                    }
                    l.bindPopup(out.join("<br />"));
                }
            }}).addTo(map);

        const base = '../../../public/shapefiles/JNC/testJNC.zip'; 
        shp(base).then(function(geojson){  <== shp is not defined here
            shpfile.addData(geojson);
        });

Would this be the correct way of implementing and using the shapefile-js in a react component? Thanks for your time. Sorry if this is a stupid question. I'm learning React as well as using Leaflet in React.

[calvinmetcalf]

you could just use https://github.com/calvinmetcalf/leaflet.shapefile which would allow you to do

const base = '../../../public/shapefiles/JNC/testJNC.zip'; 
    const shpfile = L.shapefile(base, {onEachFeature:function popUp(f,l){
                var out = [];
                if (f.properties){
                    for(var key in f.properties){
                        out.push(key+": "+f.properties[key]);
                    }
                    l.bindPopup(out.join("<br />"));
                }
            }}).addTo(map);