Merge pull request #115 from Suyash878/master

GeoAPI Files(made the nesassary changes)
dishamodi0910 · May 20, 2024 · 6e44dff · 6e44dff
2 parents 3cfef22 + 1539287
commit 6e44dff
Show file tree

Hide file tree

Showing 7 changed files with 415 additions and 1 deletion.
diff --git a/Existing_API_Collection/GeoAPI/README.md b/Existing_API_Collection/GeoAPI/README.md
@@ -0,0 +1,124 @@
+# GeoAPI
+
+GeoAPI is a simple RESTful API that allows you to convert addresses to geographic coordinates (latitude and longitude) and vice versa. This API is built using Node.js and Express.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Endpoints](#endpoints)
+- [Example Requests](#example-requests)
+- [Contributing](#contributing)
+
+## Overview
+
+GeoAPI provides an easy way to work with geographic data. You can use it to:
+- Convert a physical address into geographic coordinates (latitude and longitude).
+- Convert geographic coordinates into a human-readable address.
+
+## Features
+
+- Convert address to latitude and longitude.
+- Convert latitude and longitude to an address.
+- Easy to use RESTful API.
+
+## Installation
+
+1. **Clone the repository:**
+   ```bash
+   git clone https://github.com/Suyash878/GeoAPI.git
+   cd geoapi
+   ```
+
+2. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+3. **Start the server:**
+   ```bash
+   npm start
+   ```
+   The server will start on port 3000 by default. You can access it at `http://localhost:3000`.
+
+## Usage
+```bash
+curl -X GET "http://your-deployed-url.com/reverse-geocode?lat=37.4224764&lon=-122.0842499"
+
+curl -X GET "http://your-deployed-url.com/geocode?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA"
+```
+## Endpoints
+
+**Endpoint:** `/geocode`
+
+**Method:** `GET`
+
+**Description:** Converts an address to latitude and longitude coordinates.
+
+**Query Parameters:**
+- `address` (required): The address you want to geocode.
+
+**Endpoint:** `/reverse-geocode`
+
+**Method:** `GET`
+
+**Description:** Converts latitude and longitude coordinates to a human-readable address.
+
+**Query Parameters:**
+- `lat` (required): The latitude coordinate.
+- `lon` (required): The longitude coordinate.
+
+## Example Requests
+
+GET http://your-deployed-url.com/geocode?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA.
+
+```json
+{
+    "latitude": "37.4224764",
+    "longitude": "-122.0842499"
+}
+```
+GET http://your-deployed-url.com/reverse-geocode?lat=37.4224764&lon=-122.0842499
+```json
+{
+    "address": "1600 Amphitheatre Parkway, Mountain View, CA 94043, USA"
+}
+```
+## Contributing
+
+Contributions are welcome! Please follow these steps if you have any improvements or new features to suggest:
+
+### Step 1: Fork the Repository
+
+1. Navigate to the [GeoAPI repository](https://github.com/dishamodi0910/APIVerse.git) on GitHub.
+2. Click the "Fork" button in the top right corner to create a copy of the repository on your own GitHub account.
+
+### Step 2: Clone Your Fork
+
+1. Open your terminal or command prompt.
+2. Clone your forked repository to your local machine:
+   ```bash
+   git clone https://github.com/your-username/geoapi.git
+   ```
+
+### Step 3: Commit Your Changes
+
+```bash
+git add .
+git commit -m "Description of your changes"
+```
+
+### Step 4: Push Your Changes
+
+```bash
+git push origin master
+```
+
+### Step 5: Open a Pull Request
+
+Navigate to the [GeoAPI repository](https://github.com/dishamodi0910/APIVerse.git) on GitHub and click on the "New pull request" button to submit your changes for review.
+
+Thank you for contributing to GeoAPI!
+
diff --git a/Existing_API_Collection/GeoAPI/public/index.htm b/Existing_API_Collection/GeoAPI/public/index.htm
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>geoCode</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
+</head>
+<body>
+
+<div id="main">
+    <div class="overlay"></div>
+    <div id="title">Geo-Place</div>
+    <div id="sub-headings">
+        <li>Empowering Precision: GeoPlace for Seamless Location Solutions.</li>
+        <div id = "empty">
+
+        </div>
+
+        <hr>
+    </div>
+    <div id="container">
+        <div id="option1">
+            Option-1
+            <div id="input1">
+                <input id="box1" placeholder="Enter the Address" type="text">
+                <button id="get-coordinates">Get coordinates</button>
+            </div>
+        </div>
+        <div id="option2">
+            Option-2
+            <div id="input2">
+                <input id="box2" placeholder="Enter coordinates (latitude, longitude)" type="text">
+                <button id="get-address">Get Address</button>
+            </div>
+        </div>
+
+    </div>
+    <div id="result"></div>
+
+</div>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/GeoAPI/public/nasa-Q1p7bh3SHj8-unsplash.jpg b/Existing_API_Collection/GeoAPI/public/nasa-Q1p7bh3SHj8-unsplash.jpg
diff --git a/Existing_API_Collection/GeoAPI/public/script.js b/Existing_API_Collection/GeoAPI/public/script.js
@@ -0,0 +1,34 @@
+document.getElementById('get-coordinates').addEventListener('click', async function () {
+    const address = document.getElementById('box1').value;
+    try {
+        const response = await fetch(`http://localhost:3000/geocode?address=${encodeURIComponent(address)}`);
+        if (response.ok) {
+            const data = await response.json();
+            document.getElementById('result').innerHTML = `Latitude: ${data.latitude}, Longitude: ${data.longitude}`;
+        } else {
+            document.getElementById('result').innerHTML = 'Address not found';
+        }
+    } catch (error) {
+        document.getElementById('result').innerHTML = 'Error fetching the coordinates';
+        console.error('Error:', error);
+    }
+});
+
+document.getElementById('get-address').addEventListener('click', async function () {
+    const coordinates = document.getElementById('box2').value.split(',');
+    const lat = coordinates[0].trim();
+    const lon = coordinates[1].trim();
+
+    try {
+        const response = await fetch(`http://localhost:3000/reverse-geocode?lat=${lat}&lon=${lon}`);
+        if (response.ok) {
+            const data = await response.json();
+            document.getElementById('result').innerHTML = `Address: ${data.address}`;
+        } else {
+            document.getElementById('result').innerHTML = 'Coordinates not found';
+        }
+    } catch (error) {
+        document.getElementById('result').innerHTML = 'Error fetching the address';
+        console.error('Error:', error);
+    }
+});
diff --git a/Existing_API_Collection/GeoAPI/public/style.css b/Existing_API_Collection/GeoAPI/public/style.css
@@ -0,0 +1,139 @@
+* {
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
+    font-family: "Ubuntu Sans", sans-serif;
+    font-optical-sizing: auto;
+}
+
+#main {
+    position: relative;
+    background-image: url(nasa-Q1p7bh3SHj8-unsplash.jpg);
+    height: 100vh;
+    width: 100vw;
+    background-size: cover;
+    border: 4px solid rgb(5, 5, 5);
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.575); /* Adjust the opacity as needed */
+    z-index: 1;
+}
+
+#title, #sub-headings, #container, #result {
+    position: relative;
+    z-index: 2;
+}
+
+#empty {
+    height: 20px;
+}
+
+#title {
+    color: white;
+    font-size: 500%;
+    height: 12vh;
+    width: 100vw;
+    padding-left: 30px;
+    padding-top: 20px;
+}
+
+#title:hover, #sub-headings:hover {
+    color: rgb(10, 236, 187);
+}
+
+#sub-headings {
+    height: 10vh;
+    font-size: 150%;
+    color: white;
+    padding-left: 30px;
+    padding-bottom: 10px;
+}
+
+#container {
+    padding-top: 100px;
+    height: 78vh;
+    width: 100vw;
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#option1, #option2 {
+    color: white;
+    font-size: 300%;
+    padding-left: 40px;
+    padding-top: 40px;
+    padding-right: 20px;
+    height: 55%;
+    width: 30vw;
+    margin-left: auto;
+    margin-right: auto;
+    justify-content: center;
+    align-items: center;
+}
+
+#option1:hover, #option2:hover
+{
+    color: aqua;
+}
+#get-address, #get-coordinates {
+    width: 50%;
+    height: 25px;
+    font-size: 40%;
+    border-radius: 7px;
+}
+
+.buttons button {
+    padding: 20px; /* Increase padding to make the button bigger */
+    font-size: 20px; /* Increase font size to make the text bigger */
+    width: 65%;
+    height: 20%;
+    border-radius: 10px;
+}
+
+#input1, #input2 {
+    width: 100%;
+}
+
+#result {
+    font-style: italic;
+    color: black;
+    /* background: black; */
+    height: 150px;
+    width: 100vw;
+    padding-left: 50px;
+    font-size: 225%;
+}
+
+#box1, #box2 {
+    border: 4px solid black;
+    border-radius: 8px;
+    height: 35px;
+    width: 95%;
+    font-size: 25px; /* Adjust font size as needed */
+    padding: 5px; /* Adjust padding as needed */
+}
+
+#get-address,#get-coordinates{
+    padding: 20px;
+    font-size: 20px;
+    width: 60%;
+    height: 20%;
+    border-radius: 10px;
+    background-color: #4cafa7;
+    color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+#get-coordinates:hover,#get-address:hover{
+    transform: scale(1.1);
+    background-color: rgb(102, 170, 247);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}