Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script>
var map_init = L.map('map', {
center: [9.0820, 8.6753],
zoom: 8
});
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map_init);
L.Control.geocoder().addTo(map_init);
if (!navigator.geolocation) {
console.log("Your browser doesn't support geolocation feature!")
} else {
setInterval(() => {
navigator.geolocation.getCurrentPosition(getPosition)
}, 500);
};
var marker, circle, lat, long, accuracy;
function getPosition(position) {
// console.log(position)
lat = position.coords.latitude
long = position.coords.longitude
accuracy = position.coords.accuracy
if (marker) {
map_init.removeLayer(marker)
}
if (circle) {
map_init.removeLayer(circle)
}
marker = L.marker([lat, long])
circle = L.circle([lat, long], { radius: accuracy })
var featureGroup = L.featureGroup([marker, circle]).addTo(map_init)
map_init.fitBounds(featureGroup.getBounds())
console.log("Your coordinate is: Lat: " + lat + " Long: " + long + " Accuracy: " + accuracy)
}
</script>
</body>
</html>
It shows my current position and will update when I move, however I want to draw the path taken on the map. I have not found any examples of this. Most routing plugins seem to require and endpoint to draw a path (ie: OSRM).
After drawing a path the user will be able to click “stop tracking” button and then save this path to mongodb so they can look at it later. Not sure how to do that either.