JavaScript Maps SDK

Content Layers

The Trimble Maps JS SDK has several content layers such as traffic, weather, and 3D buildings. The visibility for each layer can be set, retrieved, or toggled. Learn more about Map Layers.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.1.css" />
        <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.1.js"></script>
        <style>
            body { margin: 0; padding: 0; }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }

            #menu {
                position: absolute;
                background: #fff;
                padding: 8px;
                margin: 8px;
                font-family: 'Open Sans', sans-serif;
            }
        </style>
    </head>
    <body>
    <div id="map"></div>
        <div id="menu">
            <input id="traffic" checked type="checkbox" name="traffic" />
            <label for="traffic">Traffic</label><br />
            <input id="camera" checked type="checkbox" name="camera" />
            <label for="camera">Traffic Camera</label><br />
            <input id="incident" checked type="checkbox" name="incident" />
            <label for="incident">Traffic Incident</label><br />
            <input id="restriction" checked type="checkbox" name="restriction" />
            <label for="restriction">Truck Restriction</label><br />
            <input id="cloud" checked type="checkbox" name="cloud" />
            <label for="cloud">Weather Cloud</label><br />
            <input id="radar" checked type="checkbox" name="radar" />
            <label for="radar">Weather Radar</label><br />
            <input id="alert" checked type="checkbox" name="alert" />
            <label for="alert">Weather Alert</label><br />
            <input id="surface" checked type="checkbox" name="surface" />
            <label for="surface">Road Surface</label><br />
            <input id="customRoad" checked type="checkbox" name="customRoad" />
            <label for="customRoad">Custom Road</label><br />
            <input id="poi" checked type="checkbox" name="poi" />
            <label for="poi">POI</label><br />
            <input id="places" checked type="checkbox" name="places" />
            <label for="places">Places</label><br />
            <input id="buildings" checked type="checkbox" name="buildings" />
            <label for="buildings">3D Buildings</label>
    </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: [-75, 40], // starting position
                zoom: 9 // starting zoom
            });

            const layerList = document.getElementById('menu');
            const inputs = layerList.getElementsByTagName('input');
            const trafficLayer = new TrimbleMaps.Traffic();
            const trafficCamera = new TrimbleMaps.TrafficCamera();
            const trafficIncident = new TrimbleMaps.TrafficIncident();
            const truckRestriction = new TrimbleMaps.TruckRestriction();
            const weatherAlert = new TrimbleMaps.WeatherAlert();
            const weatherRadar = new TrimbleMaps.WeatherRadar();
            const weatherCloud = new TrimbleMaps.WeatherCloud();
            const roadSurfaceLayer = new TrimbleMaps.RoadSurface();
            const customRoad = new TrimbleMaps.CustomRoad();
            const pointsOfInterest = new TrimbleMaps.PointsOfInterest();
            const restrictionControl = new TrimbleMaps.TruckRestrictionClickControl();
            map.addControl(restrictionControl);
            const placeClickControl = new TrimbleMaps.PlaceClickControl();
        	  map.addControl(placeClickControl);
            const weatherAlertFilterCtrl = new TrimbleMaps.WeatherAlertFilterControl();
            map.on('load', () => {
                trafficLayer.addTo(map);
                trafficCamera.addTo(map);
                trafficIncident.addTo(map);
                truckRestriction.addTo(map);
                weatherAlert.addTo(map);
                weatherRadar.addTo(map);
                weatherCloud.addTo(map);
                roadSurfaceLayer.addTo(map);
                customRoad.addTo(map);
                pointsOfInterest.addTo(map);
                map.setPlacesVisibility(true);
                map.set3dBuildingVisibility(true);
                pointsOfInterest.addTo(map);
                map.setPlacesVisibility(true);
                map.set3dBuildingVisibility(true);
            });
            map.on('weatheralert', (e) => {
            map.addControl(weatherAlertFilterCtrl);
            });

            for (let i = 0; i < inputs.length; i++) {
                inputs[i].onchange = (function (e) {
                    switch (e.target.id) {
                        case 'traffic':
                           trafficLayer.setVisibility(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':
                            weatherCloud.setVisibility(e.target.checked);
                            break;
                        case 'radar':
                            weatherRadar.setVisibility(e.target.checked);
                            break;
                        case 'alert':
                           weatherAlert.setVisibility(e.target.checked);
                            break;
                        case 'surface':
                            roadSurfaceLayer.setVisibility(e.target.checked);
                            break;
                        case 'customRoad':
                            customRoad.setVisibility(e.target.checked);
                            break;
                        case 'poi':
                            pointsOfInterest.setVisibility(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>
Last updated March 27, 2025.