Web Charlie Uses Map box and WebGIS to Visualize Northumberland County Food Supply

Problem Background

Currently in the municipality of Northumberland County there are no effective web-based applications that users can rely on to find fresh, local food. In March 2020, all thirteen Northumberland County food banks closed except for one location due to COVID-19 restrictions. This led to a disruption to the food distribution supply chain and confusion to food bank users. There was mass confusion about which food bank was still available, and which ones were closed. The confusion from the shutdown affected the vulnerable population and led to people not having access to food. With a current collaborative project partnered with Sustainable Cobourg underway, Web Charlie plans on bringing a new web-based food accessibility tool and solution to Northumberland County residents.

Problem Statement

Our goal is to set out and create a web map with local fresh food locations that is accessible to users on a responsive mobile platform.

• Ideal: Users can go online in a mobile friendly web map to find fresh foods in the Cobourg area.

• Reality: There is no web platform available for food availability in the Cobourg area.

• Consequences: Users continue to lack support in finding food and failure to access food resources.

• Proposal: Create a food bank web map that is accessible to users on a responsive mobile platform.

Our Journey

Over the span of couple weeks, our team tried different ways to implement the web solution. We came across some problems along the way and tried to find workarounds for our final product. This section will detail what we have tried and what we did to overcome the issue.

Phase One: Mapbox & GeoJSON

From our friend Sustainable Cobourg’s ArcGIS Online Web Map, we were able to find a feature service layer at their ArcGIS REST Services Directory. We looked at using the query function within the query to get a web response that matches what Mapbox can intake. We made sure to use an SQL query “Name IS NOT NULL” to make sure we selected all the food banks. The advantage of this method is being able to get point data as well as the description directly from the ArcGIS Online source, instead of having to make manual changes every time Sustainable Cobourg updates their feature layer.

Problem: The team attempted to use the GeoJSON queried directly from the feature service via the REST endpoint, but it was unsuccessful due to the fact it is not native to Mapbox and required heavy request modification.

The issue was that the web request to the feature service layer was not configured properly and they could not be projected on the Mapbox.

From here we extracted the GeoJSON using a query to place into Mapbox map. Markers showed up and our next issue were the pop-up windows. Through Mapbox tutorials and research, we figured out the solution to display the specific attributes that we wanted from the properties section. We needed to configure the code from the tutorial slightly to fit our requirements and needs.

Problem: What we had trouble with was changing the marker symbols so that they cluster properly.

---

Phase Two: Mapbox

Our goal is to automate the updated Foodbanks layer from ArcGIS Online and have that linked to the Mapbox map, where we won’t need to query for the GeoJSON and paste into Mapbox every time we have a new updated point. We want to be able to paste the REST endpoint URL into Mapbox instead of using GeoJSON. We are still figuring out the correct formatting to achieve this. This leads us to phase three, trying a different platform.

---

Phase Three: Leaflet

Progressing with the project we looked for other ways we could improve the usability of our map in a mobile friendly way. We turned to Leaflet to see how they implement feature layer as a URL. From this tutorial, we were able to achieve pasting the REST endpoint URL and adding it to the map. From there, we added the pop-up windows and the properties that we wanted to display just to try.

---

Next Steps

Leaflet is an open-source JavaScript library and can be enhanced with different web applications such as Mapbox, OpenStreetMap, and Esri suite. It is a native environment that adapts with Esri products seamlessly. Our next steps include adding more customized map elements so that it has even better aesthetic appeal for a wide audience.

Methodology

Using the published web map from our Sustainable Cobourg’s ArcGIS Online account, we exported the food banks layer as a GeoJSON file and downloaded the file into our GitHub folder via VS Code. We stylized the basemap in Mapbox and added markers for each point along with popup windows for the properties of each point. Below will be a brief highlight of the steps that we took to come to our solution.

---

Step 0

Our initial step in creating the solution was to come up with a visually appealing basemap using Mapbox Studio. The team went with a blue monochrome color because it was simple and did not have distracting stylings. It was the easiest template to start working with.

---

Step 1

From Sustainable Cobourg's ArcGIS Online account, we found the Project Cobourg Web Map. From there we went into the layers to retrieve the Food_Banks (0) Feature Server REST endpoint. This was followed by creating a Query for GeoJSON of the ArcGIS Online Food_Banks (0) FeatureServer. Once we received the GeoJSON return, we saved the output as a GeoJSON file and placed into our repository on GitHub via VS Code.

---

Step 2

Once the GeoJSON file was extracted and placed into our repository, we moved onto installing Mapbox to add to our web page. Here are the steps to "Install Mapbox GL JS: Add Mapbox to your app or website".

• Choose Platform: iOs, Android, JS Web or Unity and Copy the access token.
• Pick Method: HTML or Module Bundler
• Install: Include the GL JS JavaScript and CSS files in the head section of your HTML file.
• Create a map: Add the map to your site with access Token, and place map in script section.

---

Step 3

Add "mapboxgl.accessToken" that was copied from Step 2 along with a variable for the map window. Here you can style the basemap and paste into link and set the zoom level as well as the center coordinates of your study area. We selected zoom 9 and centered it in Northumberland County. The blue monochromatic basemap was a custom style created by in Mapbox studio. Next, add GeoJSON that was queried from Step 1 into HTML web page under function "map.AddSource".

---

Step 4

Next, add Markers & Title Description for each point on the map. We customize the font size, family, offset from the default styling.

---

Step 5

Finally, add pop-up windows to points using attributes from properties section.

---

Step 6

Find workflow to automate updates. We found that integrating Mapbox Styling with Leaflet URL input would be our best option moving forward.

---

Meet The Team

Team Web Charlie has 12 years of combined GIS experience. Trained in the Fleming College GIS Specialist program, each member provides valuable experiences and input to the web solution. To find out more, check out their profiles below!