Skip to content

Siliconrob/mapping-images

Repository files navigation

Hello and welcome to using Hapijs with MapBox+AirTable!

Live site

This project includes a Node.js server script

  • Make sure to set all your .env variables, this example uses personal tokens
  • Node.js is a popular runtime that lets you run server-side JavaScript.
  • You will need to generate a free MapBox gljs API key MapBox.
  • You will need to generate a free AirTable API key AirTable
  • You should probably get a free HERE free geocode API Key (limit 1000 API calls per day) HERE.
  • This project uses the Hapijs framework (I hope it makes you as happy as it does for me to use 😁) and explores basic routes.
  • Do not use this in production

Sample AirTable Format

Id,Approved,Photo,PublicText,Latitude,Longitude,SubmissionDate,ApprovalDate
UUID, checkbox, url, text, number (6), number (6), utc date, FORMULA = IF(Approved = 1, LAST_MODIFIED_TIME(), BLANK())
6b85b812-bd0d-4aad-8597-09eef7186ddb,checked,Prestige_Worldwide_logo.png (url here),Investors? Possibly You!,41.123457,-124.156738,2/13/2024 9:00pm,2/19/2024 2:35am

Last updated: 19 Feb 2023

Prerequisites

You'll get best use out of this project if you're familiar with basic JavaScript. If you've written JavaScript for client-side web pages this is a little different because it uses server-side JS, but the syntax is the same!

What's in this project?

README.md: That’s this file, where you can tell people what your cool website does and how you built it.

public/map.html: Holds the display map rendering.

public/style.css: The styling rules for the pages in your site.

index.js: The Node.js server script for your new site. The JavaScript defines the endpoints in the site back-end, one to return the homepage and one to update with the submitted color. Each one sends data to a Handlebars template which builds these parameter values into the web page the visitor sees.

package.json: The NPM packages for your project's dependencies.

routes/: This folder holds all the predefined Swagger entry points for hapijs to communicate with the OwnerRez API.

src/: This folder holds general server side helper files for working with hapijs.

Try this next 🏗️

Take a look in TODO.md for next steps you can try out in your new site!

Want a minimal version of this project to build your own Node.js app? Check out Blank Node!

Glitch

You built this with Glitch!

Glitch is a friendly community where millions of people come together to build web apps and websites.

About

Image mapping demo

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages