Trailforks Website Maps Switch to Mapbox
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.
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