Map View Overlays
You can add custom overlays to your map view instance, such as a map title or branding elements like logos or company names.
Map Title
Add a map title bar to your map by specifying a value for your map's overlays.title configuration option. For example. the following configuration will set the map title to “Current Temps”:
const map = new views.Map(document.getElementById('mapview'), {
map: {
layers: {
data: ['temperatures']
},
center: 'minneapolis,mn',
zoom: 6
},
overlays: {
title: 'Current Temps'
}
});Which will result in the following map:
Branding
In addition to a map title, you can add a logo or company name to style your map according to your specific brand. Just provide either an HTML string to your map's overlays.branding.html configuration property, or an image URL for overlays.branding.img.
The following configuration will display a logo image in the bottom right corner of the map view:
const map = new views.Map(document.getElementById('mapview'), {
map: {
layers: {
data: ['temperatures']
},
center: 'minneapolis,mn',
zoom: 6
},
overlays: {
title: 'Current Temps',
branding: {
img: 'https://www.mydomain.com/img/logo.png'
}
}
});Alternatively, using HTML instead of an image provides additional customization options. The following will output :
const map = new views.Map(document.getElementById('mapview'), {
map: {
layers: {
data: ['temperatures']
},
center: 'minneapolis,mn',
zoom: 6
},
overlays: {
title: 'Current Temps',
branding: {
html: '<div class="mapview-branding">My Company</div>'
}
}
});