I’ll give a brief overview of the project to add context. The project is essentially creating an interactive React-based UI, using a map with Mapbox GL JS. The users are intended to both engage with and perform coverage analysis of specific data within the maps.

Triumph. My Success.

I have been working mainly on what could be described as a Setup for the main page. Recently, I implemented a feature for the project that allows a user to interact with the UI. The user draws a shape and retrieves the data within it to be included in their tailored data set for analysis.

Initially, what I had available to work with was, the large CSV dataset in the backend, and a component to retrieve this data that had already been completed by another team member. Mapbox also has a built in tool available with the Map component we are working with to perform this action, known as MapboxDraw. The challenge came through adapting it to React-Typescript.

While the tool works visually, it doesn’t automatically generate the data without creating a custom control that connects to actions performed on the map. I was able to get this feature to work, so that the user can draw a shape, get the data within the shape, and remove data from the filtered dataset.

Breakthrough. Tipping point.

Initially I was not sure of the best approach, whether or not to create a new Layer on the map or use a supplementary library to filter the data. I eventually learned that using an analysis tool like turf.js was the better option for this portion of the project due to the dynamic nature of the interactivity and how varied the locations could be. If I were to go the route of creating a new Layer, it would require creating one for every location.

Once I decided on a path, my next step was getting the data from the drawn shape. As mentioned previously, this required modifications made to the custom control I had built. I discovered the reason the tool was not functional was that the “actions” being performed on the map component were not correctly connected through this control. This mattered because even though the Draw tool was creating a visible shape, the points it was making were not referencing the map correctly. This results in a lack of data being generated. Once I figured out how to properly do this, the rest of this feature fell into place.

Reflection.

The Technology.

Up until this point in the project, I had been using the Mapbox technology “out-of-the-box.” As our project is developing an interactive UI, I had been focusing more on the visual aspect. Once I started to get into the functional part, I naturally developed a much more in depth knowledge on how Mapbox works, what its capabilities are, and how to modify these for use with other libraries. This led to a cascade of enhanced understanding of the language being used (Typescript), responsiveness, and performance qualities.

Myself.

I increasingly read through documentation when working on projects, but reading them for problem solving is more enlightening and engaging than reading purely for information. This is an obvious statement, but thinking through how I have approached projects in the past, it hasn’t been an intentional practice for myself. This has led me to some inefficient practices up front, that I would like to adjust going forward. Rather than spend so much time gathering information, I see myself creating a list of problems or unknowns, and setting out to seek definitive answers for these as a way to organize and economize my time.