Skip to main content

Game Controls

Use the keyboard’s arrow keys to move around the map with game-like controls. Requires Trimble Maps v4.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.1.css" />
    <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.1.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      TrimbleMaps.setAPIKey('68B06901AF7DA34884CE5FB7A202A743');

      const map = new TrimbleMaps.Map({
        container: 'map',
        style: TrimbleMaps.Common.Style.TRANSPORTATION,
        center: [-87.6298, 41.8781],
        zoom: 17,
        bearing: -12,
        pitch: 60,
        interactive: false,
      });

      // pixels the map pans when the up or down arrow is clicked
      const deltaDistance = 100;

      // degrees the map rotates when the left or right arrow is clicked
      const deltaDegrees = 25;

      function easing(t) {
        return t * (2 - t);
      }

      map.on('load', () => {
        map.getCanvas().focus();

        map.getCanvas().addEventListener(
          'keydown',
          (e) => {
            e.preventDefault();
            if (e.which === 38) {
              // up
              map.panBy([0, -deltaDistance], {
                easing,
              });
            } else if (e.which === 40) {
              // down
              map.panBy([0, deltaDistance], {
                easing,
              });
            } else if (e.which === 37) {
              // left
              map.easeTo({
                bearing: map.getBearing() - deltaDegrees,
                easing,
              });
            } else if (e.which === 39) {
              // right
              map.easeTo({
                bearing: map.getBearing() + deltaDegrees,
                easing,
              });
            }
          },
          true
        );
      });
    </script>
  </body>
</html>
Last updated October 2, 2024.