GeoQuesters

GeoQuesters/Readme.md

@@ -0,0 +1,91 @@
+# Traffic-routing-and-navigation
+
+Team Name - GeoQuesters
+
+Problem Statement - Traffic Aware Routing and Navigation
+
+Team Leader Email - [email protected]
+
+A Brief of the Prototype:
+The Traffic-Aware Routing and Navigation App is a web-based or mobile application that allows users to efficiently plan routes and navigate through various locations while considering real-time traffic conditions. The application offers the following features:
+
+Mapping and Location Services: Users can view maps that display their current location, destination, and nearby points of interest. The map provides a visual interface for route planning and navigation.
+
+Route Planning: Users can input their desired starting and ending locations, and the application calculates the optimal route based on factors such as distance, travel time, and real-time traffic conditions. The app can provide turn-by-turn directions.
+
+Alternate Route Suggestions: In addition to the primary route, the app offers alternate route suggestions, allowing users to explore different paths to reach their destination, which can be helpful in avoiding traffic jams or road closures.
+
+Satellite View: Users can toggle between map and satellite views to get a better understanding of the terrain and surroundings, which can be particularly useful for outdoor or off-road navigation.
+
+Search and Location-Based Services: Users can search for specific locations, businesses, or landmarks and get information about them. The application may provide additional details such as contact information and user reviews.
+
+Tech Stack:
+Frong-End, Back-End, Mapbox API,Google Maps API
+
+Step-by-Step Code Execution Instructions:
+Step 1: Project Setup
+
+Set up a new project directory.
+Create an HTML file (index.html), a CSS file (styles.css), and a JavaScript file (app.js) within the project directory.
+Download and include the Leaflet.js library in your project.
+Step 2: Basic HTML Structure
+
+Create the basic structure for your HTML file, including the head and body sections.
+Include links to your CSS and JavaScript files within the HTML.
+Step 3: Create a Map Container
+
+In your HTML, create a <div> element with an id (e.g., "map") to serve as the container for your map.
+Step 4: Styling with CSS
+
+Style your HTML elements using CSS. You can define styles for the map container, buttons, and other UI elements.
+Step 5: Initialize the Map
+
+In your JavaScript file (app.js), initialize the map using the Leaflet.js library.
+Set the initial view, center coordinates, and zoom level.
+Step 6: Add Map Tiles
+
+Configure and add a base tile layer to your map. You can use Mapbox, OpenStreetMap, or other providers.
+Step 7: User Input and Geocoding
+
+Create input fields for users to specify start and end locations.
+Implement code to convert user-provided locations to geographic coordinates using a geocoding service.
+Step 8: Calculate Routes
+
+Implement code to calculate routes between the specified start and end locations.
+You can use a routing service, such as the Mapbox Directions API or a similar service.
+Step 9: Display Routes on the Map
+
+Display the calculated routes on the map using polylines.
+Add markers to indicate the start and end points.
+Step 10: Toggle Satellite View (Optional)
+
+Implement a button or UI element that allows users to switch between map and satellite views.
+
+Future Scope:
+The Traffic-Aware Routing and Navigation project has a significant future scope, especially as technology and transportation continue to evolve. Some potential areas for expansion and improvement include:
+
+Real-Time Data Integration: Incorporating more real-time data sources, such as live traffic, weather conditions, and road closures, to provide users with up-to-the-minute information for route planning.
+
+Machine Learning and AI: Implementing machine learning and artificial intelligence algorithms to enhance route predictions and provide personalized recommendations based on user preferences and historical data.
+
+User Community and Social Features: Allowing users to share routes, traffic updates, and reviews, creating a social network aspect within the app for a more collaborative and engaging experience.
+
+Public Transportation Integration: Including public transportation options (e.g., buses, subways, trains) within route planning to offer a seamless multi-modal travel experience.
+
+Voice and Hands-Free Navigation: Enabling voice-guided navigation and hands-free operation, particularly useful for in-car systems, with features such as voice recognition.
+
+Environmental Considerations: Providing eco-friendly route options, factoring in environmental impact and fuel efficiency for users who want to minimize their carbon footprint.
+
+IoT Integration: Integrating with Internet of Things (IoT) devices and smart vehicles to provide real-time diagnostics and vehicle-to-vehicle communication for safer and more efficient travel.
+
+Global Expansion: Expanding beyond specific cities or regions to provide routing and navigation solutions on a global scale.
+
+Accessibility Features: Enhancing the app's accessibility features to ensure it is usable by a wide range of users, including those with disabilities.
+
+Augmented Reality Navigation: Implementing augmented reality features to overlay navigation information onto the user's real-world view for more intuitive guidance.
+
+Offline Mode: Developing an offline mode that allows users to access maps and navigation features without a constant internet connection.
+
+Commercial Use: Offering premium or business versions of the app for commercial use, such as delivery and logistics companies, with advanced routing and fleet management capabilities.
+
+Personalization: Providing highly personalized experiences based on user habits, preferences, and historical data, with features like favorite routes and frequent destination suggestions.

GeoQuesters/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js'></script>
+    <link href='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css' rel='stylesheet' />
+    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>
+    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css" type="text/css"> 
+<title>Mapable</title>
+<style>
+  body{
+    margin:0 ;
+  }
+  #map{
+    height: 100vh ;
+    width: 100vw ;
+  }
+</style>
+<!-- defer -> so it loads after the body -->
+<script src="script.js" defer></script>
+</head>
+<body>
+    <div id='map'></div>
+</body>
+</html>

GeoQuesters/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "mapable",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+      "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "",
+    "license": "ISC"
+  }
+

GeoQuesters/script.js

@@ -0,0 +1,34 @@
+mapboxgl.accessToken = 
+ 'pk.eyJ1IjoiYXRvbWljZXJyb3JzIiwiYSI6ImNrdXd3ZGs2NjIxZHUydWxucnB6eXg2MDAifQ.deRMw8xzRpHMT_ScmjZpSw';
+
+navigator.geolocation.getCurrentPosition(successLocation, 
+    errorLocation, {
+        enableHighAccuracy: true
+})
+
+
+function successLocation(position){
+    // in mapbox, longitude is taken before latitude
+    setupMap([position.coords.longitude, position.coords.latitude]) 
+}
+
+function errorLocation(){
+    setupMap([-2.24, 53.48])
+}
+
+function setupMap(center){
+    const map = new mapboxgl.Map({
+        container: 'map',
+        style: 'mapbox://styles/mapbox/streets-v11',
+        center: center,
+        zoom: 15
+    })
+
+    map.addControl(new mapboxgl.NavigationControl());
+
+    var directions = new MapboxDirections({
+        accessToken: mapboxgl.accessToken
+    });
+
+    map.addControl(directions, 'top-left');
+}