Neon Serverless Postgres

The database you love, on a serverless platform designed to help you build reliable and scalable applications faster. Neon provides a generous free service to host spatial data in a PostGIS extended serverless database.

1. Registration

• Go to this link Neon Database Sign Up
• It is possible to signup using your GitHub account or Google.

2. Create a new project

3. Enable PostGIS

• The PostGIS extension must be created on a new Postgres DB.
• This is required for XYZ/MAPP to run.
• You can install this by using this command in the Neon dashboard SQL Editor create extension postgis;

4. Create a new table with spatial index

• We can now run SQL to create a new table for spatial data with an GIST index.
• The new table should have a serial id field which allows us to add new location geometries through the Mapp API.
• This ensures that every new location added via Mapp will have a unique ID for selection.

create table locations (
  id serial not null primary key,
  geom geometry,
  name varchar,
  notes text
);

CREATE INDEX locations_geom
  ON locations
  USING GIST (geom);

• More fields can be added later to the table with following SQL statement.

ALTER TABLE locations ADD COLUMN number_field NUMERIC;

5. Connecting XYZ to the database

• XYZ can connect to the database by adding the database connection string as an environment variable.
• The variable should be named DBS_*. Where * represents the value of the dbs property.
• A layer with the dbs: "NEON" property will require the DBS_NEON environment variable to connect to the table defined in the layer properties.
• You can find the connection details in the Dashboard > Connect to your database

• You can copy the connection string into your .env file as "DBS_NEON"
• Note that you do not need psql ' at the start - the connection string should begin with "postgresql://".

DBS_NEON = "connection_string"

6. Add a new layer to the workspace

• We can now add a layer for the newly created table to the workspace.
• The layer.json can be added as a template that is loaded from a source or directly into the locale.layers{} object.
• A user will be able to create new locations by drawing a polygon geometry in the mapview.
• A user will be able to edit the name field value on a selected location.

"locations": {
  "format": "geojson",
  "dbs": "NEON",
  "table": "locations",
  "srid": "4326",
  "geom": "geom",
  "qID": "id",
  "draw": {
    "polygon": true
  },
  "infoj": [
    {
      "type": "geometry",
      "display": true,
      "field": "geom",
      "fieldfx": "ST_asGeoJSON(geom)",
      "edit": true
    },
    {
      "type": "pin",
      "label": "ST_PointOnSurface",
      "field": "pin",
      "fieldfx": "ARRAY[ST_X(ST_PointOnSurface(geom)),ST_Y(ST_PointOnSurface(geom))]"
    },
    {
      "title": "ID",
      "field": "id",
      "inline": true
    },
    {
      "title": "Name",
      "field": "name",
      "inline": true,
      "edit": true
    }
  ]
}

7. Adding new fields and fixing the warning

• We added a notes field to the database that is not yet included in the infoj[] so cannot be seen by the user.
• Let's add this to the infoj as another object at the bottom.

   {
      "title": "Notes",
      "field": "notes",
      "inline": true,
      "edit": true
    }

• You will notice in the console that you see a warning.

• To fix this we need to add a style.default.
• You can use any default fillColor and strokeColor you wish!

"style": {
 "default": {
   "fillColor": "#d57120",
   "strokeColor": "#d57120"
 }
},