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

https://codesandbox.io/s/2-load-spatial-data-dgcux?file=/src/index.jscodesandbox.io

PreviousHello jsgeoda!

NextBasic Mapping

Last updated 5 years ago

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"));