forked from Lokesh-malviya/Tester_Sarkari.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmap.html
More file actions
147 lines (119 loc) · 6.83 KB
/
map.html
File metadata and controls
147 lines (119 loc) · 6.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo: Route avoidance with the Directions API and Turf.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" rel="stylesheet">
<!-- Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css"
rel="stylesheet"
/>
<!-- Mapbox GL Directions -->
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css"
type="text/css"
/>
<!-- Turf & Polyline -->
<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.1.1/polyline.js"></script>
</head>
<body>
<dialog id="myDialog">Profile<span id="username"></span><span class="iconify" id = "cross"onclick="exi()" data-icon="emojione-v1:cross-mark"></span></dialog>
<div class="white" >
<h4>SARKARI</h4>
<a href="#" onclick="pops()" ><span class="iconify" data-icon="flat-color-icons:settings" style="color: #4ecb71;"></span></a>
<div id="map"></div>
<h3>Route Detail</h3>
<div class="card" id="Cr">
<span class="iconify" id = "icon1" data-icon="ci:dot-03-m" style="color: #0b8358;"></span>
<span class="iconify" id = "icon2" data-icon="ci:line-xl" style="color: #0b8358;"></span>
<span class="iconify" id = "icon3" data-icon="ci:dot-03-m" style="color: #0b8358;"></span>
<form>
<input type="text" id="Latitude" name="Place" placeholder="Location">
<input type="text" id="Destination" name="Place" placeholder="Destination">
</form>
<button onclick="myFunction()">Find</button>
</div>
</div>
<script >
var x = document.getElementById("myDialog");
var names = sessionStorage.getItem("names");
var photo = sessionStorage.getItem("photo");
console.log(photo);
document.getElementById("username").innerHTML = `<img src=${photo} style=\"position:absolute;left:32%;top:15%;border-radius:100%;width:35%\">`+"<h3 style=\"position:absolute;left:28%;top:43%;\">"+names+"</h3>"+"<button style=\"left:11%;background-color:#F15A25;cursor: pointer;\" onclick=\"change()\" >Log out</button>";
function pops(){
x.show();
}
function exi(){
x.close();
}
function change(){
location.replace("index1.html")
}
/* map acticity*/
mapboxgl.accessToken = 'pk.eyJ1IjoibG9rZXNoLW1hbHZpeWEiLCJhIjoiY2t5ZzJhOXNhMW80bTJwbzh4aWZ5MWdzMSJ9.PglR7dfI3wqJnSG8Jy9D0w';
const map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/navigation-night-v1',
center: [79.1437,21.1955], // starting position
zoom: 11 // starting zoom
});
const directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
unit: 'metric',
profile: 'mapbox/driving',
alternatives: 'false',
geometries: 'geojson'
});
map.scrollZoom.enable();
map.addControl(directions, 'bottom-left');
function myFunction()
{ let text1 = "MH 12 SA ";
var Loc = document.getElementById("Latitude").value;
var Det = document.getElementById("Destination").value;
const bus = [];
console.log(Loc);
var result = Loc.toLowerCase();
var dest = Det.toLowerCase();
var mydata = {
"MH 12 SA 4623":{
Route:["kamptee","asha hospital","orange city","delhi public school","Khari","naglok","bhilgaon","naka no 2","uppalwadi","pili nadi","automotive","teka naka","indora","kadbi chowk","gurudwara","gaddi godam","lic","reserve bank","burdi"]
},
"MH 40 DM 9968":{
Route:["kamptee","asha hospital","orange city","delhi public school","Khari","naglok","bhilgaon","naka no 2","uppalwadi","pili nadi","automotive","teka naka","indora","kadbi chowk","gurudwara","gaddi godam","lic","reserve bank","burdi"]
},
"MH 12 SA 6668":{
Route:["kamptee","asha hospital","orange city","delhi public school","Khari","naglok","bhilgaon","naka no 2","uppalwadi","pili nadi","automotive","teka naka","indora","kadbi chowk","gurudwara","gaddi godam","lic","reserve bank","burdi"]
}
}
var ans = 0;
for(var key in mydata){
/*console.log(key);
console.log(mydata[key].Route);*/
for(var i in mydata[key].Route){
if(mydata[key].Route[i] == result){
ans = 1;
}
if(mydata[key].Route[i] == dest){
ans = 2;
}
}
if(ans == 2){
bus.push(key)
console.log(bus);
}
else{
console.log("No bus");
}
}
document.getElementById("Cr").innerHTML = "<div style=\"background-color: #fff; border: 2px solid #090808; position:absolute; top: 15%;left: 3%; width : 98%; height : 15%; border-radius: 4px; \"></div>"+"<span class=\"iconify\" data-icon=\"emojione:oncoming-bus\" style=\"font-size: 45px; color: #4ecb7; position:absolute;top: 18%;left: 5%;\"></span>"+"<h4 style=\"color: #000000; position:absolute;top: 17%;left: 26%;\">"+bus[0]+"<br/>"+"<span style=\"font-size: 15px;\">"+Loc+"-"+Det+"</span></h4>"+"<div style=\"background-color: #fff; border: 2px solid #090808; position:absolute; top: 31%;left: 3%; width : 98%; height : 15%; border-radius: 4px; \"></div>"+"<span class=\"iconify\" data-icon=\"emojione:oncoming-bus\" style=\"font-size: 45px; color: #4ecb7; position:absolute;top: 33%;left: 5%;\"></span>"+"<h4 style=\"color: #000000; position:absolute;top: 32%;left: 26%;\">"+bus[1]+"<br/>"+"<span style=\"font-size: 15px;\">"+Loc+"-"+Det+"</span></h4>"+"<div style=\"background-color: #fff; border: 2px solid #090808; position:absolute; top: 47%;left: 3%; width : 98%; height : 15%; border-radius: 4px; \"></div>"+"<span class=\"iconify\" data-icon=\"emojione:oncoming-bus\" style=\"font-size: 45px; color: #4ecb7; position:absolute;top: 49%;left: 5%;\"></span>"+"<h4 style=\"color: #000000; position:absolute;top: 48%;left: 26%;\">"+bus[2]+"<br/>"+"<span style=\"font-size: 15px;\">"+Loc+"-"+Det+"</span></h4>"+"<div style=\"background-color: #fff; border: 2px solid #090808; position:absolute; top: 64%;left: 3%; width : 98%; height : 15%; border-radius: 4px; \"></div>"+"<span class=\"iconify\" data-icon=\"emojione:oncoming-bus\" style=\"font-size: 45px; color: #4ecb7; position:absolute;top: 66%;left: 5%;\"></span>"+"<h4 style=\"color: #000000; position:absolute;top: 65%;left: 26%;\">"+bus[2]+"<br/>"+"<span style=\"font-size: 15px;\">"+Loc+"-"+Det+"</span></h4>";
}
</script>
<script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>
</body>
</html>