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

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

            #menu {
              position: absolute;
              top: 0;
              right: 0;
              background: #fff;
              padding: 10px;
              font-family: 'Open Sans', sans-serif;      }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div id="menu">
            <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 />
            <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="accessiblelight" type="radio" name="rtoggle" value="ACCESSIBLE_LIGHT" />
            <label for="accessiblelight">accessible</label>
            <br />
            <input id="terrain" type="radio" name="rtoggle" value="TERRAIN" />
            <label for="terrain">terrain</label>
            <br />
            <input id="satellite" type="radio" name="rtoggle" value="SATELLITE" />
            <label for="satellite">satellite</label>
            <br />
        </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: [-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>