A walking route drawn between two points
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation API</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;">
<div
style="z-index: 10; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; right: 0px">
© <a href="https://www.openstreetmap.org/copyright" rel="noopener noreferrer no follow"
target="_blank">OpenStreetMap contributors</a></div>
<div
style="z-index: 100; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; left: 0px">
<a href="https://baato.io" rel="noopener noreferrer no follow" target="_blank"><img
src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg" alt="Baato"
width="80px"></img></a>
</div>
</div>
<script src="https://www.unpkg.com/@klltech/baato-js-client@1.2.0/dist/bundle.js"></script>
<script>
var map = new mapboxgl.Map({
container: "map",
style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // Baato stylesheet location
center: [85.31853583740946, 27.701739466949107], // starting position [lng, lat]
zoom: 14, // starting zoom
});
map.on("load", function () {
new Baato.Routing({
key: "YOUR_BAATO_ACCESS_TOKEN",
})
.addPoints(["27.695007971417382,85.30786383056528", "27.706710946667044,85.33378469848509"]) // points for which routing is to be done
.setVehicle("foot") // means of transporation
.getBest()
.doRequest()
.then((response) => {
response.forEach((item) => {
map.addSource("route", {
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: item.geojson.coordinates,
},
},
});
map.addLayer({
id: "route",
type: "line",
source: "route",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#008148",
"line-width": 8,
},
});
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation API</title>
<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
<link href="https://cdn.skypack.dev/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;">
<div
style="z-index: 10; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; right: 0px">
© <a href="https://www.openstreetmap.org/copyright" rel="noopener noreferrer no follow"
target="_blank">OpenStreetMap contributors</a></div>
<div
style="z-index: 100; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; left: 0px">
<a href="https://baato.io" rel="noopener noreferrer no follow" target="_blank"><img
src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg" alt="Baato"
width="80px"></img></a>
</div>
</div>
<script src="https://www.unpkg.com/@klltech/baato-js-client@1.2.0/dist/bundle.js"></script>
<script>
var map = new mapboxgl.Map({
container: "map",
style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // Baato stylesheet location
center: [85.31853583740946, 27.701739466949107], // starting position [lng, lat]
zoom: 14, // starting zoom
});
map.on("load", function () {
new Baato.Routing({
key: "YOUR_BAATO_ACCESS_TOKEN",
})
.addPoints(["27.695007971417382,85.30786383056528", "27.706710946667044,85.33378469848509"]) // points for which routing is to be done
.setVehicle("foot") // means of transporation
.getBest()
.doRequest()
.then((response) => {
response.forEach((item) => {
map.addSource("route", {
type: "geojson",
data: {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: item.geojson.coordinates,
},
},
});
map.addLayer({
id: "route",
type: "line",
source: "route",
layout: {
"line-join": "round",
"line-cap": "round",
},
paint: {
"line-color": "#008148",
"line-width": 8,
},
});
});
});
});
</script>
</body>
</html>