Customize the appearance and behavior of your maps
MapsAlive lets you add custom HTML, CSS, and JavaScript right within the Tour Builder. This makes it possible to add additional HTML elements to your tour and add your own styling with CSS without leaving MapsAlive.
HTML
You can specify your own HTML to display elements that are not part of your tour such as a legend, your own navigation menu, or checkboxes to allow users to show or hide markers on the map.
CSS
You can include any CSS you want to use with your tour. Typically, you would specify CSS to style HTML elements that you include within your tour, but you can also override the MapsAlive styles of certain elements within your tour.
JavaScript
You can also code your own JavaScript and make calls to the JavaScript API to dynamically control the behavior of your map such as changing the appearance of markers or selecting a hotspot.
Here is an example that shows how you can use your own CSS, JavaScript, and HTML to display the custom menu bar shown above the tour.
Below is the HTML, CSS, and JavaScript code used to create the custom menu bar in the tour above.
<div class="menu">
<div id="menu-item-1" class="menu-item" onclick="goToPage(1);"></div>
<div id="menu-item-2" class="menu-item" onclick="goToPage(2);"></div>
<div id="menu-item-3" class="menu-item" onclick="goToPage(3);"></div>
<div id="menu-item-4" class="menu-item" onclick="goToPage(4);"></div>
</div>.navbar {
display:flex;
cursor:pointer;
font-family: helvetica;
margin: 6px 0;
}
.navbar-item {
padding: 4px;
border: solid 1px green;
margin-right: 8px;
}
.navbar-item:hover {
background-color: #ccc;
}
.navbar-item.selected {
color: white;
background-color: #3d5056;
}function onEventTourLoaded(event) {
// Assign each page's name to its menu item.
for (const page of event.api.pages)
getMenuItem(page.number).innerHTML = page.name;
}
function onEventPageLoading(event) {
// Deselect all the menu items.
for (const page of event.api.pages)
getMenuItem(page.number).classList.remove('selected');
// Show the current page as selected.
getMenuItem(event.page.number).classList.add('selected');
}
function getMenuItem(pageNumber) {
// Get the menu item element for the page.
let id = `navbar-item-${pageNumber}`;
let e = document.getElementById(id);
return e;
}
function goToPage(pageNumber) {
MapsAlive.getApi().goToPage(pageNumber);
}