Map Styles Map styles provide the visual styling for the map. The map style can be set when the map is initialized and it can be changed using the setStyle function on a map object.
Learn more about Map Styles.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v2/trimblemaps-2.2.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v2/trimblemaps-2.2.0.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="menu">
<input
id="transportation"
type="radio"
name="rtoggle"
value="TRANSPORTATION"
checked="checked"
/>
<label for="transportation">transportation</label>
<input id="basic" type="radio" name="rtoggle" value="BASIC" />
<label for="basic">basic</label>
<input id="datalight" type="radio" name="rtoggle" value="DATALIGHT" />
<label for="datalight">datalight</label>
<input id="datadark" type="radio" name="rtoggle" value="DATADARK" />
<label for="datadark">datadark</label>
<input id="terrain" type="radio" name="rtoggle" value="TERRAIN" />
<label for="terrain">terrain</label>
<input id="satellite" type="radio" name="rtoggle" value="SATELLITE" />
<label for="satellite">satellite</label>
</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: [-99, 38], // starting position
zoom: 4 // starting zoom
});
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
switchLayer = function(elem) {
const styleId = elem.target.value;
map.setStyle(TrimbleMaps.Common.Style[styleId]);
}
for (let i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
</script>
</body>
</html>