A lightweight interactive world map built with Leaflet and vanilla JavaScript, featuring branded location pins, clustering, and multiple base views (map, satellite, hybrid, light gray). Embedded on lifewood.com to visualize the company's worldwide presence.
Lifewood operates across 30+ countries, but their website only described that reach in text. A list of country names does not show scale, and a static image cannot be explored. They needed a way for visitors to actually see the global footprint and interact with it, while keeping the look consistent with the brand.
A clean, embeddable map that drops into the company site through a single iframe. Each office location sits on the map as a branded pin, and clicking one zooms in and shows the country with its flag.
A few decisions I'm proud of:
The whole thing stays light. Leaflet handles the map, markercluster keeps dense areas readable, and the tiles come straight from OpenStreetMap and Esri, so there are no heavy dependencies.
Branded pins: custom green markers that match Lifewood's palette instead of the default blue Leaflet pin
Smart clustering: crowded regions like Southeast Asia group into a single count bubble and spread out as you zoom, so nothing overlaps
Multiple views: a layer switcher lets visitors flip between map, satellite, hybrid, and light gray styles
The trickiest part was not the map itself but the embed. I learned that an iframe has its own rules, and features like fullscreen quietly fail unless the parent page allows them. It pushed me to think about how a component behaves inside someone else's site, not just on its own. If I revisited it, I'd add office details and resource counts to each popup for more context.