Coder Social home page Coder Social logo

empobla / earthquakemapper Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 1.28 MB

A website that plots in Google Maps recent earthquakes of a place the user looks up using GeoNames Recent Earthquakes WebService.

Home Page: https://emilioppv.com/projects#earthquakemapper

JavaScript 64.02% CSS 23.03% Pug 12.95%
geonames-api google-maps-api

earthquakemapper's Introduction

Portfolio LinkedIn


Logo

earthquakeMapper

A website that plots in Google Maps recent earthquakes of a place the user looks up using GeoNames Recent Earthquakes WebService.

Table of Contents
  1. About The Project
  2. Abilities Mastered
  3. Dependency List
  4. Getting Started
  5. Usage
  6. License
  7. Contact
  8. Acknowledgments

About The Project

Product Name Screen Shot

This project is a website that combines the use of both Google Maps API and GeoNames Recent Earthquakes API to show the user the biggest, most recent earthquakes that have occurred in a place that the user looks up.

The objective of this project was mainly to improve my knowledge and use of REST APIs and to be able to create an interactive website that, through the use of APIs, can provide useful information for users in a real-world scenario.

(back to top)

Built With

Express Pug Node Heroku

(back to top)

Abilities Mastered

  • Use of GeoNames API
  • Use of GoogleMaps JavaScript and Places API

(back to top)

Dependency List

  • @googlemaps/google-maps-service-js: For using Google Maps API.
  • Axios: For making requests to GeoNames.
  • Body-Parser: For limiting the request body payload the user can submit.
  • Compression: For compressing express' requests.
  • Dotenv: For handling in-app environment variables such as API keys.
  • Express.js: For handling the server logic.
  • Express-Rate-Limit: For limiting the amount of requests per window of time a user can make.
  • Helmet: For applying server security policies such as CORS.
  • Node.js: Framework used to build application.
  • Pug: Templating language for frontend SSR.

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

This project requires two Google API Keys (one for backend queries and one for frontend map rendering) and your GeoName's username.

Installation

  1. Clone the repo

    git clone https://github.com/empobla/earthquakeMapper.git
  2. Install NPM packages

    npm install
  3. In the project's directory, create a .env file with the following keys:

    GEONAMES_USERNAME=<GEONAMES_USERNAME>
    
    GOOGLE_API_BACK=<GOOGLE_SERVER_API_KEY>
    GOOGLE_API_FRONT=<GOOGLE_CLIENT_API_KEY>
    

    Note: Replace everything in between <> with your actual keys.

  4. Start the server in development mode!

    npm run devstart

(back to top)

Usage

earthquakeMapper will display the top 10 earthquakes in the last 12 months found in the world initially. If any earthquake point is selected, it will display it's date, time, depth, and magnitude as well. In addition, you can search for places, prompting earthquakeMapper to update it's map and show you the top 10 strongest earthquakes on the place you selected in the last 12 months.

Place Search

(back to top)

License

This project is property of Emilio Popovits Blake. All rights are reserved. Modification or redistribution of this code must have explicit consent from the owner.

(back to top)

Contact

Emilio Popovits Blake - Contact

Project Link: https://github.com/empobla/earthquakeMapper

(back to top)

Acknowledgments

(back to top)

earthquakemapper's People

Contributors

empobla avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.