React Locations Map
Where your offices, fabs, and labs actually are — plotted from latitude and longitude, with the contact details beside the map rather than three clicks away.
Where we are
Installation
Props
| Prop | Type | Description |
|---|---|---|
| locations | CompanyLocation[] | { id, name, city, country, kind, lat, lon, address?, phone?, email? } |
| title | string | Heading |
kind is hq, office, fab, or lab, which drives the marker colour and the legend counts.
No tiles, no key, no third-party request
Coordinates are projected equirectangularly — longitude maps linearly across the width, latitude down the height, clipped to 84°N–60°S so the usable landmass fills the frame instead of wasting a third of it on Antarctica. Continents are hand-simplified polygons in the source: enough outline to give the dots geographic meaning, at a fraction of the weight of a real TopoJSON.
That choice is deliberate and worth keeping. A locations map usually lives on a contact or about page, which is exactly where a tile provider's request would fire before a visitor has answered your cookie banner — turning a decorative map into a consent problem. This renders entirely from your own data with zero network calls.
The trade is honest: it is a schematic, not a survey. Country borders are absent and the outlines are coarse. If you need real cartography — driving directions, street detail, satellite — use a proper map library and gate it behind consent.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.