Content Layers

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>
    <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="traffic" type="checkbox" name="traffic" />
            <label for="traffic">Traffic</label>
            <input id="radar" type="checkbox" name="radar" />
            <label for="radar">Weather Radar</label>
            <input id="surface" type="checkbox" name="surface" />
            <label for="surface">Road Surface</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');

            for (let i = 0; i < inputs.length; i++) {
              inputs[i].onchange = (function(e) {
                  switch (e.target.id) {
                      case 'traffic':
                          map.setTrafficVisibility(e.target.checked);
                          break;
                      case 'radar':
                          map.setWeatherRadarVisibility(e.target.checked);
                          break;
                      case 'surface':
                          map.setRoadSurfaceVisibility(e.target.checked);
                          break;
                      case 'places':
                          map.setPOIVisibility(e.target.checked);
                          break;
                      case 'buildings':
                          map.set3dBuildingVisibility(e.target.checked);
                          break;
                      default:
                          break;
                  }
              });
            }
        </script>
    </body>
</html>