Custom CSS
Apply custom CSS to fully control your map's appearance.
What it does
Inject custom CSS that overrides the default map styles, giving you full control over every visual element in your embedded map.
Plan availability
Custom CSS is an Enterprise plan feature.
How to use
In the map editor, go to the Styling section. Enter your CSS rules in the CSS Override field (cssOverride).
Tailwind CSS in templates
When writing card or popup HTML templates, you can use Tailwind CSS utility classes directly. Mapsemble compiles them automatically — no build step required on your end.
Scope
Custom CSS applies to the embedded map and is scoped to the map container. Your styles won't leak out to the host page, and the host page's styles won't interfere with your map.
What you can style
- Card and popup containers
- Filter controls and buttons
- Pagination
- Map controls (zoom buttons, fullscreen, etc.)
- Typography and colors
- Responsive behavior
Dark mode
Set darkModeEnabled to toggle dark mode support. When enabled, the map respects the user's system preference. You can provide separate colors for dark mode using the dark-mode-specific properties listed below.
Theming properties
These properties are available on all plans via the map config:
| Property | Description |
|---|---|
buttonColor / buttonColorHover |
Primary button color and hover state |
buttonColorDark / buttonColorHoverDark |
Dark mode button colors |
backgroundColor / backgroundColorDark |
Background colors for light and dark mode |
mapGap |
Gap between the map and card list (default: 1.25rem) |
mapRadius |
Border radius for components (default: 0.75rem) |
Badge visibility
| Property | Description | Plan |
|---|---|---|
hideBadge |
Completely hide the Mapsemble badge | Enterprise |
smallBadge |
Show a smaller, less prominent badge | Pro and Enterprise |
Tips
- Use your browser's DevTools to inspect element classes in the embedded map. This is the fastest way to find the right selectors.
- Test your CSS in both light and dark modes if dark mode is enabled.
- Test on mobile devices — use mobile-specific CSS or media queries where needed.
- Start with the theming properties before resorting to custom CSS. They cover the most common branding needs without requiring Enterprise.