How two volunteer developers built a new online map with turn-by-turn navigation for this year’s 50km charity event
By: Jing Liu
The E.G.G Walkathon is an annual charity fundraising walk in Shanghai that raises money to improve food security of poor children in remote areas of China. For this year’s ninth annual event, over 5,000 people from 708 teams pledged to walk 50km in 12 hours.
Mapbox has powered the map for the walkathon since 2017, when Mapbox first came to China. Our growing involvement with the charity event reflects the growth of the Mapbox.cn team and the functionality of our maps in China.
The 2019 map offered walkers a host of new details and features, including more custom icons and styling, more background detail, and turn-by-turn directions. Built by two volunteers, it also represented a new approach to involving the Mapbox user community in positive impact efforts.
Volunteers power the new map
In 2017 and 2018, Mapbox developers directly built the walkathon event map. This year, the China team decided to invite the wider developer community in China to apply for the opportunity to collaborate with us to design, code, and experience the 2019 E.G.G. walkathon map.
From a shortlist of 17 candidates from the Mapbox developer community, the Mapbox China team selected two enthusiastic volunteers: Shen Yongfan申永范, a map designer, and Cheng Cheng 程诚, a front-end developer. Shen and Cheng joined our walkathon team 2 months before the event, and dove into designing and testing the maps. To top it off, Shen and Cheng joined Mapbox’s walkathon team!
Here’s what Shen and Cheng had to say about their experience building and designing the map:
Q: Why did you want to participate in the E.G.G. walkathon map design project?
Shen Yongfan: I first knew that this event was in Mapbox official WeChat. At that time, I was doing some style designs myself, and I felt that it would be a cool thing to do something with what I learned. However, I was worried that I would not be technical enough, but the Mapbox team was very supportive and helped me find a technical partner.
Cheng Cheng: It is a practical opportunity, so I saw this as a way to participate in this activity and develop my skills.
Q: What informed your design of the new map?
Shen Yongfan: When I received this project, the scope was quite open. In the early stage, Cheng Cheng and I brainstormed a variety of options. For example, we had an idea of approaching this like a game where you can unlock new levels as you progress. We thought that the map could transition between map styles to create different scenes, and then proceed to the next card point. What should dark night look like? What color should ‘spring’ be like? Then we made a few different style schemes with such a tone.
Cheng Cheng: We actually had a lot of exchanges in the early stage, and there were a lot of ideas. Sometimes we would discuss them together late into the night after work.
Q: What is something about the new map that you are particularly proud of?
Shen Yongfan: I wanted to use color to express information along the route. So we set each route to a different color, and built in a gradual color gradient along the route. We hoped that participants would feel the change, like warmth. The overall style is also relatively cartoon-like and lively.
Q: Do you have any reflections on your experience working with Mapbox tools?
Shen Yongfan: Mapbox and PS are quite similar, you can study it in depth, it is better to get started. hope the Mapbox developer community can grow and get better and better.
Cheng Cheng: The official documentation of Mapbox is worth reading, and it is quite detailed. I hope more and more people can use Mapbox to design a good-looking map.
Connect with our China team to learn more about building maps in China, and our Community team to learn more about how we can collaborate on positive impact projects.
Jing Liu - Social Media Operations - Mapbox | LinkedIn
A fresh map for the annual Shanghai E.G.G. Walkathon was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.