<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.css" />
<script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#menu {
background: #fff;
font-family: 'Open Sans', sans-serif;
padding: 10px;
position: absolute;
right: 8px;
top: 8px;
}
input[type='radio'] {
accent-color: #005f9e;
margin-bottom: 8px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="menu">
<input id="accessiblelight" type="radio" name="rtoggle" value="ACCESSIBLE_LIGHT" />
<label for="accessiblelight">accessible_light</label>
<br />
<input id="accessibledark" type="radio" name="rtoggle" value="ACCESSIBLE_DARK" />
<label for="accessibledark">accessible_dark</label>
<br />
<input id="basic" type="radio" name="rtoggle" value="BASIC" />
<label for="basic">basic</label>
<br />
<input id="basicdark" type="radio" name="rtoggle" value="BASIC_DARK" />
<label for="basicdark">basic_dark</label>
<br />
<input id="datalight" type="radio" name="rtoggle" value="DATALIGHT" />
<label for="datalight">datalight</label>
<br />
<input id="datadark" type="radio" name="rtoggle" value="DATADARK" />
<label for="datadark">datadark</label>
<br />
<input id="mobile_day" type="radio" name="rtoggle" value="MOBILE_DAY" />
<label for="mobile_day">mobile_day</label>
<br />
<input id="mobile_night" type="radio" name="rtoggle" value="MOBILE_NIGHT" />
<label for="mobile_night">mobile_night</label>
<br />
<input id="mobile_satellite" type="radio" name="rtoggle" value="MOBILE_SATELLITE" />
<label for="mobile_satellite">mobile_satellite</label>
<br />
<input id="satellite" type="radio" name="rtoggle" value="SATELLITE" />
<label for="satellite">satellite</label>
<br />
<input id="simple_light" type="radio" name="rtoggle" value="SIMPLE_LIGHT" />
<label for="simple_light">simple_light</label>
<br />
<input id="simple_dark" type="radio" name="rtoggle" value="SIMPLE_DARK" />
<label for="simple_dark">simple_dark</label>
<br />
<input id="terrain" type="radio" name="rtoggle" value="TERRAIN" />
<label for="terrain">terrain</label>
<br />
<input id="transportation"
type="radio"
name="rtoggle"
value="TRANSPORTATION"
checked="checked"
/>
<label for="transportation">transportation</label>
<br />
<input id="transportationdark"
type="radio"
name="rtoggle"
value="TRANSPORTATION_DARK"
/>
<label for="transportationdark">transportation_dark</label>
<br />
</div>
<script>
TrimbleMaps.setAPIKey('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');
function switchLayer (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>