Owntracks Data on a static page
I am using owntracks for a very long time now but never realy used the function to record tracks.
I now wanted to be able to display a trip on a static web pages without any connection to the owntracks recorder (ot-recorder is only running in my vpn). I already used leafletjs to display GPX tracks from trecking tours so this was may natural goto library.
The only question was how to get the data in a form that I could consume from a html page. It turns out this was the easiest part thanks to the small utility ‘ocat’ that comes with owntracks recorder.
ocat --user hbauer --device myphone --from "2026-05-16T07:00" --to "2026-06-01T07:00" --format linestring > balkan2026.geojson
I have chosen linestring intstead of points since this a trip of 4k km has a lot of points.
I also wanted to add some point markers on the map so I created a list of points.
[ {
"name": "Übernachtungsplatz Oliver kocht",
"lat": 46.71605485035968,
"lon": 15.676161253455058,
"text": "<a href='https://www.hagen-bauer.de/2026/05/bernachtungsplatz_in_sterreich.html' target='_blank'> Blogbeitrag </a>"
}, {
"name": "Plitvizer Seen",
"lat": 44.883382013941976,
"lon": 15.621955470025389,
"text": "<a href='https://www.hagen-bauer.de/2026/05/Die_Plitvicer_Seen.html' target='_blank'> Blogbeitrag </a>"
} ]
This is a very simple html page to get started. Since I am using Jekyll to generate my site my final layout was different but you may get the idea. The html pages must be in the same directory with the 2 data files.
My final result looks like this
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>OwnTracks Route</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<style>
html, body { margin: 0; height: 100%; }
#map { width: 80%; height: 80%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const map = L.map('map');
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap-Mitwirkende'
}).addTo(map);
fetch('balkan-2026-markers.json')
.then(r => r.json())
.then(markers => {
markers.forEach(m => {
L.marker([m.lat, m.lon])
.addTo(map)
.bindPopup(`<b>${m.name}</b><br>${m.text}`);
});
});
fetch('balkan-2026-track.geojson')
.then(response => response.json())
.then(data => {
const route = L.geoJSON(data, {
style: {
color: '#ff0000',
weight: 4
}
}).addTo(map);
map.fitBounds(route.getBounds());
})
.catch(error => {
console.error('Fehler beim Laden von balkan.geojson:', error);
});
</script> </body> </html>