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>
Game Controls
<!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>