Display your data with custom layers in SeeYou.Cloud

Geek alert! SeeYou Cloud, Phyton code, heatmaps and custom layers ahead. If that inspires you, read on.

Our dev team works hard to make SeeYou.Cloud user friendly while keeping it packed with cool features. We add stuff on a weekly basis. Today, we will showcase one of the most advanced features. While analyzing a flight you might have said to yourself: “Man it would be cool to see where all the thermals were that day”. Rings a bell?

Well, with a bit of creativity and effort you can create your own custom layer and visualize it in SeeYou.Cloud.

Custom layer under map layer panel options.

Naviter team pilot Tilen Ceglar demonstrates how it works on one of his recent projects

After the 16th World Paragliding Championship in Macedonia I was uploading all my flights to SeeYou.Cloud and whilst analysing them, I realized that on a given day at a competition, there are 100 or more track logs in the same area and similar time frame. That is a lot of concentrated data and to my knowledge it’s not really being used. So I said, how hard would it be to do something with it? As it turns out, it’s pretty simple. Once you convert IGC tracks in the right format, Seeyou.Cloud can visualize the data with a simple copy/paste of an URL.

Custom layer

To activate the custom layer:

Open the layers panel on the right
Unfold the custom layer menu
Paste URL of the JSON file you want to display and activate it.

File format

SeeYou.Cloud uses Mapbox API for visualizing maps and data. We won’t go into details here, so make sure to check their documentation. In a nutshell, the JSON file must contain two parts: the geospatial data in form of the GeoJSON format, and the Mapbox style layer definitions.

GeoJSON is an open standard file format for encoding various geospatial data structures such as points, polygons and more. Each data set can have additional properties such as name, timestamp etc.

Here is an example of one gps fix from a tracklog in GeoJSON format with longitude of 45.79, latitude of 11.66 and altitude of 739 m. At this point, the vertical speed is 1.01 m/s at 1555765200 unix or epoch time.

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature", 
 "Geometry":
 {    
"type": "Point", 
"coordinates": 
[11.663722, 45.793422, 739]
}, 
"properties": 
{
"vario": 1.01, 
"time": 1555765200,
... 
}
},
...
]
}

Getting all your data into the GeoJSON format is the most time consuming part. I’ve used a Python script to process all track logs from the 3rd task at the Trofeo Montegrappa 2019. After averaging each individual track we can differentiate the altitudes to obtain the vertical speeds and keep only the parts with positive values. By gathering the positive averaged fixes from all pilots flying that task, we’ve got a very rough estimates of positions, strength and times of thermals around the task. Of course, at this point much more data processing could be done, but for the purposes of this example we will keep it simple.

Putting together all the positive gps fixes from all pilots generates a lot of data so it is wise to keep it in a separate GeoJSON file, which is called in the JSON as

{
    "sources": {
      "task-thermal-source": {
        "type": "geojson",
        "data": "https://raw.githubusercontent.com/tceglar/heat/master/data/bigsample.geojson"
      }
    },

The data is labeled as “task-thermal-source”. Next we need to define a style layer for it.

Heatmap

In general there are two types of heatmaps: those that visualise point density over an area and those that interpolate discrete values resulting in a smooth gradient between them. Mapbox provides heatmap function which generate the first type of heatmaps. Even though I would rather use the second type, we can still work with it.

To visualize the heatmap, we must define a style by adding a layer, identify it with the source data from the GeoJSON file and set the type to “heatmap”. Here we can define the properties of the layer, by specifying the heatmap weight, intensity, color, opacity, etc. These parameters are crucial for a nice visualization, so they usually need some iteration.

"layers": [
      {
      "id": "task-heatmap-layer",
      "type": "heatmap",
      "source": "task-thermal-source",
      "maxzoom": 15,
      "paint": {
      "heatmap-weight": [
      "interpolate",
      ["linear"],
      ["get", "mag"],
      0, 0,
      6, 1
      ],
      "heatmap-intensity"[...]
      "heatmap-color": [...],
      "heatmap-radius": [...],
      "heatmap-opacity": [...]
      }
      }
    ]
  }

To see the how the complete JSON file we prepared looks like follow the link here.
We are almost finished. All that is left is to upload your file to a public server (I’ve used github) and copy the link in the custom layer in Seeyou.Cloud.

There we go. Now we can see which were the most common thermals pilots used. Immediately we can think of improvement for this layer such as visualizing the thermals not by the density of pilots thermalling but rather with respect to the strength of the thermal. The good thing is that all the tools are here and easy to use 🙂

I hope this encouraged you to get creative and do more with the data that is available out there. Have fun!