Interactive Geospatial Map

The problem

The sales team was working from Excel spreadsheets with 1,600+ rows of advertising assets. Each row had coordinates, asset type, dimensions, and availability, but none of that information was spatial. When a client asked "what do you have near the Corniche?" someone had to manually filter by area codes and hope the naming conventions were consistent. Planning a campaign that covered specific neighborhoods meant printing a paper map and marking it up by hand. There was no way to see asset density, identify coverage gaps, or layer in context like nearby schools, parks, or bus stops that would actually inform placement decisions.

The approach

I built a WebGL-powered interactive map that turns those spreadsheets into something you can actually think with. The goal was to make it feel instant, even with 1,600+ markers on screen at once.

• Built with Vite and React for a snappy single-page experience, with MapLibre GL JS handling all WebGL map rendering and tile management
• Wrote an Excel parsing layer using the xlsx library that ingests the team's existing spreadsheet format directly, so nobody had to change how they maintain their data
• Implemented color-coded markers for all 7 asset types (billboards, lamppost banners, bridge banners, unipoles, and others) so you can instantly read the asset mix in any area
• Built search and filtering that lets you narrow by asset type, area, availability, and size, with results updating on the map in real time
• Added contextual overlay layers for schools, parks, bus stops, and other points of interest so campaign planners can evaluate locations against foot traffic and audience demographics
• Created a detail panel that shows full asset information on click, including photos, dimensions, pricing, and current booking status
• Ensured the entire interface is responsive so the sales team can pull it up on tablets during client meetings

The outcome

Client meetings changed completely. Instead of flipping through spreadsheet printouts, the sales team could pull up the map, zoom into the client's target area, and build a campaign visually in real time. The overlay layers became a selling tool. Showing a client that their billboard sits 200 meters from three schools and a major bus stop tells a story that a spreadsheet row never could. The filtering saved hours of manual work per campaign proposal. Asset utilization went up because the team could finally see underperforming locations and proactively pitch them to the right clients based on nearby context.

What I learned

MapLibre GL is remarkably performant for this kind of work, but you have to respect the rendering pipeline. Throwing 1,600 individual markers at it naively will tank your frame rate. Clustering at lower zoom levels and switching to individual markers as you zoom in made the experience smooth on every device. I also learned that the biggest impact came from the simplest feature: color coding by asset type. It sounds trivial, but being able to glance at a neighborhood and immediately see that it's heavy on lamppost banners but has no billboards changed how the team thought about inventory gaps. Sometimes the visualization is the insight.