Added Mapable

bislara · Oct 22, 2021 · d3fa015 · d3fa015
1 parent 4afb915
commit d3fa015
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 0 deletions.
diff --git a/JavaScript/Mapable/README.md b/JavaScript/Mapable/README.md
@@ -0,0 +1,9 @@
+**Mapable**
+
+Mapable is map based application built using html, css and javascript along with mapbox API. One can find real time traffic details over the route. it can also find the best route between source point and destination point via cycling, walking or driving.
+
+Here's a screenshot of the application:
+
+![Screenshot](https://user-images.githubusercontent.com/54570007/138435338-8ba24b11-eca8-4ee2-8860-4952834706f3.png)
+
+[Author: ]: https://github.com/atom19-i
diff --git a/JavaScript/Mapable/index.html b/JavaScript/Mapable/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>
diff --git a/JavaScript/Mapable/script.js b/JavaScript/Mapable/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');
+}