Strava Heat Mapping - Creating the Map

Here's a sample of what we will create:

Awesome!  So how do I make one of these for myself?


Here are the four steps:

  1. Export data from Strava (or gather a list of your GPX file data)

  2. Convert and compile gps data into a raster "Shapefile" using Python and Qgis

  3. Import the shapefile into Mapbox Studio (a free application for basic use)

  4. Style the map and publish it to the web

In my previous two blogs, I've covered how to export data from Strava using the API, and how to parse GPX files into python.  

We pick up now with how to create a shapefile in QGIS and visualize the data with MapBox studio.


2. Convert GPS data to shapefile -

Use the Python utilities in previous posts to concatenate all your GPX files into one single GPX file.

 

Download and install Qgis Desktop here - it's a free and open source tool for GIS work.  We will use QGIS to easily convert our GPX file to a Shapefile for styling in MapBox.  The reason that we want a shapefile - with all of the data points that we have, a shapefile is a much more efficient way to store and load the data.  MapBox can easily handle a summarized raster data set like a shapefile, but a GPX file with millions of individual points is less efficient to render.

 

Follow the screenshots below to import your GPX file in QGIS and convert it to a Shapefile:

 1 - Select the "Vector" layer toolbar, GPS, GPS tools

1 - Select the "Vector" layer toolbar, GPS, GPS tools

 2 - Select your GPX file to import and click "OK"

2 - Select your GPX file to import and click "OK"

 3 - After importing the GPX, make sure it looks correct by adding a map layer.  Select from the extensions toolbar in QGIS, the "Quick Map Service" (a standard extension that comes with QGIS base installation).  Select the Open Street Map "OSM Mapnik" layer

3 - After importing the GPX, make sure it looks correct by adding a map layer.  Select from the extensions toolbar in QGIS, the "Quick Map Service" (a standard extension that comes with QGIS base installation).  Select the Open Street Map "OSM Mapnik" layer

 4 - If all goes well, you should see your GPX data uploaded and visualized in the map window. 

4 - If all goes well, you should see your GPX data uploaded and visualized in the map window. 

 5 - Now find the "waypoint" layer in the layer menu on the left side of your screen.  Right click the waypoint layer from your GPX file, and select "save as"

5 - Now find the "waypoint" layer in the layer menu on the left side of your screen.  Right click the waypoint layer from your GPX file, and select "save as"

 6 - Set the following options (save the SHP file to your local project directory) to export the GPX as a Shapefile.

6 - Set the following options (save the SHP file to your local project directory) to export the GPX as a Shapefile.


3. Import Shapefile into MapBox Studio

Ok, now that we have a shapefile, let's import it into MapBox.

First download and install MapBox Studio here.  You'll need to create a basic user account -- it's free for basic use.

Open MapBox Studio and follow the screenshots below to import your data:

 1 - Open Mapbox Studio, and click the icon in the bottom left corner "Project".  Then Click the blue "New Project" button.  Finally, in the new project window, select "Source" "Blank Source"

1 - Open Mapbox Studio, and click the icon in the bottom left corner "Project".  Then Click the blue "New Project" button.  Finally, in the new project window, select "Source" "Blank Source"

 2 - In the new project, upload your shapefile as a new layer by clicking the "New Layer" button and selecting your shapefile from your project directory.

2 - In the new project, upload your shapefile as a new layer by clicking the "New Layer" button and selecting your shapefile from your project directory.

 3 - Give your layer a description in right ribbon editor, then click "Done"

3 - Give your layer a description in right ribbon editor, then click "Done"

 4 - In the left window, give your data source in MapBox a Name, description, a center point, and set the minzoom and maxzoom settings as per above (5 and 13, respectively).  Then, click the "Save As" icon to save your mapbox project data source.  Finally, upload your data to the Mapbox server by clicking the "Upload to Mapbox" blue icon in Settings.

4 - In the left window, give your data source in MapBox a Name, description, a center point, and set the minzoom and maxzoom settings as per above (5 and 13, respectively).  Then, click the "Save As" icon to save your mapbox project data source.  Finally, upload your data to the Mapbox server by clicking the "Upload to Mapbox" blue icon in Settings.


4. Style The HeatMap in Mapbox Studio

As our last step, we will give our data some style and publish it to the web to share.

 1 - Click the "Project" button in the bottom left corner of Mapbox Studio again, and create a new project.  Select the "BASIC" style.

1 - Click the "Project" button in the bottom left corner of Mapbox Studio again, and create a new project.  Select the "BASIC" style.

 2 - Click the "Layers" button, and select "Change Source".  All that we want is the box at the bottom, which is a list of comma-separated data layers to include in the map.  Here is the map layer you want:  mapbox.mapbox-streets-v5     You should see the data layer that you uploaded in the "Remote" list of values in the selection toolbar.  Copy/Paste the layer ID and add it to the bottom text form (left of "Apply"), with a comma separating the map ID and your data layer ID.

2 - Click the "Layers" button, and select "Change Source".  All that we want is the box at the bottom, which is a list of comma-separated data layers to include in the map.  Here is the map layer you want:

mapbox.mapbox-streets-v5

 

You should see the data layer that you uploaded in the "Remote" list of values in the selection toolbar.  Copy/Paste the layer ID and add it to the bottom text form (left of "Apply"), with a comma separating the map ID and your data layer ID.

We want to apply the style to the maps.  

Below is the CSS code I used to style the underlying map, you can copy/paste this into a new tab in the Mabbox Studio "Style"

// Languages: name (local), name_en, name_fr, name_es, name_de
@name: '[name_en]';
// Fonts //
@fallback: 'Open Sans Regular';
@sans: 'Open Sans Regular', 'Arial Unicode MS Regular';
@sans_md: 'Open Sans Semibold', 'Arial Unicode MS Regular';
@sans_bd: 'Open Sans Bold','Arial Unicode MS Bold';
@sans_it: 'Open Sans Italic', 'Arial Unicode MS Regular';
@sans_bdit: 'Open Sans Bold Italic','Arial Unicode MS Bold';
/*
This style is designed to be easily recolored by adjusting the color
variables below. For predicatable feature relationships,
maintain or invert existing value (light to dark) scale.
*/
// Color palette //
@road:  #484848;
@land:  #111111;
@fill1: #000000;
@fill2: #444444;
@fill3: #888888;
@fill4: #ffffff;
@fill5: #7a7a7a;
@text: #888888;
Map { background-color: @land; }
// Political boundaries //
#admin[admin_level=2][maritime=0] {
  line-join: round;
  line-color: @fill5;
  line-width: 1;
  [zoom>=5] { line-width: 1.4; }
  [zoom>=6] { line-width: 1.8; }
  [zoom>=8] { line-width: 2; }
  [zoom>=10] { line-width: 3; }
  [disputed=1] { line-dasharray: 4,4; }
}
#admin[admin_level>2][maritime=0] {
  line-join: round;
  line-color: @fill5;
  line-width: 1;
  line-dasharray: 3,2;
  [zoom>=6] { line-width: 1.5; }
  [zoom>=8] { line-width: 1.8; }
}
// Land Features //
#landuse[class='cemetery'],
#landuse[class='park'],
#landuse[class='wood'],
#landuse_overlay {
  polygon-fill: darken(@land,3);
  [zoom>=15] { polygon-fill:mix(@land,@fill4,95); }
}
#landuse[class='pitch'],
#landuse[class='sand'] { 
  polygon-fill: mix(@land,@fill4,90);
}
#landuse[class='hospital'],
#landuse[class='industrial'],
#landuse[class='school'] { 
  polygon-fill: mix(@land,@fill1,95);
}
#building { 
  polygon-fill: mix(@fill2,@land,25);
  [zoom>=16]{ polygon-fill: mix(@fill2,@land,50);}
}
#aeroway {
  ['mapnik::geometry_type'=3][type!='apron'] { 
    polygon-fill: mix(@fill2,@land,25);
    [zoom>=16]{ polygon-fill: mix(@fill2,@land,50);}
  }
  ['mapnik::geometry_type'=2] { 
    line-color: mix(@fill2,@land,25);
    line-width: 1;
    [zoom>=13][type='runway'] { line-width: 4; }
    [zoom>=16] {
      [type='runway'] { line-width: 6; }
      line-width: 3;
      line-color: mix(@fill2,@land,50);
    }
  }
}
// Water Features //
#water {
  ::shadow {
    polygon-fill: mix(@land,@fill4,75);
    
  }
  ::fill {
    // a fill and overlay comp-op lighten the polygon-
    // fill from ::shadow.
    polygon-fill: @land;
    comp-op: soft-light;
    // blurring reveals the polygon fill from ::shadow around
    // the edges of the water
    image-filters: agg-stack-blur(10,10);
    image-filters-inflate: true;
  }
}
// Water color is calculated by sampling the resulting color from
// the soft-light comp-op in the #water layer style above. 
@water: #2e2e2e;
#waterway {
  [type='river'],
  [type='canal'] {
    line-color: @water;
    line-width: 0.5;
    [zoom>=12] { line-width: 1; }
    [zoom>=14] { line-width: 2; }
    [zoom>=16] { line-width: 3; }
  }
  [type='stream'] {
    line-color: @water;
    line-width: 0.5;
    [zoom>=14] { line-width: 1; }
    [zoom>=16] { line-width: 2; }
    [zoom>=18] { line-width: 3; }
  }
}
 3 - Paste the code above into a new tab, like the screenshot above.  Make sure to save your file after changing the style code, to see the preview in your map.

3 - Paste the code above into a new tab, like the screenshot above.  Make sure to save your file after changing the style code, to see the preview in your map.

Now that your map looks nice and dark, let's style the ride data.  Here's the style that I used.  

Make sure that you replace #ryans_rides_150801 with the name of your layer.

4 - Paste this code below into a new tab in your style sheet.

#ryans_rides_150801 {
  line-width: 1;
  line-opacity: .2;
  line-join: round;
  line-gamma: 3;
  line-simplify: 20;
  line-smooth: 2;
  line-comp-op: color;
  image-filters:colorize-alpha(hsl(240,80%,50%), hsl(180,80%,50%), hsl(120,80%,50%), hsl(60,80%,50%), hsl(0,80%,50%));
}

Ok, we're almost there!  If all went well, you should have a preview similar to this now:

 5 - Map Preview (using the MapBox "Export Image" feature on the top right hand side of your project)

5 - Map Preview (using the MapBox "Export Image" feature on the top right hand side of your project)

6 - Now save your project, and select Settings -> Name your Project -> Set set center -> set minzoom to 3, maxzoom to 16 -> click "Upload to Mapbox"

 7 - Navigate to  https://www.mapbox.com/styles/  and select your styled map.  Create a new project from it by selecting "New Project"

7 - Navigate to https://www.mapbox.com/styles/ and select your styled map.  Create a new project from it by selecting "New Project"

 8 - Zoom to your data, name your project to share with others, and save your project.

8 - Zoom to your data, name your project to share with others, and save your project.

That's it!  You can now share your project and embed it, create images from it, or tweak the style to meet your needs.