Service Centre Map

This map was built to be a reference for all client service centres across the American continent. After the client requested that the application did not use a mapping service for the main part, the maps were provided by the graphics team as SVG file. This allowed me to add a high amount of interactivity and styling. It also created many problems!

As I used it to build the app, I had to work the SVG maps into React components. This proved to be more difficult than expected as the SVGs were extremely large even when put through an SVG optimiser.

Another time-consuming aspect was manually placing all of the location pins. I tried to create a script to do it automatically but it only ended up being about 80% accurate. In the end we had unfortunately to settle for manual coordinate placement using a grid pattern overlay I manually added to the SVG maps.

A further issue that was encountered was of pin crowding - where multiple locations that were close to each other (in one case on the same street) would take up the same position of any other pins added before it. Adding zoom functionality to the map would have been a complex task involving matrix transformations and programatically moving around existing pins to match, but fortunately the client was fine with the pins being very slightly offset to the location to show that there were multiple!