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/v3/trimblemaps-3.20.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.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();
            const restrictionControl = new TrimbleMaps.TruckRestrictionClickControl();
            map.addControl(restrictionControl);
            const placeClickControl = new TrimbleMaps.PlaceClickControl();
        	  map.addControl(placeClickControl);
            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>
Last updated November 27, 2023.