Custom CSS & Embed Styling Guide

A map that looks like a third-party tool can break the user experience and reduce trust, especially when embedded in a client-facing portal or corporate intranet. GeoMap's "White-Label" styling engine allows you to customize the look and feel of the map interface, the filter sidebar, and the pin labels using standard CSS variables and iframe parameters.

Styling the Container: Iframe Parameters

When embedding GeoMap, you have control over the frame's appearance.
- **Responsive Sizing:** Use dynamic height (vh) and width (%) settings to ensure the map fills its parent container perfectly on all screen sizes.
- **Chrome Removal:** Use URL parameters to hide the "GeoMap Branding" or "Title Bar," creating a seamless, integrated look that makes the map feel like a native part of your application or Smartsheet dashboard.

The CSS Variable Engine

GeoMap exposes a suite of CSS variables that you can override to match your corporate brand guide.
1. **Color Palette:** Change the --primary-color to match your logo, and adjust the --sidebar-bg for dark-mode or light-mode compatibility.
2. **Typography:** Override default fonts with your brand's specific font families (e.g., Inter, Montserrat, or Roboto) to maintain a consistent visual identity.
3. **Button & Interface Radius:** Adjust the "Roundness" of UI elements to match your company's design system, whether you prefer sharp corporate edges or modern, rounded corners.

Industrial SME Insight: Embedded Trust

Research shows that stakeholders are 40% more likely to interact with data that feels "Native" to their environment. By taking 10 minutes to align the GeoMap CSS with your corporate colors, you significantly increase the adoption and perceived value of the data you are presenting. We recommend creating a "Global Stylesheet" for your GeoMap embeds, ensuring that every map shared by your team maintains a professional, high-fidelity appearance that reflects your organization's commitment to quality and attention to detail.