Load Spatial Data
jsgeoda supports reading geojson file. The file could be fed using URL or File object (e.g. via drag-and-drop). The content of the geojson file needs to be read in binary format: ArrayBuffer. Then, you can call read_geojson() function to load geojson into jsgeoda.
const jsgeoda = require('jsgeoda');
const fs = require('fs');
// create jsgeoda instance
const geoda = await jsgeoda.New();
// print out "Hello jsgeoda 0.0.8"
console.log("Hello jsgeoda", geoda.version);
// read a geojson file into ArrayBuffer using fs
const data = fs.readFileSync('./data/natregimes.geojson').buffer;
// load geojson in jsgeoda, an unique id (string) will be returned for further usage
const nat_uid = geoda.readGeoJSON(data);
const num_obs = geoda.getNumObs(nat_uid);
console.log("number of observations:", num_obs);
const col_names = geoda.getColNames(nat);
console.log("column names:", col_names);
const hr60 = geoda.getCol(nat, "HR60");
console.log("hr60:", hr60);<html>
<head>
<script src='bundle.js'></script>
<script>
jsgeoda.New().then((geoda)=> {
console.log("Hello jsgeoda", geoda.version);
const map_url = '/data/natregimes.geojson';
// fetch the geojson and read it as ArrayBuffer
fetch(map_url).then(res => res.arrayBuffer()).then((data) => {
// load geojson in jsgeoda, an unique id (string) will be returned for further usage
const nat = geoda.read_geojson(data);
const num_obs = geoda.get_numobs(nat);
console.log("number of observations:", num_obs);
const col_names = geoda.get_colnames(nat);
console.log("column names:", col_names);
const hr60 = geoda.get_col(nat, "HR60");
console.log("hr60:", hr60);
});
});
</script>
</head>
<body></body>
</html>import React, { Component } from "react";
import ReactDOM from "react-dom";
import jsgeoda from "jsgeoda";
class App extends Component {
constructor() {
super();
this.state = {
mapId: "",
numObs: 0,
data: []
};
}
// load spatial data when mount this component
loadSpatialData(geoda) {
fetch(`https://webgeoda.github.io/data/natregimes.geojson`)
.then((res) => res.arrayBuffer())
.then((data) => {
// load geojson in jsgeoda, an unique id (string) will be returned for further usage
const nat = geoda.read_geojson(data);
const num_obs = geoda.get_numobs(nat);
const hr60 = geoda.get_col(nat, "HR60");
this.setState({
mapId: nat,
numObs: num_obs,
data: JSON.stringify(hr60)
});
});
}
componentDidMount() {
// jsgeoda.New() function will create an instance from WASM
// object that you can used later for spatial data analysis
jsgeoda.New().then((geoda) => {
this.loadSpatialData(geoda);
});
}
render() {
const rowStyle = {
"text-align": "left",
padding: "10px",
fontFamily: "Arial",
width: "100%"
};
return (
<div className="App">
<h1>JsGeoDa: Load Spatial Data</h1>
<div style={rowStyle}>map id: {this.state.mapId}</div>
<div style={rowStyle}>number of observations: {this.state.numObs}</div>
<div style={rowStyle}>hr60: {this.state.data}</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Try it yourself in the playground
Last updated