Appearance
The appearance panel offers methods to tailor the visual style of both the map and UI.
The Primary color primaryColor will be applied on various elements such as the active state of the search field or the main popup action button, allowing you to personalize the map with your brand color.
Custom CSS
For extensive modifications, custom CSS can be added to further customize the map's appearance.
Below, you'll find some basic examples.
/* changing container background color */
.mapplic-container { background-color: #f0ede7; }
/* removing border radius from tooltip */
.mapplic-tooltip { border-radius: 0; }
/* increasing font size of title in tooltips */
.mapplic-tooltip h4 { font-size: 24px; }Locations styles
Location styles enable advanced customization of markers or interactive SVG elements. While the color property can be used for basic styling, here you have the flexibility to define distinct colors for the base, hover, and active states, or style the strokes and label text.
You can assign a location style to a specific location using the style property.
| Property | Key | Description |
|---|---|---|
| Class | class * | Unique layer class, also used as a CSS class. |
| Fill | base-colorhover-coloractive-color | Fill color of the base, hover and active states. |
| Stroke | base-strokehover-strokeactive-stroke | Stroke (border) color of the base, hover and active states. |
| Stroke width | stroke-width | Width of the stroke (all states). |
| Text color | text-color | Color of the label text. |
| Marker | marker | Apply the specified style to the location's marker. |
| SVG | svg | Apply the specified style to the location's SVG element. |
The style class will be added to the marker/element as CSS class, so it can also be used for custom styling.
For example, if you wanted to make the stroke dashed on active state only, the following custom CSS could be used.
.my-style-class.mapplic-active {
stroke-dasharray: 2 2;
}