GeoJson Download about frontend

[linusg]

Not sure if you'd call it a standard, but the current format is the OwnTracks JSON format that's universally used in the OwnTracks ecosystem: https://owntracks.org/booklet/tech/json/

I'm not interested in implementing a change for this but you might. PRs welcome :)

[jpmens]

Our Recorder should produce standard GeoJSON. From our documentation:

By specifying a format we can produce GeoJSON, say. Normally, the API retrieves the last 6 hours of data but we can extend or limit this with the from and to parameters.

http://127.0.0.2:8083/map/index.html?user=demo&device=iphone&format=geojson&from=2014-01-01

So if you have access to the Recorder back-end you can try this.

[pchampio]

I don't have the time to learn VueJS. -- sorry
For anyone else, I've quickly added this to the config file. (Warning, it exposes the recorder url).
(not pretty, but it does the jobs^^)

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
    return false;
};

const url = "https://XXXX/api/0/locations?user=YYY&device=DDD&";
const url_recorder_viewer = "https://XXXX/map/index.html?user=YYY&device=DDDD&";

document.addEventListener('DOMContentLoaded', (event) => {
  var element = document.getElementsByClassName("header-item-right")[0];
  var div = document.createElement('div');
  div.className = "nav-item";
  div.innerHTML = `
  <button title="View in recorder" class="button button-flat button-icon" onclick="view()">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
  </button>
  `
  element.appendChild(div)



  var div = document.createElement('div');
  div.className = "nav-item";
  div.innerHTML = `
  <button title="Download geojson" class="button button-flat button-icon" onclick="dl_geojson()">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download-cloud"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
  </button>
  `
  element.appendChild(div)
})

function view() {
  window.open(url_recorder_viewer + "&format=linestring&from=" + getUrlParameter('start') + "&to=" + getUrlParameter('end'), '_blank')
  console.log(url_recorder_viewer + "&format=linestring&from=" + getUrlParameter('start') + "&to=" + getUrlParameter('end'))
}

// not working
function gpx_dl() {
  window.open(url + "format=gpx&from=" + getUrlParameter('start') + "&to=" + getUrlParameter('end'))
  console.log(url + "format=gpx&from=" + getUrlParameter('start') + "&to=" + getUrlParameter('end'))
}


function dl_geojson() {
  window.open(url + "format=geojson&from=" + getUrlParameter('start') + "&to=" + getUrlParameter('end'))
  console.log(url + "format=geojson&from=" + getUrlParameter('start') + "&to=" + getUrlParameter('end'))
}