Last active
November 1, 2023 15:24
-
-
Save Anexo/6099218d422ef846fd4851334ba574bc to your computer and use it in GitHub Desktop.
Shapefile-js on Angular 8
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Hi all, | |
For those of you, using the amazing package shapefile-js written by calvinmetcalf: https://github.com/calvinmetcalf/shapefile-js/ | |
Here is a brief decription, on how to make it work on Angular 8: | |
First install the package with: | |
npm install shpjs --save | |
Import it on your component: | |
*/ | |
import * as shp from 'shpjs'; | |
//Then from your component, create an async function, which will call a function on a service, to read the file uploaded (A ZIP containing the shp and all related files): | |
async SHPtoGEOJSON(form: any) { | |
await this.Service.readFileContent(file) | |
.toPromise().then( | |
res => { | |
shp(res).then(function (geojson) { | |
console.log(geojson); | |
}) | |
} | |
); | |
} | |
//Last but not least, on the Service: | |
readFileContent(file: File) { | |
let fileReader: FileReader = new FileReader(); | |
fileReader.readAsArrayBuffer(file); | |
return Observable.create(observer => { | |
fileReader.onloadend = () => { | |
observer.next(fileReader.result); | |
observer.complete(); | |
}; | |
}); | |
} | |
/* | |
Oh! And on polyfills.ts you need to add : | |
*/ | |
(window as any).global = window; | |
declare var global: (any); | |
declare var require: (any); | |
global.Buffer = global.Buffer || require('buffer').Buffer; |
thank you
Angular 10 note:
Change:
shp(res).then(function (geojson) {}
For:
shp(res).then((geojson) => {}
I am not planning to use any library with leaflet how can i add the same feature using plain JavaScript in my leaflet map
How can I convert table to shapefile in angular?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you very much for the help!!