Code Monkey home page Code Monkey logo

mlh-localhost-github's Introduction

MLH Localhost Hometown Map

This repository contains the source code for a map of the hometowns of anyone who attends the MLH Localhost workshop, How to Collaborate on Code Projects with GitHub. Participants learn best practice GitHub workflows, add their hometown to locations.txt, and see the giant community they're part of!

How to participate in this workshop

  1. Make a GitHub account.
  2. Fork this repository.
  3. Add your hometown to locations.txt.
  4. Commit your changes and make a pull request.
  5. Ask someone else to comment on your pull request.
  6. Wait for the workshop organizer to approve your pull request.
  7. Refresh the map!

Technologies used in this project

GitHub actions allows us to run a NodeJS script automatically when a commit is pushed to the project. That script takes all the locations provided and turns them into latitude & longitude coordinates.

GitHub pages lets us host our map on GitHub as a webpage.

We chose to use NodeJS as the language to turn all the hometown names into coordinates.

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.

Node library for geocoding and reverse geocoding.

Try the application locally, if you want!

Google Maps API Key

To use the Google Maps JavaScript API, you will ned an API Key. The API key is used to track API requests associated with your project for usage and billing. To learn more about API keys, see the API Key Best Practices and the FAQs.

Adding a new location

The App reads its locations from the locations.txt file located in the root folder. It will consider each line a different location, so the file should look something like this:

New York, USA
Brazil
Japan

To add a new location, simply append a new line to the locations.txt file

Running the application:

To run this application locally, you'll need to:

  • Clone this repository:
git clone https://github.com/MLH/mlh-localhost-github.git
cd localhost-github
npm install
  • Set up environment variables:

There is a .env.example file that can be used to configure the app. Simply create a copy named .env

GOOGLE_API_KEY= # Google Maps API KEY

Now inside the root folder run the following:

npm geocode

This will turn each line in the locations.txt into a set of coordinates.

You can see your own map by running:

npm start

mlh-localhost-github's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mlh-localhost-github's Issues

New location code is naive

The new geocoding code (added in e7a8a05) is a fairly naive, assuming all addresses are going to be the lowest lines of the file. In the future, this should be updated to better navigate what has happened in the repo.

Locations.txt possibly too big

I think the locations.txt file grew too large which causes the Google Geocoding API to throw a "Query limit exceeded" exception. I think this is the cause for the app currently being broken. Maybe pruning it could help?
Probably linked to #1663.

Google Maps tutorial link is not directing to the documentation

Hey MLH Team ๐Ÿ‘‹
I've checked the tutorial link mentioned in the Google Maps section in the README file and it is not redirecting to the documentation. It seems like the /docs folder is no longer available in this repository or not public (?). A solution could be to delete the link toi the tutorial or make the dos folder available again.

๐Ÿ˜…

Test Issue

Would review on the codes and get back to you

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.