Markk allows users to share real-time information about places around them. These ratings of places help others make informed decisions before going out.
In early March, we started noticing a lack of essential supplies at several stores around LA, as seen via user ratings on Markk. We realised that people were looking for and stocking up on these essentials in preparation for the Coronavirus. To help people find the items they needed and help the community, we created the Emergency Supply Finder on Markk.
We developed and launched our first prototype to the public within the first 36 hours of the conception of the idea. Since then, we’ve iterated rapidly on this initial idea, improving the experience for people looking for necessary items. This was made possible largely in part due to the ease of creating informative and visually appealing maps using Mapbox. It allowed us to tackle several challenges as we tried to build the Emergency Supply Finder.
The primary challenge was to display the data about essential items such as hand sanitizer, water, etc. in an easily accessible way. We solved this by using a map representing the stores around users, where the icon for the store changed from a green cart (items in stock) to a red cart (items out of stock).
Another challenge was letting users find the exact items they wanted to find from several closely located stores. We introduced item based filters on the map as a solution to this problem. Now users are able to select a filter for water or hand sanitiser and see only the stores where the item was last seen.
And lastly, the speed of execution was quite crucial. As the Coronavirus rapidly took hold at various locations around the globe, it became more difficult to find essential items. Thus we wanted to quickly develop the initial prototype and keep iterating at the same pace.
Using Mapbox GL JS SDK for our web app allowed us to tackle all the challenges we faced, while also enabling us to iterate quickly. Getting started with Mapbox for web apps was very easy thanks to the extensive documentation and plenty of examples provided.
We used the built-in ability to set custom marker icons provided by Mapbox GL JS to depict stores with items in stock with a green cart icon, or stores where the item has run out with a red cart icon.
Combining Mapbox with our existing VueJS PWA, we were able to change the displayed stores in real-time based on filters users applied. In this way, a user could quickly pinpoint the item they needed and find a store nearby which has the item in stock.
Updating layouts and features on our native mobile apps posed another challenge. Since making changes to layouts or adding any significant feature usually requires an app update, the speed of rolling out new features is slower than that of web apps where a simple refresh provides users with latest app updates. To tackle this limitation on our Android and iOS native apps, we used Firebase Remote Config to keep variables, assets, and targets dynamic along with a Webview to show the ESF map view. With this approach, changing text copies, image assets, and tap targets were possible without making an app release. Additionally, any updates to the ESF map became instantly available on the native apps.
Over the last few months, Emergency Supply Finder has been used by tens of thousands of people to quickly find the essential items they need. We have been covered by several press channels in and around LA – like ABC10 News and Spectrum News.
At this point, we would like to thank Mapbox for their excellent support and assistance during this time. Due to the large volume of users, we quickly crossed the limit of map loads the free tier of Mapbox offers but they have generously offered credits to support the Emergency Supply Finder as a part of their COVID-19 efforts.
Support for COVID-19 Apps
To us, Markk has always been a platform for the community to share live information with each other so everyone can make more informed decisions. We will keep improving the Markk platform to help the community with live and reliable information about places nearby.