During the research phase when the Web 1 team was working to find an alternative to Live Tracking to solve the Problem Statement, they also found two notable discoveries that were too good to not be mentioned on this site. The discoveries included a tutorial in Mapbox where we were able to of animate of a point along a route and the use of social media widgets. We knew these discoveries were worthy of mention as they may come in handy for a future project with different ideals or can be used to support one of the working solutions for the webpage that the team will generate for The Liberty Project in the next coming months.
This great find by the team shows a Mapbox tutorial that allows a point to be animated along a route. This was the first option the team found after understanding Live Tracking was long longer an option. Although it doesn't quite work for what we were looking to do for this particular project, it may come in handy for another project down the road and therefore, is worthy of the Discoveries page!
The Mapbox tutorial, Animate a Point Along a Route, was a great discovery for the team after it had been found that Live Tracking would not be possible and they would need to find a new way to solve the Problem Statement.
As seen in the example to the right, a point on a map is animated and moves along a line which represents a route. This helped the team realize they could “fake it 'till they make it” and animate the bicycle event and Live Tracking was never spoken of again.
The smooth animation of the point along the route displayed by this Mapbox tutorial utilizes Turf.js, an open-source JavaScript library that is primarily used for spatial analysis. Turf.js is known to work extremely well with Mapbox GL JS, another open-source JavaScript library which works by using Mapbox GL in order to render interactive client-side web maps.
The team worked to customize the Mapbox tutorial by using their own route by selecting coordinates for a starting, middle, and end location, creating a custom base map, and changing the icon to a more appropriate icon: a bicycle.
While working on customization, it was quickly discovered that the route, or line that is shown on the web map is automatically drawn between each point from origin to destination that the single point smoothly animates along.
The team would have had to enter hundreds if not thousands of points for coordinates in order for the route even begin to properly follow the roads for the real route assigned for the fundraising event.
Therefore, although a great discovery and a step towards finding the needed workable solutions, this option was put aside as a viable option for the project.
What better way to keep up with something going on than through social media! The second notable discovery that the team explored was the use of embedding social media onto a webpage through widgets. This will allow the public to be updated on what is going on through the day, every day during the multi-day event. The social media channels that were included were Strava, Twitter, and Instagram.
The three social media display options on a webpage through widgets are great way to complement the fundrasing event web page in order to inform the public what is going on during the event, where the riders are, and provide engaging content! As a bonus, the widgets have the option to add links to be brought to The Liberty Project's social media channels where the user would likely follow them on their associated social media platform. With the users following The Liberty Project on social media, engagement will likely be more in-depth and will result in longer term interaction with the organization.
The Strava Widget allowed the team to showcase recent Strava activity on a web page through embedding the Summary Widget or Activity Widget. The widget code is easy to implement by finding the widget code on the Profile or Club page on Strava under "Share your Ride" for a Personal page or "Share Club Activities" on a Group page and simply pasting the code onto the website. This is a great way to allow The Liberty Project to update the public on their daily efforts on the route and will likely be used in tandem with one of the full workable Solutions.
The embedded timeline widget by Twitter is another great option to allow the public to see daily updates about the ride by embedding a timeline into the fundraising site. Twitter is known for short quick information bursts and can be used for fun updates throughout the day about the riders and how the ride is coming along. Embedding a timeline from Twitter will display public Tweets from a profile by using their publish tool, selecting profile, and choosing embedded options. Simply copy the code and paste onto the website!
Embedding Instagram is another key discovery for the team as The Liberty Project's primary social media, is Instagram. The team will be able to embed The Liberty Project’s Instagram into the fundraising event page. A third-party software must be used to properly embed an Instagram Feed widget on a regular website. However, as The Liberty Project uses Squarespace, the team will be able to display The Liberty Project's Instagram profile feed on the webpage through connecting their Instagram account and using with the choice of a slideshow, carousel, stacked or grid display. Read More