From 08d7f68dfcbcf9b57619bef3b58590e68c289ba2 Mon Sep 17 00:00:00 2001
From: Revanth <109272714+revanth1718@users.noreply.github.com>
Date: Fri, 9 Aug 2024 21:39:46 +0530
Subject: [PATCH 1/2] Mapbox API
---
New_APIs/Mapbox API/index.html | 24 ++++++++++
New_APIs/Mapbox API/index.js | 33 +++++++++++++
New_APIs/Mapbox API/package-lock.json | 13 +++++
New_APIs/Mapbox API/package.json | 15 ++++++
New_APIs/Mapbox API/server.js | 8 ++++
New_APIs/Mapbox API/style.css | 69 +++++++++++++++++++++++++++
6 files changed, 162 insertions(+)
create mode 100644 New_APIs/Mapbox API/index.html
create mode 100644 New_APIs/Mapbox API/index.js
create mode 100644 New_APIs/Mapbox API/package-lock.json
create mode 100644 New_APIs/Mapbox API/package.json
create mode 100644 New_APIs/Mapbox API/server.js
create mode 100644 New_APIs/Mapbox API/style.css
diff --git a/New_APIs/Mapbox API/index.html b/New_APIs/Mapbox API/index.html
new file mode 100644
index 0000000..89ad308
--- /dev/null
+++ b/New_APIs/Mapbox API/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ Mapbox Explorer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/New_APIs/Mapbox API/index.js b/New_APIs/Mapbox API/index.js
new file mode 100644
index 0000000..487136c
--- /dev/null
+++ b/New_APIs/Mapbox API/index.js
@@ -0,0 +1,33 @@
+mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // Replace with your Mapbox Access Token
+
+const map = new mapboxgl.Map({
+ container: 'map',
+ style: 'mapbox://styles/mapbox/streets-v11',
+ center: [-74.5, 40], // Default center [longitude, latitude]
+ zoom: 9 // Default zoom level
+});
+
+document.getElementById('searchButton').addEventListener('click', () => {
+ const location = document.getElementById('locationInput').value;
+ geocodeLocation(location);
+});
+
+function geocodeLocation(location) {
+ const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(location)}.json?access_token=${mapboxgl.accessToken}`;
+
+ fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ if (data.features && data.features.length > 0) {
+ const coordinates = data.features[0].geometry.coordinates;
+ map.flyTo({ center: coordinates, zoom: 12 });
+ new mapboxgl.Marker().setLngLat(coordinates).addTo(map);
+ } else {
+ alert('Location not found');
+ }
+ })
+ .catch(error => {
+ console.error('Error fetching location:', error);
+ alert('Failed to fetch location.');
+ });
+}
diff --git a/New_APIs/Mapbox API/package-lock.json b/New_APIs/Mapbox API/package-lock.json
new file mode 100644
index 0000000..f332bd5
--- /dev/null
+++ b/New_APIs/Mapbox API/package-lock.json
@@ -0,0 +1,13 @@
+{
+ "name": "mapbox-explorer",
+ "version": "1.0.0",
+ "lockfileVersion": 1,
+ "requires": true,
+ "dependencies": {
+ "express": {
+ "version": "4.17.1",
+ "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+ "integrity": "sha512-G7fYv8zS0D7ftu3gnLsOniwhgLU4k9v+1NEtFPP07/Oa8XJ51FtdUKLqIvsTcZo5ua23NO4s9Hr77BM19DOf1g=="
+ }
+ }
+}
diff --git a/New_APIs/Mapbox API/package.json b/New_APIs/Mapbox API/package.json
new file mode 100644
index 0000000..3563fef
--- /dev/null
+++ b/New_APIs/Mapbox API/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "mapbox-explorer",
+ "version": "1.0.0",
+ "description": "A simple app to explore locations using the Mapbox API",
+ "main": "server.js",
+ "scripts": {
+ "start": "node server.js"
+ },
+ "author": "Your Name",
+ "license": "ISC",
+ "dependencies": {
+ "express": "^4.17.1",
+ "mapbox-explorer": "file:"
+ }
+}
diff --git a/New_APIs/Mapbox API/server.js b/New_APIs/Mapbox API/server.js
new file mode 100644
index 0000000..74380f6
--- /dev/null
+++ b/New_APIs/Mapbox API/server.js
@@ -0,0 +1,8 @@
+const express = require('express');
+const app = express();
+
+app.use(express.static('public'));
+
+app.listen(3000, () => {
+ console.log('Server is running on port 3000');
+});
diff --git a/New_APIs/Mapbox API/style.css b/New_APIs/Mapbox API/style.css
new file mode 100644
index 0000000..0c86612
--- /dev/null
+++ b/New_APIs/Mapbox API/style.css
@@ -0,0 +1,69 @@
+body {
+ font-family: 'Arial', sans-serif;
+ background: linear-gradient(135deg, #1e3c72, #c5573b);
+ color: #fff;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ margin: 0;
+}
+
+header {
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+header h1 {
+ font-size: 3em;
+ color: #fff;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
+}
+
+main {
+ width: 90%;
+ max-width: 1000px;
+ height: 80%;
+ position: relative;
+}
+
+#map {
+ width: 100%;
+ height: 100%;
+ border-radius: 10px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.controls {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+}
+
+.controls input {
+ padding: 10px;
+ font-size: 1em;
+ border: none;
+ border-radius: 5px;
+ width: 200px;
+ outline: none;
+}
+
+.controls button {
+ padding: 10px 15px;
+ font-size: 1em;
+ background-color: #444;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.controls button:hover {
+ background-color: #666;
+}
From 15715de22d82529ca1a4bf2d497e1ce6ae4651eb Mon Sep 17 00:00:00 2001
From: Revanth <109272714+revanth1718@users.noreply.github.com>
Date: Sat, 10 Aug 2024 01:12:56 +0530
Subject: [PATCH 2/2] Create README.md
---
New_APIs/Mapbox API/README.md | 30 ++++++++++++++++++++++++++++++
1 file changed, 30 insertions(+)
create mode 100644 New_APIs/Mapbox API/README.md
diff --git a/New_APIs/Mapbox API/README.md b/New_APIs/Mapbox API/README.md
new file mode 100644
index 0000000..eab6875
--- /dev/null
+++ b/New_APIs/Mapbox API/README.md
@@ -0,0 +1,30 @@
+# 🗺️ Mapbox API
+
+## Overview
+
+The **Mapbox API** offers customizable and scalable map services, including real-time traffic data, geocoding, and advanced map visualizations. It is useful for integrating location-based services into your applications with rich map functionalities and interactive features.
+
+## Features
+
+- **Customizable Maps**: Create and style maps to fit the design of your application.
+- **Real-Time Traffic Data**: Access up-to-date traffic information for better route planning.
+- **Geocoding**: Convert addresses into geographic coordinates and vice versa.
+- **Advanced Map Visualizations**: Display various data layers and visualizations on the map.
+- **Routing**: Calculate and display routes with options for different travel modes.
+
+## Getting Started
+
+### Prerequisites
+
+- **Mapbox Access Token**: You need to sign up for a Mapbox account and obtain an access token. You can get your access token by visiting the [Mapbox account page](https://account.mapbox.com/).
+
+### Installation
+
+To use the Mapbox API in a Node.js application, you can use the `mapbox-gl` library for map visualization and `node-fetch` for making HTTP requests:
+
+```bash
+npm install mapbox-gl node-fetch
+```
+
+## Contributed by
+### Revanth