Navigate the map with game-like controls
Use the keyboard's arrow keys to move around the map with game-like controls.
Note
If you want to test this example, edit it in JSFiddle or CodePen and replace the "YOUR-OWN-API-KEY" and "YOUR-OWN-VPM-ID" placeholders with your actual api key and vpm id.<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Navigate the map with game-like controls</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.js"></script><link href="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.css" rel="stylesheet" /><linkhref="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css"rel="stylesheet"/><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><div id="map"></div> <script>var map = new UnlSdk.Map({container: "map",apiKey: "YOUR-OWN-API-KEY",vpmId: "YOUR-OWN-VPM-ID",center: [-87.6298, 41.8781],zoom: 17,bearing: -12,pitch: 60,interactive: false,}); // pixels the map pans when the up or down arrow is clickedvar deltaDistance = 100; // degrees the map rotates when the left or right arrow is clickedvar deltaDegrees = 25; function easing(t) {return t * (2 - t);} map.on("load", function () {map.getCanvas().focus(); map.getCanvas().addEventListener("keydown",function (e) {e.preventDefault();if (e.which === 38) {// upmap.panBy([0, -deltaDistance], {easing: easing,});} else if (e.which === 40) {// downmap.panBy([0, deltaDistance], {easing: easing,});} else if (e.which === 37) {// leftmap.easeTo({bearing: map.getBearing() - deltaDegrees,easing: easing,});} else if (e.which === 39) {// rightmap.easeTo({bearing: map.getBearing() + deltaDegrees,easing: easing,});}},true);});</script> </body></html>