When embedding a map in your website, you want to make sure it aligns with the look and feel of your brand. Check this example:
Staying in brand helps your map integrate seamlessly with your website and provide a consistent user experience.
We’ve gathered some best practices to achieve a cohesive brand experience with your interactive map.
Brand the map content panel
Add your logo
Start by adding your company or organization logo to your map.
The width of the content panel is 400px. We recommend keeping the height of the image to a minimum so the user can view as much as possible of the information on the map content panel without scrolling.
For the same reason, make sure, you don’t leave blank padding on top and bottom of your logo.
If you are going to use a background color for the content panel, we recommend adding a logo with a transparent background so it merges well with the content panel’s background.
You upload or drop your logo from the Map Home menu.
The logo appears on the top left corner of your map.
Match your brand color
Use the colors menu to change the toolbar, call-to-action buttons and content panel background’s color:
The toolbar and the call to action button are black by default but you can change them to match your brand’s colors. If you don’t know the color code you need, use a color picker extension like this one to identify colors.
The background color is white by default, but you can easily change it to a color of your choice. The text’s color will automatically adjust based on the darkness or lightness of the background color you have chosen. If your website has a dark theme, we recommend using darker colors that complement it. However, keep in mind that text might be more difficult to read on certain background colors.
Match your brand fonts
You can use custom CSS to personalize your fonts and align them with your brand’s chosen fonts. This can be done by importing a font from sources such as Google Fonts or the web, or by using a font that you host on your own server. You can find examples of CSS in our CSS customization gallery.
Brand the basemap style
The basemap style defines the colors of the land, water, parks, and all the other details on the map such as streets, buildings and labels.
You can choose a basemap style from our diverse gallery of options that matches with your brand’s aesthetic and requirements.
To select a map style from the basemap gallery, go to Settings → Basemap → Click on “Edit basemap”
If you want to take it a step further and create your own personalized basemap like this example you can achieve this with the help of tools that integrate with Mapme like Maptiler or Mapbox. We have a dedicated post where you can read more about it.
If you want to emphasize specific areas on your map, such as states or countries, similar to this example, you can achieve this using the Mapme drawing feature. You can quickly learn how to do this by reading this post., which provides step-by-step guidance on the process.
Brand your markers
Image markers can be leveraged to add branding elements to both the content panel and the basemap.
However, most logos are not suitable to be used directly as markers due to their intricate graphic details and accompanying text.
To address this, it is recommended to use a logo submark, which is a smaller and simplified version of the primary logo. The logo submark should retain the essence and recognition of the primary logo while being more suitable for marker usage.
For optimal integration with the map, we recommend using a logo submark with a transparent background or to position it within a circular shape. This ensures that the marker blends well with the map’s visual design.
To incorporate the logo submark, access the marker customization menu of a specific category or location, and upload or select the logo submark image accordingly. You can also set all your map markers to use your logo by using the marker override feature. See this example.
Once you upload it, it will be display on both the map and the content panel:
