Mapme provides many options to add branding to your interactive map. For example, you can add your logo in the map overview content panel.
In some cases, you might also want to display your company logo on the basemap itself. This logo will always be visible when your map users are browsing your map.
We created this simple guide to let you easily add your company logo over your map.
There are 3 main steps needed:
- Create and host the image
- Paste the code template in the Mapme CSS editor
- Customize the CSS code
Host the image
To get started, select the image you would like to overlay on your map.
We recommend keeping the size small so that the image does not cover too much of the map, especially on mobile devices. The maximum size we recommend is 150px by 150px.
You can use any image format, even an animated gif. If your image is not square, we recommend using transparent png so that the image will blend seamlessly with the map background.
If you have access to a web server, you can place the image on your web server and get the image URL. Otherwise, you can use an image hosting service like imgbb.
Copy/Paste the CSS template
Copy and paste the CSS template below in the CSS editor.
/*Add image overlay on basemap */
.map-container:after {
content: '';
display: block;
background-size: auto 100%;
background-position: right center;
background: url(https://mapme.com/wp-content/uploads/2015/12/mainlogo-1.jpg) no-repeat transparent; /*your image URL */
width: 115px; /*your image width*/
height: 48px; /*your image height*/
position: absolute;
bottom: 10%; /*location from bottom*/
right: 0px; /*location from right in px*/
}
Customize the CSS code
Customize the CSS code to fit your needs.
You will need to replace the image URL with your own image URL and change the height and width to match your image size.
You can also adjust the location of the image. For example, you can change the padding between the image and the right edge of the map by changing the “right” value.