As part of the capstone project at OSU, my team is creating a set of React components that interact with a master container component to display fire/Emergency Medical Services (EMS) response data, as well as road coverage and proximity data, depending on provided metadata. These visualizations include maps, charts, and plots that will be demonstrated in the final deliverable. The team divided the work amongst its members, having each person oversee a single deliverable component, while also supporting others’ work in the form of code reviews and pull request reviews while integrating the different components within the project.
My deliverable, in essence, involves displaying a series of vectors (provided by the company in the form of GeoJson) on a map. Since this is a brand-new project, there was no prior work to build off from, and I got to design how the base map component will work from the ground up. It seemed that the best approach for posterity was a modular approach to the map-related components. Hence, the following approach was taken:
A BaseMap file will act as the parent container that would call a Map component and the map-related deliverables – the VectorMap and PointMap component. The Map component will make the actual map instance that will be exported as a React context, which the VectorMap and PointMap will use to render on. Levrum (our sponsor) will send metadata for the renders through the master component, which will process and distribute it to its child components. By combining this data received as props and the map instance in the form of a context, VectorMap and PointMap stay DRY while remaining modular.
This is where my favorite technology in the project comes in – the Mapbox API. This API provides ready-made, highly customizable, live updating data-based maps for web and mobile development. Layering, effects, rendering – almost everything gets handled by making simple API calls on the map instance, provided that the data to use on said call is provided by the developer. This makes implementing dynamic and reactive maps extremely easy in a JavaScript environment.
With little difficulty, I can set up a map instance and display it in the browser:
Change the map mode:
… and add layers, including hover effects, points, custom lines, highlights, animations, and more. Another great aspect of the service is that with the token provided from Mapbox after signing up, 50,000 requests are free of charge – more than enough for the developmental phase. The high-quality, easy-to-use, and free-of-charge nature of Mapbox API has impressed me, and by the looks of it, has impressed other developers as well. Already, I am starting to recognize news channels’ interactive maps in special articles using the Mapbox API, and even the navigation on a friend’s Toyota seemed to be using Mapbox for their GPS service.
Perhaps, I’ve praised the API too much, so I’ll mention a recent downside that I found. The documentation on the API’s functional elements is fantastic. However, the documentation on styling seemed a bit lacking. Mapbox has a gallery showing off the styles that their API enables, but I think they could have added more on optional stylistic and UI element-related documentation.
Despite this negative, Mapbox has too many positives that ended up saving me a lot of time in setting up the foundation for the BaseMap and Map component. The team currently has a working prototype of most of the features. VectorMap is pulling GeoJson data from a server fetch call and correctly displaying custom lines onto the map instance that is rendered on screen. Looking back the past few weeks, Mapbox has impressed me to a point where I can say with great confidence that it is my favorite technology I learned from this project.
Leave a Reply