hackcbs/nearest.html at main · jainpawan21/hackcbs · GitHub

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
148
149
150
151
152
<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="zxx">

	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>MedicoBot by Team Error404
		</title>
		<!-- Template CSS -->
		<link rel="stylesheet" href="assets/css/style-starter.css">
		<!-- Template CSS -->
		<link href="//fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700&display=swap" rel="stylesheet">
		<!-- Template CSS -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<script
			src="https://apis.mapmyindia.com/advancedmaps/v1/jgapt8g783ryybjqhoiddci24j36ajot/map_load?v=1.3"></script>
		</script>
		<!-- <script src="assets/js/mapMyIndia.js">

		</script> -->
		<!-- <script src="assets/js/nearestDoctor.js"></script> -->
		<style>
			html,
			body,
			#map {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}

			.info_css {
				color: #000;
				text-decoration: none;
				background-color: #fff;
				width: 270px;
				padding: 5px;
				font-size: 12px;
			}

			div.header {
				position: relative;
				background-color: #191919;
				color: #fff;
				line-height: 20px;
				font-size: 13px;
				vertical-align: middle;
				padding: 5px 35px 5px 5px;
			}

		</style>
	</head>

	<body>
		<div id="map"></div>;
		<script>
			var create_content = function (first, second, third, fourth) {
				var h = new Array();
				h.push("<div>");
				h.push("<div class=\"info_css\">");
				h.push("<span>");
				h.push(`<b>Sr No.</b>: ${fourth}`);
				h.push("</span> ");
				h.push("</div>");
				h.push("<div class=\"info_css\">");
				h.push("<span>");
				h.push(`<b>Health Facility Name</b>: ${first}`);
				h.push("</span> ");
				h.push("</div>");
				h.push("<div class=\"info_css\">");
				h.push(`<b>Tehsil Name</b>: ${second}`);
				h.push("</div>");
				h.push("<div class=\"info_css\">");
				h.push("<span>");
				h.push(`<b>District Name</b>: ${third}`);
				h.push("</span> ");
				h.push("</div>");
				h.push("</div>");
				return h.join("");
			};
			var lat, long, token;
			function geolocate() {
				if (window.navigator && window.navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(
						onGeolocateSuccess,
						onGeolocateError
					);
				}
			}
			async function onGeolocateSuccess(coordinates) {
				const { latitude, longitude } = coordinates.coords;
				lat = latitude;
				long = longitude;
				console.log("Found coordinates: ", latitude, longitude);
				var map = new MapmyIndia.Map("map", { center: [lat, long], zoomControl: true, hybrid: true });
				L.marker([lat, long]).addTo(map);
				const hospital = await fetch(`https://fierce-crag-87115.herokuapp.com/location/${lat},${long}`)
				const hospitalData = await hospital.json()
				console.log(hospitalData)
				var mk = await L.marker([hospitalData.latitude, hospitalData.longitude], { title: hospitalData["SrNo"] })
				await map.addLayer(mk);
				var content = await create_content(hospitalData["Health Facility Name"], hospitalData["Taluka_Name"], hospitalData["District_Name"], hospitalData["SrNo"]);
				await mk.bindPopup(content);
				await mk.openPopup();

			}

			function onGeolocateError(error) {
				var map = new MapmyIndia.Map("map", { center: [29.1393, 76.6945], zoomControl: true, hybrid: true });
				L.marker([29.1393, 76.6945]).addTo(map);

				if (error.code === 1) {
					alert('Please Allow Location Access')
				} else if (error.code === 2) {
					alert("Please Allow Location Access");
				} else if (error.code === 3) {
					alert("Please Allow Location Access");
				}
			}
			geolocate();
		</script> -->

	</body>

</html>

<script src="assets/js/jquery-3.3.1.min.js"></script>

<script>
	$(function () {
		$('.navbar-toggler').click(function () {
			$('body').toggleClass('noscroll');
		})
	});
</script>
<!--/scroll-down-JS-->
<!-- stats -->
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.countup.js"></script>
<script>
	$('.counter').countUp();
</script>
<!-- //stats -->
<!-- //script -->

<script src="assets/js/bootstrap.min.js"></script>