Skip to content

Instantly share code, notes, and snippets.

View ng-the-engineer's full-sized avatar

Anthony Ng ng-the-engineer

2 followers · 2 following
View GitHub Profile
@ng-the-engineer
ng-the-engineer / tracker.js
Last active May 31, 2021 09:32
Code snippet of tutorial running tracker
const success = (position) => {
const { latitude, longitude } = position.coords;
const timestamp = (new Date(Date.now())).toISOString();
...
createNewEvent(latitude, longitude, timestamp);
}
const createNewEvent = (latitude, longitude, timestamp) => {
@ng-the-engineer
ng-the-engineer / tracker.js
Created May 30, 2021 17:12
Code snippet of tutorial running tracker
const toggle = () => {
if (isStart === null) {
isStart = true;
startTracking();
} else {
isStart = !isStart;
}
}
@ng-the-engineer
ng-the-engineer / tracker.js
Created May 30, 2021 16:43
Code snippet of tutorial running tracker
const refreshMeter = (detail) => {
return new Promise((resolve) => {
if (path == null) return resolve(detail);
if (!isStart) return resolve(detail);
const delta = calculateDelta(path._latlngs)
accumulatedDistance += delta;
@ng-the-engineer
ng-the-engineer / tracker.js
Created May 30, 2021 09:28
Code snippet of tutorial running tracker
const drawNewSegment = (detail) => {
const { latitude, longitude } = detail;
return new Promise((resolve) => {
if (path == null) {
path = L.polyline([
[ latitude, longitude ],
], {
@ng-the-engineer
ng-the-engineer / tracker.js
Created May 30, 2021 09:17
Code snippet of tutorial running tracker
const updateMap = (event) => {
...
drawNewSegment(event.detail)
.then((detail) => drawNewMarker(detail))
.then((detail) => refreshMeter(detail))
}
@ng-the-engineer
ng-the-engineer / tracker.js
Created May 29, 2021 19:07
Code snippet of tutorial running tracker
L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
{
attribution:
'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
accessToken:
@ng-the-engineer
ng-the-engineer / tracker.js
Created May 29, 2021 18:31
Code snippet of tutorial running tracker
const LONDON_CENTRE_LAT_LNG = [51.505, -0.09];
let map = L.map("tracker").setView(LONDON_CENTRE_LAT_LNG, 13);
@ng-the-engineer
ng-the-engineer / index.html
Created May 29, 2021 07:03
Code snippet of tutorial running tracker
<!DOCTYPE html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link
rel="stylesheet"
@ng-the-engineer
ng-the-engineer / tracker.js
Created May 28, 2021 13:04
Code snippet of tutorial build a running tracker
const HIGH_ACCURACY = true;
const MAX_CACHE_AGE_MILLISECOND = 30000;
const MAX_NEW_POSITION_MILLISECOND = 5000;
const trackOptions = {
enableHighAccuracy: HIGH_ACCURACY,
maximumAge: MAX_CACHE_AGE_MILLISECOND,
timeout: MAX_NEW_POSITION_MILLISECOND,
};
@ng-the-engineer
ng-the-engineer / tracker.js
Created May 28, 2021 10:15
Code snippet of tutorial: Build a running tracker
const startTracking = () => {
if(!navigator.geolocation) {
logConsole.textContent = 'Geolocation is not supported by your browser';
} else {
logConsole.textContent = 'Locating ...';
distanceBox.textContent = '0.000';
return navigator.geolocation.watchPosition(success, error, trackOptions);
}
}