How We Developed an Interactive Map for a Fundraising Website Supporting Ukraine

Since Russia invaded Ukraine back in February, 2022, GetDevDone along with our partners have been showing unwavering support for that country by making donations and helping in every other way we can.

Today, we want to tell you about one of the recent fundraising initiatives organized by our European friends. 

The Project 

The Finnish organization Karavanen started a new project to raise money for Ukraine. Prior to this, they have already collected 170,000 € and sent cars with equipment from Finland to Ukraine. Everybody is helping voluntarily with no financial reward whatsoever. All donations go straight to Ukrainians who need them so badly. 

As part of the new project, a person will walk from Turku in Finland to the Embassy of Ukraine in Helsinki, covering a distance of about 200 km. En route, they will be collecting money for Ukraine by selling segments of the trip to donors. A donor can decide to sponsor a part of the trip, for example, a street in Helsinki.

Karavanen asked Site Logic to handle the web development side of the project. Site Logic, an agency from Helsinki, Finland, has been our partner since 2008. It specializes in web software development, e-commerce, accessibility and UX design. 

The part of our team who did some work for the agency was in Ukraine when the war broke out, and Site Logic sent us multiple messages of support and encouragement at that time. We are very grateful for their empathy and kindness. 

Site Logic gladly accepted the opportunity to give Karavanen a helping hand in collecting money for the war-torn nation, doing the entire work free of charge. At some point, however, they found themselves short of available developers and reached out to us for assistance with one of the key features. 

We were excited to become involved in this great initiative. More than that. We volunteered to do the work gratis as we are doing everything possible to help Ukraine resist the aggressor and come out victorious. 

The Challenge

Here are the specifications and requirements that we were expected to meet. 

• We were provided with a map that was made using Google Maps. The map was supposed to be embedded in Shopify. The client wanted us to create the front-end part of the map.
• Each segment of the trip was represented by products in Shopify that donors could purchase. 
• The map had a route consisting of about 160+ stops. The client provided us with a link to the map with all the stops. 
• The segments that could be bought were the parts of the route separated by stops. Every other segment line was supposed to be blue and every other yellow – the colors of the national flag of Ukraine. 
• When a user clicked on a segment, they would be directed to the corresponding Shopify product page. We were free to specify that link either in JSON or a similar format on the server, with no UI required. 
• In the middle of each segment, we needed to add a marker. Clicking on it would open an information window with the name of the segment (e.g., Åbo Hamn) and a button with a link to the Shopify URL (a different URL for each segment). 

The Solution

Based on the client’s requirements, we created the markup for the map (with alternating blue and yellow segments as requested), added markers with information windows and buttons clicking on which opens respective Shopify pages where donors can buy products. 

One thing to note is when we created the map, there were many pins that were overlapping each other, and the map on the whole looked pretty loaded. Thus, we came up with the idea to add the pins clusterization that would make the map look better.

Here is the outcome: 

Initially, the client had some comments regarding the slow map zooming speed. We quickly fixed the problem, optimizing the code for faster operation. 

---

We would like to take this chance to thank our Finnish friends for their efforts. It was a real pleasure for us to collaborate on a project that could bring Ukraine closer to victory and peace! 

If you want to participate in this noble initiative, we encourage you to visit the Karavanen website and make a donation.