JavaScript Maps SDK

Style Modifications

Make modifications to an existing map style. 

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

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

            .map-panel {
              position: absolute;
              width: 150px;
              top: 10px;
              left: 10px;
              padding: 10px 10px 5px 10px;
              background-color: #fff;
              box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
              font-family: Arial, Helvetica, sans-serif;
              font-size: .85em;
            }

            .map-panel label {
              display: block;
              margin-bottom: 3px;
            }

            .map-panel select {
              width: 100%;
              margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div class="map-panel">
          <label for="mapLayer">Layer</label>
          <select id="mapLayer" name="mapLayer">
            <option value="water">Water</option>
            <option value="places_sites">Sites</option>
          </select>
          <label for="color">Fill Color</label>
          <select id="color" name="color">
            <option value="#94c5eb">Default</option>
            <option value="#ffffff">White</option>
            <option value="#000000">Black</option>
            <option value="#882222">Red</option>
            <option value="#222288">Blue</option>
          </select>
        </div>

        <script>
            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const map = new TrimbleMaps.Map({
              container: 'map',
              center: new TrimbleMaps.LngLat(-74.7046646, 40.1536299),
              zoom: 14
            });

            const defaultColors = {
              'water': '#94c5eb',
              'places_sites': 'rgba(227, 226, 238, 1)'
            }

            const mapLayerElem = document.getElementById('mapLayer');
            const colorElem = document.getElementById('color');

            mapLayerElem.addEventListener('change', function(e) {
              // Set default
              colorElem.options[0].value = defaultColors[mapLayerElem.value];

              // Set color select to layer color value
              colorElem.value = map.getPaintProperty(mapLayerElem.value, 'fill-color');
            });

            colorElem.addEventListener('change', function(e) {
              // Set layer fill to selected color
              map.setPaintProperty(mapLayerElem.value, 'fill-color', colorElem.value);
            });
        </script>
    </body>
</html>
Last updated June 15, 2023.