--- title: "Map UI: anatomy, variants and examples | Kombai" description: "A map shows places, routes or areas on an interactive view of the world, so people can see where things are and how far apart they sit." canonical_url: https://kombai.com/glossary/map/ author: "The Kombai Team" --- # Map A map shows places, routes or areas on an interactive view of the world, so people can see where things are and how far apart they sit. - Also called: map pin, map view - Platforms: Web, Mobile - In the Kombai gallery: [68 web designs](https://kombai.com/gallery/web/map/), [48 mobile designs](https://kombai.com/gallery/mobile/map/) - [Cartika](https://kombai.com/gallery/inspirations/map-web-19/) (Web) - [Larder](https://kombai.com/gallery/inspirations/map-ios-35/) (Mobile) - [Rantau](https://kombai.com/gallery/inspirations/map-ios-43/) (Mobile) ## What is a map? A map is an interactive view of a real area, with markers, routes or shaded regions placed on top of it. People pan and zoom to explore, and select a marker to see details about that place. - Markers, lines and shaded areas sit on a base map of land, water and roads. - Zoom and location controls float over the map, usually in a corner. ## When to use map - **Location decides.** People choose by distance or neighborhood, like a stay or a pickup point. - **Routes and progress.** A trip, a delivery or a run that moves across a place. - **Patterns by region.** Data that changes with place, like visitors by country. ## When not to use one - **Location barely matters.** If people pick by price or name, lead with a list. - **One fixed address.** Show the address with a static map image and a directions link. - **Exact comparisons.** For values people compare closely, use a table or a bar chart. ## Anatomy 1. **Base map**: Land, water and roads 2. **Marker**: One pin per place 3. **Cluster**: Nearby pins merged 4. **Place card**: Details for the selected pin 5. **Controls**: Zoom and reset 6. **States**: Pin, selected, cluster, focus ## Variants We sorted every map design in the Kombai gallery and found six patterns. ### 1. Pin maps The default. A pin for each place, often colored or iconed by category, with a card for the one people select. - [Meridley](https://kombai.com/gallery/inspirations/map-web-33/) (Web) - [Larkway](https://kombai.com/gallery/inspirations/map-ios-45/) (Mobile) - [Ebbline](https://kombai.com/gallery/inspirations/map-ios-22/) (Mobile) ### 2. Price and count markers Markers that carry a label, like a nightly price or a number of places, and clusters that merge nearby pins into one bubble. - [Hearthway](https://kombai.com/gallery/inspirations/map-web-45/) (Web) - [Ladle](https://kombai.com/gallery/inspirations/map-ios-27/) (Mobile) - [Vellum](https://kombai.com/gallery/inspirations/map-ios-47/) (Mobile) ### 3. Route maps A line drawn from start to finish, with the time, the distance or the next turn beside it. - [Basaltway](https://kombai.com/gallery/inspirations/map-ios-3/) (Mobile) - [Terrakit](https://kombai.com/gallery/inspirations/map-web-56/) (Web) - [Nusara Go](https://kombai.com/gallery/inspirations/map-ios-39/) (Mobile) ### 4. Location pickers A pin fixed in the center while people drag the map under it, then confirm the spot with one button. - [Fathomry](https://kombai.com/gallery/inspirations/map-ios-14/) (Mobile) - [Marloft](https://kombai.com/gallery/inspirations/map-web-49/) (Web) - [Wend](https://kombai.com/gallery/inspirations/map-ios-48/) (Mobile) ### 5. Data maps World maps and globes shaded by value or dotted with live activity, inside analytics dashboards. - [Northloom](https://kombai.com/gallery/inspirations/map-web-34/) (Web) - [Quillo](https://kombai.com/gallery/inspirations/map-web-12/) (Web) - [Orbtrail](https://kombai.com/gallery/inspirations/map-web-43/) (Web) ### 6. Map insets A small, mostly static map inside a card that shows one address, with a link to directions. - [Tavolo](https://kombai.com/gallery/inspirations/map-ios-44/) (Mobile) - [Mendra Health](https://kombai.com/gallery/inspirations/map-ios-31/) (Mobile) - [Aureline Atelier](https://kombai.com/gallery/inspirations/map-web-28/) (Web) ## Where maps show up ### Search results Homes, rental cars and childcare listings split the screen between a results list and a pin map. - [Belmara](https://kombai.com/gallery/inspirations/map-web-1/) (Web) - [Corso](https://kombai.com/gallery/inspirations/map-web-2/) (Web) - [Kindori](https://kombai.com/gallery/inspirations/map-web-17/) (Web) ### Delivery and ride tracking A live marker moves along the route while a panel shows the driver, the order and the arrival time. - [Motia](https://kombai.com/gallery/inspirations/map-ios-25/) (Mobile) - [Sprigg](https://kombai.com/gallery/inspirations/map-web-13/) (Web) - [Tracking your gift](https://kombai.com/gallery/inspirations/map-web-11/) (Web) ### Store finders Nearby branches as pins, with the selected store, its distance and its hours in a card or list. - [Kestrel & Pine](https://kombai.com/gallery/inspirations/map-web-39/) (Web) - [Harvest Lane](https://kombai.com/gallery/inspirations/map-ios-29/) (Mobile) - [Vantia](https://kombai.com/gallery/inspirations/map-ios-38/) (Mobile) ### Runs, rides and hikes Recorded routes traced on the map, with pace, distance or elevation next to them. - [Kestrel](https://kombai.com/gallery/inspirations/map-ios-24/) (Mobile) - [Northpace](https://kombai.com/gallery/inspirations/map-ios-23/) (Mobile) - [Paceloop](https://kombai.com/gallery/inspirations/map-ios-20/) (Mobile) ## Map vs similar components | | [Map](https://kombai.com/glossary/map/) | [Stacked list](https://kombai.com/glossary/stacked-list/) | [Table](https://kombai.com/glossary/table/) | |---|---|---|---| | Shows | Where things are | One item per row | Values in rows and columns | | Answers | What is near me or on the way? | Which of these do I want? | How do these compare? | | Best for | Places, routes and areas | Browsing and picking one item | Sorting and comparing many fields | ## Build notes - Make each marker a