The team was able to discover two workable solutions to the Problem Statement that would allow the ability for the public to visualize where riders are on the route during the multi-day bike fundraiser event route for the non-profit, The Liberty Project, and keep them informed of what is going on as the event is occurring.
The two working solutions the team have demonstrated below are great solutions to the Problem Statement. Both solutions create an engaging interactive web map that can be hosted directly on the webpage for The Liberty Project's fundraising event. These web maps will allow the public the opportunity to engage with the fundraising event from their own homes by being able to visualize the route and where riders will be.
The first solution was located while researching Mapbox tutorials. This tutorial provided unique Interactive Storytelling templates, also known as "Scrollytelling” which works by generating high-quality, interactive stories.
This template quickly became a top-favourite solution by the team as the template for the story content file (config.js) has the ability to move locations, determine settings for how the map and story are shown, and have text and images displayed for each new "chapter".
Interactive Storytelling through Mapbox will allow the team to build a web map that brings the public into the fundraising event through an immersive experience from their own home.
The Interactive Storytelling Maps are easy to create with a free Mapbox account, Mapbox access token, and Github repository to host the story file. This idea of Interactive Storytelling Maps became a great option for the team to explore customized solutions in order to solve the Problem Statement.
With the Mapbox templates as a guide, the team was quickly and easily able to create new GeoJSON files with points located in the study area and load them into the config.json files supplied. From initial testing, text was added and it was quickly discovered how easily an interesting story could come to life in this format of web map!
As illustrated in the demonstration example to the right, with a simple scroll of a mouse, any user can be taken on a journey across the province, with key points highlighted by a choice of text, as shown here, or with images. This solution is a top favourite of the team in order to help the public be informed and feel engaged wih the event from their own homes.
Attempting to find a great solution for animating a point along a path lead the team to discovering another Mapbox tutorial, Update a Feature in Realtime , that involved animation of a route in a web map using Mapbox GL JS.
This tutorial provided framework where a feature that exists on a map can be updated. In the example of the tutorial shown to the right, a path is being drawn where the map view moves along side, following where the route is going - as though the data is occurring in real-time, like how Live Tracking would be displayed!
Exploring the tutorial further led the team to discover a method to examine the working of basic line animation using a GeoJSON. The team worked to try implementing a custom GeoJSON created ArcGIS Pro as Mapbox struggles to support large GeoJSON files. However, the team was unable to get the animation to work with an external GeoJSON in the code.
The team continued to experiment with customization of the tutorial with the original GeoJSON file from Mapbox and created a customized web map with modified base mapping, line colouring, and through this, understood how to manipulate timing and view in the web map.
Trial and error finally yielded positive results when the team was finally able to load a working external GeoJSON for the first time. Experimenting with options like preparing line files in Google Maps and ESRI ArcGIS Online led to the discovery that many non-native GeoJSON files cannot be loaded into Mapbox without proper manipulation of the files to remove the CRS information.
The example in the demonstration to the right below shows a line feature created in ArcGIS Pro, converted to GeoJSON in ArcGIS Online, and manipulated to remove the CRS information, which was the cause of a load error in Mapbox. The team discovered that they could host the GeoJSON right in the HTML and bypass keeping it in Mapbox.
This success came along with a failure as the GeoJSON continued to prove problematic and required more investigation.
The team found that by creating a new line feature in Mapbox with an intermediate number of points, they were able to roughly resemble the proposed bike route, with more effective animation of the line. Combined with some customization of the line colour and opacity, and custom map style loaded and applied (generated in Mapbox), the refined line feature more closely resembled the proposed animated bike route the team envisioned.
The team now understands that in order to refine the GeoJSON, that there is a “lucky number” of points where too few points result in a faster trace of the line segment and jerky motion, and too many results in very slow but smooth movements. Lastly, manipulation of the interval timer will also be crucial for constructing a web map that has smooth animation, draws more slowly, properly follows the designated route along with roads.