MapMenu Add-on
Initialize a map with a Map Menu control. Learn more about the MapMenu add-on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.js"></script>
<script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-mapmenus-1.0.8.js"></script>
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-mapmenus-1.0.8.css" />
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const map = new TrimbleMaps.Map({
container: 'map', // container id
style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
center: [-74.2, 40.5],
zoom: 7
});
mapMenusOptions = {
showContentLayers: true,
showBaseStyles: true,
showCustomStyles: false,
showMobileStyles: false,
hideStyles: ['Accessible Dark', 'Accessible Light', 'Basic'],
hideLayers: ['3D Buildings'],
};
var ctrl = new TrimbleMapsControl.MapMenus(mapMenusOptions);
// Map#addControl takes an optional second argument to set the position of the control.
// If no position is specified the control defaults to `top-right`.
map.addControl(ctrl, "top-left");
</script>
</body>
</html>
MapMenu Add-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.js"></script>
<script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-mapmenus-1.0.8.js"></script>
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-mapmenus-1.0.8.css" />
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const map = new TrimbleMaps.Map({
container: 'map', // container id
style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
center: [-74.2, 40.5],
zoom: 7
});
mapMenusOptions = {
showContentLayers: true,
showBaseStyles: true,
showCustomStyles: false,
showMobileStyles: false,
hideStyles: ['Accessible Dark', 'Accessible Light', 'Basic'],
hideLayers: ['3D Buildings'],
};
var ctrl = new TrimbleMapsControl.MapMenus(mapMenusOptions);
// Map#addControl takes an optional second argument to set the position of the control.
// If no position is specified the control defaults to `top-right`.
map.addControl(ctrl, "top-left");
</script>
</body>
</html>