Nearby Geolocation.

By participating in the EOSIO VIRTUAL HACKATHON our team EOS Costa Rica developed lifebank(application that uses blockchain technology to save lives. After completing a donation at any registered Lifebank, a life donor will earn a Life Token that can be redeemed at a local sponsor)

My contribution was developing the maps to be able to insert and show locations, at the beginning it seems difficult but investigating and thanks to Hasura and Postgis it was not, so now I want to share my experience and how you can create a map to get nearby locations in the easiest way.

You can see a live demo here

Tech Stack:

Backend

• Hasura
• Postgresql
• Postgis

Frontend

• React
• Apollo
• Mapbox

Demo app

Backend

The first thing to do is run hasura and Postgres with PostGIS, there are 2 ways to do this.

Using Docker

Run the app locally

• First you need to have Docker and the Hasura CLI installed.
• Go to the hasura folder and build the postgres container.

  cd hasura/ && docker-compose up -d --build postgres

• Wait for the db is ready to accept conections you can check that running

  docker-compose exec -T postgres pg_isready

• Build the hasura container.

  docker-compose up -d --build hasura

• Wait for the hasura is ready you can check that running

  curl http://localhost:8080/v1/version

• Open the hasura console running

  hasura console --endpoint http://localhost:8080

Using Heroku

• Go to the Hasura Quickstart and deploy a new app.
• Open the Hasura console go to Data tab, click on the SQL section paste this code:

  CREATE EXTENSION postgis;
  CREATE EXTENSION postgis_topology;

• Select the track this check box and press Run!
• Go to the Add Table section and create a new table called location with this columns:

Frontend

Run the app locally.

• Navigate to the app folder and install dependencies

  cd app/ && yarn

• Create a mapbox account and copy the access token.

• Rename the .env.example file in the app folder to .env and replace the access token key.

• Run the app

  yarn start

We are already running the demo app locally.

How it works

The postgis extension allows us set columns of type geography in the postgres DB and Hasura give us a full GraphQL API to interact with, Hasura have Native support for PostGIS topology operators so we can request data from the DB using the postgis operators for example we use the _st_d_within operator in this query in the app to get the nearby locations around a geolocation passing the distance in metters and the center point.

query nearbyLocations($distance: Float!, $point: geography!) {
  locations: location(
    where: {
      geolocation: { _st_d_within: { distance: $distance, from: $point } }
    }
  ) {
    id
    name
    geolocation
    created_at
    updated_at
  }
}

Now that we can get nearby locations we can show them using a mapbox component and each time the user move the map we send a new request to get the nearby locations around the point.

Hasura also give us a mutation to insert locations in the DB

mutation location($location: location_insert_input!) {
  location: insert_location_one(object: $location) {
    id
    name
    geolocation
    created_at
    updated_at
  }
}

We use another mapbox component to set a marker each time the user click in some place of the map this action give us the geolocation information of that point so we create a form to send the name and the geolocation to the location table in the DB using the hasura mutation we need to send the data in this format:

onSubmit={values =>
  insertLocation({
    variables: {
      location: {
        name: values.name,
        geolocation: {
          type: 'Point',
          coordinates: [
            values.geolocation.longitude,
            values.geolocation.latitude
          ]
        }
      }
    }
  })
}