Maps – 8 Free CSS, Bootstrap & Tailwind Sets
Maps is a pack of eight sets of lightweight interactive maps, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using its cards, buttons, list groups, form controls, tables and grid, and Tailwind CSS 4. The sets cover an SVG world map with focusable countries, a choropleth with a colour-blind-safe scale and a table view, a store locator with search and directions links, contact and location cards with a click-to-load OpenStreetMap embed, pin and marker styles, a Leaflet and OpenStreetMap set, a dark set and illustrated route and floor plan maps. None of them needs an API key, and only the Leaflet set loads a map library; the rest use inline SVG, CSS and at most a few lines of vanilla JavaScript.
A good web map starts with what the visitor needs to find, not with the biggest map library. A store page usually needs an address, opening hours and a directions link more than a draggable map, and a world map of twelve countries does not need 300 KB of tiles and scripts. Whatever the map shows should also be available as text: a list of locations, a table of values or a written route, because many visitors cannot use a map by pointer and screen readers cannot read one at all. Interactive regions and pins need to be real buttons with names and a visible focus style, colour scales should stay readable for colour-blind visitors and be backed by numbers, and embeds from third parties are best loaded only when the visitor asks for them.
