Mapping your sport activity with HERE XYZ Studio

By Roberto Butti | 12 August 2019

Try HERE Maps

Create a free API key to build location-aware apps and services.

Get Started

Whenever I go for a run, a bike ride or a swim I like to track my performance. And with that, I go a step further to analyze my endurance and achievements by creating custom maps. In this post, I will show you how to create a map with your cycling (or running) activity and styling your route based on your heart rate. In green color you will see the segments where your heart rate was low (for example less than 120 bpm) and in red color where your heart rate was high ( for example greater than 150 bpm). This is just an example of one metric, but feel free to add other attributes like speed, cadence, altitude etc.


In order to use HERE XYZ Studio, we need to convert files provided by third party tools used to track activities into a Geojson file. These third party tools like Strava, Zwift, Garmin Connect usually allow you to download activities in FIT format and/or GPX format. I'm going to show you how to export FIT file from Zwift, GPX file from Strava and GPX and FIT from Garmin Connect.

Export FIT file from Zwift

In Zwift you can export your activities in FIT file. From your dashboard you have the list of your activities. For each activity you have a "Download" link that allows you to download the FIT File. 

Screenshot 2019-03-01 at 14.28.18

A FIT file is a binary file that contains all information about your activity (power, speed, elevation, GPS coordinates, hearth rate etc)

Export GPX file from Strava

If you use Strava, at this URL: you can see all your activities, sorted by date (latest activity on top of the list). If you select an activity you can see the detail activity page. On the left, on the sidebar, you have some shortcuts to edit the activity, to see analysis and you can access to some "advanced" functionalities via the "three dots" button. 

Screenshot 2019-04-28 at 09.52.52

In the context menu you can click "Export GPX" to download your activity in GPX format.

Export FIT/GPX file from Garmin Connect

If you a Garmin devices user, and you have a registered account on Garmin Connect, in this Web page you can see your activities. Once you selected your activity from list, you can see the activity detail page. On the top right corner you have a wheel icon. Open the menu tools by clicking the wheel icon. 

Screenshot 2019-08-07 at 22.42.19

In the menu, click on "Export to GPX" if you want a GPX file or "Export Original" if you want a FIT file.

Convert GPX or FIT file into Geojson

For converting GPX/FIT file into Geojson you can use this opensource tool:
Drag and drop your GPX or FIT file into that tool. 

Screenshot 2019-04-28 at 10.37.14

Click on "Download" button. A Geojson file will be saved on your local computer.
Why do you need Geojson file? Because a lot of online Map tools use the Geojson format. Also XYZ Studio manages Geojson files.

Create your Map based on your activity

With you can create your custom map based on Geojson file in easy way. On click on the button "Create new project" in top right of the screen. To do that you need to log in in XYZ Studio. If you don’t have any account you can create one for free. XYZ Studio has “Freemium plans” good for starting your work. 

Screenshot 2019-04-28 at 17.43.09

A new empty project (map) is created, and a new empty map is shown.

Add your data to a map

Now you can add data (your Geojson file just created) clicking on "+ Add" on the left side bar of your new empty project. 

Screenshot 2019-04-28 at 21.15.26

In the new popup window "Add data" you can upload your Geojson file clicking on "Upload files" button. 


Once the file upload process is competed, you will see your new dataset available in "My XYZ Spaces". To load your data into the map, you need to make sure that the dataset is selected, and click on "Add 1 dataset" button. 


Customize your project information

Once you have uploaded your data, you will see your project map. In the left panel you can change the project’s title and description. 


Style your data

In order to style your data you need to access to the layer information. On the left side panel click on the name of the layer. 


Click on the layer name to activate the layer, and style the data.


Click on the arrow to expand Lines section 


In "Lines" section click "Add new style line" to open the "Add new style group" popup window. In this popup window, you can define:
* Style group name: set "Heart Rate LOW";
* Property: select hr in the list (hr is the property for the heart rate);
* Condition: select "Less than";
* Value: set a integer value (for example 120) 


With this simple step you just created a rule for your lower heart rate (less than 120). Click on "Confirm" button to save. Now you can define the style (color). In the side bar you can see your new rule named "Heart Rate LOW". You can click the color picker and select the color. For example for lower rates you can select green color. 


You will se in the map all segments where you ran with your heart rate less than 120 with green color. In the same way, you can define and style a new rule for your higher heart rate segments. On the left side bar click "Add new line style". 


In this popup window, you can define:
* Style group name: set "Heart Rate HIGH";
* Property: select hr in the list (hr is the property for the heart rate);
* Condition: select "Greater than";
* Value: set a integer value (for example 150)
Now you can select a color for styling segments that match your new rule. 


 If you created your 2 new style in the right way, you can see the left side bar with these styles for lines:
* Heart Rate HIGH
* Heart Rate LOW
* Default line style 


You can rename "Default line style" clicking on the pencil close to the name. For example you can name it Heart Rate MEDIUM.

Publish your new map

In order to share your new styled map with your friends or in your blog, you need to publish it. On the bottom of the left side panel click on the "Publish settings" button. 


In the popup "Publish Settings" window, click on "Publish map", select "Description" and "Legend" options and then scroll down the window. 


Click on Open URL link. A new tab will be open with your published map.
You can see your workout activity on map, with colored segments with your Heart Rate. 

Now you can create your map activity based on your pace or on elevation. For cycling you can also style your map based on cadence or speed. And now… it’s time to color your activities.