PPL: work with map documents from Mapy.cz in React

When you say "working with map documents", many developers may be scared off because it is definitely not a simple topic. We weren't scared by this work; on the contrary - creating an interactive map of PPL client's dispensing points was a challenge for us.

It really depends on what technology you want to work with the maps in. After consulting with the client, we chose Mapy.cz and the React application to create the interactive map.

And what next?

Step 1: We wrote our own library

Any available library did not cover the client's list of requirements for map functionality. So we had no choice but to write our own library.

 Step 2: We created our own React components

Mapy.cz provides an official JS API that adds a custom API to the global context of the page in the browser. To make it easier to handle maps directly in React, we created a library where we created a custom React component for each class that handles one class from the API internally. This allows us to work with each map layer and its elements as components and to use other React components in maps.

Step 3: We solved the map redraw problem

Probably the most significant issue we ran into was map performance related to loading data from the client API. The problem was that every time a point was added to the map, it would trigger a recalculation and redraw of the entire map. In our original implementation, we created an instance of the Marker class from the map API for each point and added it to the map itself. This solution caused adding just a few hundred points at a time to cause the same number of redraws of the entire map, and even that number of redraws caused a visible "stall" in the application.

We solved the problem by simply modifying the implementation of adding a point to the map to wait for all point instances to be created, and adding them to the map as a single action with one redraw. 

Step 4: We delivered the application and clients are already using it

You can already see the shape of the map on the PPL website https://www.ppl.cz/en/pickup-points-map