A lightweight, embeddable web map built with Leaflet and Vite that plots Lifewood's operating countries across Africa (and Bangladesh) as interactive pins, with hover previews, click-to-lock popups, and fly-to navigation.
Lifewood works across many countries, but a plain list does not show that reach in a way people feel. A static image of a map cannot be explored, and most map tools are heavy or hard to drop into an existing site. The team needed a simple, visual way to show where they operate, something light enough to embed anywhere and clear enough for anyone to use at a glance.
The Lifewood Africa Map turns that list of countries into something you can explore. Each location shows up as a green pin, and the map guides your attention as you move around it.
Tech stack: Leaflet handles the map and markers, OpenStreetMap provides the tiles, the flag-icons library adds the flags, and Vite bundles a fast, simple front end in plain JavaScript.
Hover and click behavior: Pins preview a country on hover and lock open on click, so you can browse quickly or focus on one place without things flickering away
Flags for instant recognition: Each popup pairs the country name with its flag, so people recognize places faster
Built to embed: The map fills its container and stays light, so it drops cleanly into an iframe on any page
This project showed me how much small interactions shape how a tool feels. Getting hover, click, and reset to work together without clashing took more care than I expected, and that is where most of the polish lived. I also learned to design for embedding from the start instead of treating it as an afterthought. If I revisited it, I'd pull the country data out into its own file and add a quick search so people can jump straight to a place.