1 <html>
2 <?php
3 $servername="localhost";
4 $username="root";
5 $password="";
6 $database="product1";
7 $conn=mysqli_connect($servername,$username,$password,$database);
8 if(!$conn){
9 die("Sorry we failed to connect: ".mysqli_connect_error());
10
11 }
12 $sql="SELECT lattitude FROM `item1` WHERE S_no=1;";
13 $result=mysqli_query($conn,$sql);
14
15 $num= mysqli_num_rows($result);
16
17
18 if($num>0){
19 while($row=mysqli_fetch_assoc($result)){
20 $lat= $row["lattitude"];
21 }
22 $conn->close();
23 ?>
24 <script >
25 mapboxgl.accessToken = 'pk.eyJ1IjoiYWtzaGl0Y2hhcHJvdCIsImEiOiJjazYwYzU1b2IwNjExM2xzNmtsbWxxNnJ3In0.OvuCCyqVi9T5PYORKfUz4w';
26 var map = new mapboxgl.Map({
27 container: 'map',
28 style: 'mapbox://styles/mapbox/streets-v10',
29 center: [75.857727, 22.719568],
30 zoom: 12
31 });
32
33 var bounds = [[70, 19], [80, 27]];
34 map.setMaxBounds(bounds);
35
36
37 var canvas = map.getCanvasContainer();
38
39
40
41 var start = [75.857727, 22.719568];
42
43
44
45
46 function getRoute(end)
47 {
48
49
50
51 var start = [75.857727, 22.719568];
52 var url = 'https://api.mapbox.com/directions/v5/mapbox/driving/' + start[0] + ',' + start[1] + ';' + end[0] + ',' + end[1] + '?steps=true&geometries=geojson&access_token=' + mapboxgl.accessToken;
53
54
55 var req = new XMLHttpRequest();
56 req.open('GET', url, true);
57 req.onload = function() {
58 var json = JSON.parse(req.response);
59 var data = json.routes[0];
60 var route = data.geometry.coordinates;
61 var geojson = {
62 type: 'Feature',
63 properties: {},
64 geometry: {
65 type: 'LineString',
66 coordinates: route
67 }
68 };
69
70 if (map.getSource('route')) {
71 map.getSource('route').setData(geojson);
72 } else {
73 map.addLayer({
74 id: 'route',
75 type: 'line',
76 source: {
77 type: 'geojson',
78 data: {
79 type: 'Feature',
80 properties: {},
81 geometry: {
82 type: 'LineString',
83 coordinates: geojson
84 }
85 }
86 },
87 layout: {
88 'line-join': 'round',
89 'line-cap': 'round'
90 },
91 paint: {
92 'line-color': '#3887be',
93 'line-width': 5,
94 'line-opacity': 0.75
95 }
96 });
97 }
98
99
100
101 var instructions = document.getElementById('instructions');
102 var steps = data.legs[0].steps;
103
104 var tripInstructions = [];
105 for (var i = 0; i < steps.length; i++) {
106 tripInstructions.push('<br><li>' + steps[i].maneuver.instruction) + '</li>';
107 instructions.innerHTML = '<br>Trip duration: ' + Math.floor(data.duration / 60) + ' min 🚴 ' + tripInstructions;
108 }
109 };
110 req.send();
111 }
112
113 map.on('load', function() {
114
115
116 getRoute(start);
117
118
119 map.addLayer({
120 id: 'point',
121 type: 'circle',
122 source: {
123 type: 'geojson',
124 data: {
125 type: 'FeatureCollection',
126 features: [{
127 type: 'Feature',
128 properties: {},
129 geometry: {
130 type: 'Point',
131 coordinates: start
132 }
133 }
134 ]
135 }
136 },
137 paint: {
138 'circle-radius': 10,
139 'circle-color': '#3887be'
140 }
141 });
142
143
144
145 var coords =[
146 <?php
147 echo $lat;
148 ?>,
149 <?php
150 echo "22.797";
151 ?>
152
153 ];
154 var end = {
155 type: 'FeatureCollection',
156 features: [{
157 type: 'Feature',
158 properties: {},
159 geometry: {
160 type: 'Point',
161 coordinates: coords
162 }
163 }
164 ]
165 };
166 if (map.getLayer('end')) {
167 map.getSource('end').setData(end);
168 } else {
169 map.addLayer({
170 id: 'end',
171 type: 'circle',
172 source: {
173 type: 'geojson',
174 data: {
175 type: 'FeatureCollection',
176 features: [{
177 type: 'Feature',
178 properties: {},
179 geometry: {
180 type: 'Point',
181 coordinates: coords
182 }
183 }]
184 }
185 },
186 paint: {
187 'circle-radius': 10,
188 'circle-color': '#f30'
189 }
190 });
191 }
192 getRoute(coords);
193
194 });
195
196 </script>
197 </html>
What I have tried:
tried a lot still getting same error