Trailforks Website Maps Switch to Mapbox

Jan 22, 2019 at 11:30
by Trevor May  

Since Trailforks launched we've used Google Maps Javascript API, at the time it was the best solution. However as the years passed Google has not made significant improvements to their SDK, while competitors like Mapbox have been blazing ahead with lots of features and development. So we've finally decided to start the switch, which involves re-creating most of the map code. We are starting with the website, but the app will come along as well.

One of the main reasons we want to switch is to have the ability to load offline tiles, which Google still doesn't offer developers. There are many benefits of a more modern map platform, for one the basemap tiles are now vectors, so look much crisper and can be rotated. The map is also WebGL powered, which is much faster and smoother on modern hardware.

I've tried to re-create all the functionality of the old Trailforks Google map in the new Mapbox one. But I've also added a whole bunch of cool new features! The new map also loads faster, uses fewer requests and less data transferred.

Some new feature highlights
- Limited on-the-fly filtering of trails on map.
- Filter to show trails you have or have not ridden.
- Trail density visualisation using Uber deck.gl.
- View all trails you've ridden in the world.
- View top routes for the selected trail.
- Personal ridelog density heatmap.
- Trail direction style, easily visualise the uphill trails.
- Trail flow style, for trail planners.
- Right click context menu, shows clicked lat/lng and elevation.


View top routes for the selected trail. Hover over route to view on map.




View top routes within the current map view, hover to view on map, click to zoom to route.




Faster region clustering.




Trail density visualisation.




Region marker labels, different sizes region markers based on the regions popularity.




Trail direction style.




Trail flow for planning.





Filter trails on map




View all trail's you ridden in the world.




Personal ridelog heatmap.




Opaque trails, trails Strava segment shown on map.




Right click anywhere on map to view that points lat/lng, elevation and links to Share or load in Google Maps.

right click map for info



The Trailforks app will be upgraded sometime in 2019, no firm timeline. Not all the maps on the website are using the new Mapbox powered map, slowly more of them will be switched over.

Here is a full geeky list of all the functionality the Trailforks web map has.

- loads region markers and clusters them
- loads route markers and clusters them
- loads other poi markers
- loading data indicator
- switches basemaps, including raster sources
- set vector basemap lanuage based on browser default
- fullscreen map
- geolocate user
- trail opacity for closed trails
- trail dashed line for hidden trails
- trail mouseover effect
- trail direction arrows on mouseover
- trail start and end markers on hover
- trail labels
- trail label same colour of the current trails style
- trail & poi popup label on hover
- trail & poi popup on click
- switching activity or trail style changes the trail styling on the map
- region marker labels below marker
- dynamic sized region markers and labels
- right click context menu, shows clicked lat/lng and elevation
- dark map theme for heatmap
- make trails and markers transparent during heatmap
- change region label style in dark map
- handle showing and hiding region and poi markers at different zoom levels
- query trails within map viewport to display on sidebar list
- hover over trail name in sidebar to highlight it on the map
- click trail name in sidebar to zoom to it on the map
- click region name in sidebar to zoom to it on the map
- polygons on map with labels
- photo marker change size based on zoom
- photo marker preview image on hover
- label of the maps current centered riding area shown in bottom right
- show position on map matching elevation chart mouse hover
- openstreetmap basemap
- copyright attribution per basemap selected
- map UI works on mobile with touch
- click events don't need to be right on the map item, the nearest item within a box is selected
- show routes with highlight
- at very low zoom levels show province & country circle markers with trail counts
- update page URL as may options are toggled
- load map from URL defaults
- view routing area boxes on map
- show trails ridden markers, hide region markers in this mode
- fit bounds of map to ridden trail markers
- trail density visualization using deck.gl and d3
- check if region has an overlay KML. read KML and generate GeoJSON features from it. overlay on map
- condition time-range UI popup
- only show labels for trails of the current activity
- on first load only show region markers of sub-regions when viewing a region map
- show trail strava segment
- show trail cleanup points
- set trails layer opacity
- on trail page make all other trails opaque, highlight trail
- show lines on map on demand
- highlight route when hovering on route marker
- show route direction arrows
- ridelog density heatmap
- show top 2 routes for selected trail. show route on map when hovering over it. pan to route on click
- click route marker to pan map to route bounds
- uphill trail direction arrows
- filter trails on map, trails that don't match the filter are greyed out
- trail direction colour styling
- trail direction flow colour styling
- show direction arrows when in flow style mode
- show route sections and poi. route arrows opaque


Browse Trailforks Map


4 Comments

  • + 2
 Trailforks itself is already a mind blowing thing since the beginning. I uses several tools and gpx tracks in the past till trailforks came out. It it dont stops getting better and better. Of course there are so many special requests that not all of them can be implemented. But there is one thing I would love to see. Kind of private trails that I can add and they will only be visible to my profile after a login until I set them to public, kind of a draft or something. That would help keep track of all the ongoing trailbuilding and testing until it will be available to the public but with all the functions like ridelogs to add comments what has to be changed to the trail.
One other question I got: above in the list there is one point that says "- trail dashed line for hidden trails" That case is for admins right, because I know that a lot of trails are reported to be deleted because of the landowner or something like that. Or tell me if I am wrong, then I would love to know how hidden trails work.

Thanks for all the effort, love the tool and all the functions, for me a dream came true with the first release.
  • + 3
 Trailforks is designed to work around trail associations and regions more than individual builders. Permissions are set by region, not on a per-trail basis. So people from trail associations, directors, builders. Have permissions to view all hidden trails in specific regions they are granted access too. These hidden trails are shown as dashed lines. Like you request, hidden trails have all the features of a normal trail, comments, ridelogs, reports. They just aren't visible to the public. A hidden trail can also have a password on it, so you can share the link with say a land manager for review, and they enter the password to view.
  • + 1
 @canadaka: thanks a lot just watched the videos in the help section. Will try this feature and again I am blown away that this already exists like I would love it to be. Thanks again.
  • + 2
 Good. The GOOG maps API has been static for way too long and offline caching even of device-specific maps is buggy to say the least.

Post a Comment



You must login to Pinkbike.
Don't have an account? Sign up

Join Pinkbike  Login
Copyright © 2000 - 2019. Pinkbike.com. All rights reserved.
dv65 0.029899
Mobile Version of Website