How To Use MapBox For Web | AV Coding
Hey guys welcome to AV Coding
Today we will learn how to use Mapbox in web applications for navigation and dynamic markers.
Mapbox Documentation Link :- https://docs.mapbox.com/api/
<?php
$server ="localhost";
$user="root";
$password="";
$db="sgc11";
$conn = mysqli_connect($server,$user,$password,$db);
?>
<?php
$id = $_GET['id'];
$query = 'SELECT * FROM sgc12 WHERE ID = '.$id;
$select_customers = mysqli_query($conn, $query);
while($row = mysqli_fetch_assoc($select_customers))
{
$longitude = $row['longitude'];
$latitude = $row['latitude'];
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Get driving directions from one location to another</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; height: 100%}
</style>
</head>
<body>
<style>
#instructions {
position:absolute;
height: 100px;
margin:20px;
width: 25%;
top:0;
bottom:0;
padding: 20px;
background-color: rgba(255,255,255,0.9);
overflow-y: scroll;
font-family: sans-serif;
}
.marker {
background-image: url('./marker.png');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
</style>
<!-- the map -->
<div id='map'></div>
<!-- left side instructions -->
<div id='instructions'>
<div id="calculated-line"></div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFraHIiLCJhIjoiY2pseXc0djE0MHBibzN2b2h4MzVoZjk4aSJ9.ImbyLtfsfSsR_yyBluR8yQ';
var instructions = document.getElementById('instructions');
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', //hosted style id
center: [<?php echo $longitude; ?>, <?php echo $latitude; ?>], // starting position
zoom: 15, // starting zoom
minZoom: 11 // keep it local
});
var position = navigator.geolocation.watchPosition(updateRoute);
// use the coordinates you just drew to make your directions request
function updateRoute(position) {
map.flyTo({center: [position.coords.longitude, position.coords.latitude],essential: true});
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [position.coords.longitude, position.coords.latitude]
}
}]
};
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(geojson.features[0].geometry.coordinates)
.addTo(map);
removeRoute(); // overwrite any existing layers
var newCoords = position.coords.longitude+","+position.coords.latitude+";<?php echo $longitude.','.$latitude; ?>";
getMatch(newCoords);
}
// remove the layer if it exists
function removeRoute () {
if (map.getSource('route')) {
map.removeLayer('route');
map.removeSource('route');
instructions.innerHTML = '';
} else {
return;
}
}
// make a directions request
function getMatch(e) {
var url = 'https://api.mapbox.com/directions/v5/mapbox/driving/'+e+'?geometries=geojson&steps=true&access_token='+ mapboxgl.accessToken;
var req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', url, true);
req.onload = function() {
var jsonResponse = req.response;
var distance = jsonResponse.routes[0].distance*0.001;
var duration = jsonResponse.routes[0].duration/60;
var steps = jsonResponse.routes[0].legs[0].steps;
var coords = jsonResponse.routes[0].geometry;
// get route directions on load map
steps.forEach(function(step){
instructions.insertAdjacentHTML('beforeend', '<p>' + step.maneuver.instruction + '</p>');
});
// get distance and duration
instructions.insertAdjacentHTML('beforeend', '<p>' + 'Distance: ' + distance.toFixed(2) + ' km<br>Duration: ' + duration.toFixed(2) + ' minutes' + '</p>');
// add the route to the map
addRoute(coords);
// console.log(coordinates);
};
req.send();
}
// adds the route as a layer on the map
function addRoute (coords) {
// check if the route is already loaded
if (map.getSource('route')) {
map.removeLayer('route');
map.removeSource('route')
} else{
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": coords
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#1db7dd",
"line-width": 4,
"line-opacity": 1
}
});
};
}
</script>
</body>
</html>The complete code is explained in the video below and the source code is provided below.
Hope You Liked This Blog. Share, Comment, Subscribe And Press The Bell Icon In The Bottom Right Side For More Code Feeds.
0 Comments
