These are features that I am most proud of, which I created during my time as a Full Stack engineer at McSteen Land Surveyors when redesigning their order processing application.

County Map

Summary

These maps are one of the best features that I have developed. It can break down any SVG image into searchable sections. In the case of the state maps, it makes the counties searchable, but I have also used this feature for searching elements on the periodic table.

Features

• Dynamically builds an SVG image from stored parameters in a database, like name and county path string.
• By getting a list of elements from the database, it:
  • reduced the application bundle (storage space required) size
  • made the feature scalable, so more states can be added easily
  • simplified the code and made the styling easier to maintain
• Makes the IDs of SVG elements searchable, then applies styles to them so they are visually apparent.

At McSteen, they serve many states, and every county with each state has a website and or method for obtaining information about a given property. This page was designed to help quickly find a county and, when clicked, routed to a page with all the details for that county.

I designed this page with admins and field workers on iPads in mind. For instance, I have yet to learn what each county looks like, so I must type the name in the search bar. But for field workers, especially in the winter, the less the screen needs to be touched, the better, so they could click on the county because they know the county's shape and locations on the map.

Dark Mode for Google Maps

Summary

Added dark mode support for the maps used across the application, especially the static maps for the property on each order and the dynamic maps used for viewing the locations of all the orders

Features

• Made customizable configurations for light and dark maps
• This allowed for a consistent look across the app, even when viewing different map types

Light & Dark: Static Google Maps

Light & Dark: Dynamic Google Maps