<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.8.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.8.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="traffic" type="checkbox" name="traffic" />
<label for="traffic">Traffic</label>
<input id="camera" type="checkbox" name="camera" />
<label for="camera">Traffic Camera</label>
<input id="incident" type="checkbox" name="incident" />
<label for="incident">Traffic Incident</label>
<input id="restriction" type="checkbox" name="restriction" />
<label for="restriction">Truck Restriction</label>
<input id="cloud" type="checkbox" name="cloud" />
<label for="cloud">Weather Cloud</label>
<input id="radar" type="checkbox" name="radar" />
<label for="radar">Weather Radar</label>
<input id="alert" type="checkbox" name="alert" />
<label for="alert">Weather Alert</label>
<input id="surface" type="checkbox" name="surface" />
<label for="surface">Road Surface</label>
<input id="customRoad" type="checkbox" name="customRoad" />
<label for="customRoad">Custom Road</label>
<input id="poi" type="checkbox" name="poi" />
<label for="poi">POI</label>
<input id="places" type="checkbox" name="places" />
<label for="places">Places</label>
<input id="buildings" type="checkbox" name="buildings" />
<label for="buildings">3D Buildings</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: [-75, 40], // starting position
zoom: 9 // starting zoom
});
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
const trafficCamera = new TrimbleMaps.TrafficCamera();
const trafficIncident = new TrimbleMaps.TrafficIncident();
const truckRestriction = new TrimbleMaps.TruckRestriction();
map.on('load', () => {
trafficCamera.addTo(map);
trafficIncident.addTo(map);
truckRestriction.addTo(map);
});
map.on('trafficcamera', () => {
trafficCamera.setVisibility(false);
});
map.on('trafficincident', () => {
trafficIncident.setVisibility(false);
});
map.on('truckrestriction', () => {
truckRestriction.setVisibility(false);
});
for (let i = 0; i < inputs.length; i++) {
inputs[i].onchange = (function (e) {
switch (e.target.id) {
case 'traffic':
// Deprecated. New function is not available in version 3.3.0 yet.
map.setTrafficVisibility(e.target.checked);
break;
case 'camera':
trafficCamera.setVisibility(e.target.checked);
break;
case 'incident':
trafficIncident.setVisibility(e.target.checked);
break;
case 'restriction':
truckRestriction.setVisibility(e.target.checked);
break;
case 'cloud':
// Deprecated. New function is not available in version 3.3.0 yet.
map.setWeatherCloudVisibility(e.target.checked);
break;
case 'radar':
// Deprecated. New function is not available in version 3.3.0 yet.
map.setWeatherRadarVisibility(e.target.checked);
break;
case 'alert':
// Deprecated. New function is not available in version 3.3.0 yet.
map.setWeatherAlertVisibility(e.target.checked);
break;
case 'surface':
// Deprecated. New function is not available in version 3.3.0 yet.
map.setRoadSurfaceVisibility(e.target.checked);
break;
case 'customRoad':
map.setCustomRoadVisibility(e.target.checked);
break;
case 'poi':
map.setPOIVisibility(e.target.checked);
break;
case 'places':
map.setPlacesVisibility(e.target.checked);
break;
case 'buildings':
map.set3dBuildingVisibility(e.target.checked);
break;
default:
break;
}
});
}
</script>
</body>
</html>