JavaScript Maps SDK

Hover Styles

Change the style of a symbol when hovered. Requires Trimble Maps v3.0.0 or later. 

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

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>

        <script>
            TrimbleMaps.setAPIKey('YOUR_API_KEY_HERE');
             const map = new TrimbleMaps.Map({
             container: 'map',
             style: TrimbleMaps.Common.Style.TRANSPORTATION,
             center: [-100.486052, 37.830348],
             zoom: 2,
      });
      let hoveredStateId = null;

      map.on('load', () => {
        map.addSource('states', {
          type: 'geojson',
          data: 'https://developer.trimblemaps.com/maps-sdk/assets/us_states.geojson',
        });

        // The feature-state dependent fill-opacity expression will render the hover effect
        // when a feature's hover state is set to true.
        map.addLayer({
          id: 'state-fills',
          type: 'fill',
          source: 'states',
          layout: {},
          paint: {
            'fill-color': '#627BC1',
            'fill-opacity': [
              'case',
              ['boolean', ['feature-state', 'hover'], false],
              1,
              0.5,
            ],
          },
        });

        map.addLayer({
          id: 'state-borders',
          type: 'line',
          source: 'states',
          layout: {},
          paint: {
            'line-color': '#627BC1',
            'line-width': 2,
          },
        });

        // When the user moves their mouse over the state-fill layer, we'll update the
        // feature state for the feature under the mouse.
        map.on('mousemove', 'state-fills', (e) => {
          if (e.features.length > 0) {
            if (hoveredStateId) {
              map.setFeatureState(
                {source: 'states', id: hoveredStateId},
                {hover: false}
              );
            }
            hoveredStateId = e.features[0].id;
            map.setFeatureState(
              {source: 'states', id: hoveredStateId},
              {hover: true}
            );
          }
        });

        // When the mouse leaves the state-fill layer, update the feature state of the
        // previously hovered feature.
        map.on('mouseleave', 'state-fills', () => {
          if (hoveredStateId) {
            map.setFeatureState(
              {source: 'states', id: hoveredStateId},
              {hover: false}
            );
          }
          hoveredStateId = null;
        });
      });
        </script>
    </body>
</html>
Last updated June 24, 2025.