jondandois / leaflet-express-tutorial

Building out a Leaflet map that connects with a PostGIS DB using Node and Express

Home Page:https://secure-cliffs-69814.herokuapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Going to follow this tutorial from MDN for getting the express app started and then add some additional features for our leaflet map and postgis routes.

Deploy

We are going to add the app as a Heroku app following these instructions

  1. Install Heroku CLI and get Heroku account
  2. Go into express app directory and heroku login from commandline

Tutorial Steps Draft:

  1. Environment
    1. Code editor
    2. sql client
    3. heroku account
  2. Setup Backend
    1. Setup new heroku node app, add postrgres DB
    2. Connect to postgres in sql client
    3. Run the db_setup.sql script to populate the schema (do this one block at a time)
    4. Import the streetcar dump file to populate with data
  3. Setup Frontend
    1. Install node and npm on your machine
    2. Create a new node github repo, git clone it locally, and cd into it
    3. Install Express Generator npm install -g express-generator, we will use this to generate the skeleton app.
    4. Build the Express skeleton app using the pug view engine. The second variable is your app name. express leaflet-express-tutorial --view=pug, and follow instructions to install and run
    5. Install nodemon npm install -g nodemon
    6. add devstart to package.json under scripts with your app name
      • "devstart": "SET DEBUG=leaflet-express-tutorial:* & nodemon ./bin/www"
    7. load and test app by running npm run devstart
    8. ...
    9. ...
    10. make a new route for streetcars
    11. create your .env file
    12. connect to your Heroku DB with DATABASE_URL
    13. add a map (http://duspviz.mit.edu/web-map-workshop/leaflet_nodejs_postgis/)
    14. connect map to API and draw features!

About

Building out a Leaflet map that connects with a PostGIS DB using Node and Express

https://secure-cliffs-69814.herokuapp.com/


Languages

Language:JavaScript 62.8%Language:PLpgSQL 24.8%Language:HTML 9.6%Language:CSS 2.8%