NextJs Maplibre

← Dashboard
components/UpperMapControls.tsx
Shared pieces factored out so this file stays focused on the map itself: useHeldKeys tracks which movement keys are currently held (shared with First Person Map Control), map-config.ts holds the default coordinates/style/worker URL in one place, and TouchDPad renders the on-screen buttons from a plain config array instead of hand-written JSX.
import * as maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { useEffect, useRef } from "react";
import { useHeldKeys } from "@/lib/useHeldKeys";
import { DEFAULT_ORIGIN, DEFAULT_MAP_STYLE, MAPLIBRE_WORKER_URL } from "@/lib/map-config";
import TouchDPad from "@/components/TouchDPad";

const KEYS = ["KeyW", "KeyA", "KeyS", "KeyD"] as const;
Every tunable value -- where the map is centered, how far one key-tap pans, how many degrees one key-tap turns -- is a prop with a sensible default, not a hardcoded constant. That's the actual point of this refactor: drop <UpperMapControls origin={[...]} mapStyle="..." /> anywhere and it points at a different place with zero edits to this file. useHeldKeys(KEYS) replaces what used to be manual keydown/keyup listeners plus a ref written directly in this component -- it returns the same kind of Set ref, just with the wiring shared across every map mode.
export interface UpperMapControlsProps {
  origin?: [number, number];
  mapStyle?: string;
  initialZoom?: number;
  pitch?: number;
  bearing?: number;
  panDistance?: number;
  turnDegrees?: number;
}

export default function UpperMapControls({
  origin = DEFAULT_ORIGIN,
  mapStyle = DEFAULT_MAP_STYLE,
  initialZoom = 17,
  pitch = 65,
  bearing = -20,
  panDistance = 60,
  turnDegrees = 15,
}: UpperMapControlsProps) {
  const mapContainerRef = useRef<HTMLDivElement | null>(null);
  const keysDownRef = useHeldKeys(KEYS);
Same underlying bug either way: MapLibre derives its worker URL from import.meta.url, which isn't a real http(s) URL under Turbopack, so it silently falls back to "" -- the worker then loads this page's HTML instead of the worker script, and zero map tiles ever load, with no console error. The fix now lives once in lib/map-config.ts (MAPLIBRE_WORKER_URL) instead of being duplicated in every map component.
maplibregl.setWorkerUrl(MAPLIBRE_WORKER_URL);
Creates the map using the props (or their defaults) instead of hardcoded values -- tilted and rotated for an oblique "looking down at the city" feel. interactive:false turns off mouse drag/scroll zoom since movement is entirely keyboard/button-driven here. MapLibre's default attribution sits bottom-left; attributionControl:false turns it off and the next line re-adds one at top-right, the only corner nothing else uses. compact:true only *allows* the small-icon style though -- MapLibre still opens every attribution control expanded, and it only shrinks once the map is dragged. That drag never happens here, so the classList.remove call strips the "expanded" state it starts in immediately, rather than leaving full attribution text sitting over the map permanently.
const easing = (t: number) => t * (2 - t);

const map = new maplibregl.Map({
  container: mapContainerRef.current,
  style: mapStyle,
  center: origin,
  zoom: initialZoom,
  pitch,
  bearing,
  interactive: false,
  canvasContextAttributes: { antialias: true },
  attributionControl: false,
});
map.addControl(new maplibregl.AttributionControl({ compact: true }), "top-right");
mapContainerRef.current
  .querySelector(".maplibregl-ctrl-attrib")
  ?.classList.remove("maplibregl-compact-show");
Every 120ms, check which keys are held (tracked by the shared hook) and issue one pan/turn using the panDistance/turnDegrees props. panBy/easeTo are MapLibre's own animated camera helpers -- deliberately simple and safe, as opposed to recalculating a raw camera transform by hand (see First Person Map Control for why that path needs much more care).
const keysDown = keysDownRef.current;

const interval = window.setInterval(() => {
  if (keysDown.has("KeyW")) map.panBy([0, -panDistance], { easing });
  if (keysDown.has("KeyS")) map.panBy([0, panDistance], { easing });
  if (keysDown.has("KeyA")) {
    map.easeTo({ bearing: map.getBearing() - turnDegrees, duration: 120 });
  }
  if (keysDown.has("KeyD")) {
    map.easeTo({ bearing: map.getBearing() + turnDegrees, duration: 120 });
  }
}, 120);
Cleanup is simpler now that keyboard listener teardown lives inside useHeldKeys -- this effect only needs to stop its own interval and tear down the map.
return () => {
  window.clearInterval(interval);
  map.remove();
};
The map's own div. Note the inline style rather than a Tailwind class: maplibre-gl.css sets .maplibregl-map { position: relative } and loads after Tailwind, so a Tailwind "absolute inset-0" class would lose that CSS specificity battle and the container would collapse to 0 height. Inline styles always win.
<div ref={mapContainerRef} style={{ position: "absolute", inset: 0 }} />
The on-screen buttons are now one reusable TouchDPad fed a small config array (key code, label, grid position) instead of four nearly-identical <button> blocks written out here. TouchDPad writes into the exact same keysDownRef Set the keyboard listener uses, so the interval loop above never needs to know whether a key came from a keyboard or a finger.
<TouchDPad
  keysDownRef={keysDownRef}
  buttons={[
    { key: "KeyW", label: "W", gridArea: "1 / 2" },
    { key: "KeyA", label: "A", gridArea: "2 / 1" },
    { key: "KeyS", label: "S", gridArea: "2 / 2" },
    { key: "KeyD", label: "D", gridArea: "2 / 3" },
  ]}
/>
That's the whole thing explained. Here's the same component as a single, self-contained file -- copy it into any React/Next.js project and it works as-is.
UpperMapControls.tsx
"use client";

/**
 * Drop-in MapLibre "upper" map view -- pan and rotate a tilted 3D map with
 * WASD (keyboard) or the on-screen buttons.
 *
 * Setup: npm install maplibre-gl react react-dom
 *
 * The worker script below loads from a CDN so this file needs zero extra
 * setup. Pin the version in the URL to whatever maplibre-gl version you
 * installed. (Why a CDN worker at all? MapLibre resolves its worker URL from
 * import.meta.url, which isn't a real http(s) URL under bundlers like
 * Turbopack/Webpack -- without this, it silently fails and no tiles load.)
 */

import * as maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { useEffect, useRef } from "react";

const KEYS = ["KeyW", "KeyA", "KeyS", "KeyD"] as const;
type Key = (typeof KEYS)[number];

export interface UpperMapControlsProps {
  /** [lng, lat] to center the map on. */
  origin?: [number, number];
  /** Any MapLibre style URL. */
  mapStyle?: string;
  initialZoom?: number;
  pitch?: number;
  bearing?: number;
  /** Pixels panned per movement tick. */
  panDistance?: number;
  /** Degrees turned per movement tick. */
  turnDegrees?: number;
}

export default function UpperMapControls({
  origin = [10.1815, 36.7992],
  mapStyle = "https://tiles.openfreemap.org/styles/liberty",
  initialZoom = 17,
  pitch = 65,
  bearing = -20,
  panDistance = 60,
  turnDegrees = 15,
}: UpperMapControlsProps) {
  const mapContainerRef = useRef<HTMLDivElement | null>(null);
  const keysDownRef = useRef<Set<Key>>(new Set());

  useEffect(() => {
    if (!mapContainerRef.current) return;

    maplibregl.setWorkerUrl(
      "https://unpkg.com/maplibre-gl@6.6.0/dist/maplibre-gl-worker.mjs",
    );

    const easing = (t: number) => t * (2 - t);

    const map = new maplibregl.Map({
      container: mapContainerRef.current,
      style: mapStyle,
      center: origin,
      zoom: initialZoom,
      pitch,
      bearing,
      interactive: false,
      canvasContextAttributes: { antialias: true },
      attributionControl: false,
    });
    map.addControl(new maplibregl.AttributionControl({ compact: true }), "top-right");
    mapContainerRef.current
      .querySelector(".maplibregl-ctrl-attrib")
      ?.classList.remove("maplibregl-compact-show");

    const keysDown = keysDownRef.current;
    const onKeyDown = (e: KeyboardEvent) => {
      if ((KEYS as readonly string[]).includes(e.code)) keysDown.add(e.code as Key);
    };
    const onKeyUp = (e: KeyboardEvent) => {
      keysDown.delete(e.code as Key);
    };
    window.addEventListener("keydown", onKeyDown);
    window.addEventListener("keyup", onKeyUp);

    const interval = window.setInterval(() => {
      if (keysDown.has("KeyW")) map.panBy([0, -panDistance], { easing });
      if (keysDown.has("KeyS")) map.panBy([0, panDistance], { easing });
      if (keysDown.has("KeyA")) {
        map.easeTo({ bearing: map.getBearing() - turnDegrees, duration: 120 });
      }
      if (keysDown.has("KeyD")) {
        map.easeTo({ bearing: map.getBearing() + turnDegrees, duration: 120 });
      }
    }, 120);

    return () => {
      window.clearInterval(interval);
      window.removeEventListener("keydown", onKeyDown);
      window.removeEventListener("keyup", onKeyUp);
      keysDown.clear();
      map.remove();
    };
  }, [origin, mapStyle, initialZoom, pitch, bearing, panDistance, turnDegrees]);

  const buttonStyle: React.CSSProperties = {
    font: "700 18px system-ui, sans-serif",
    color: "#e6edf3",
    background: "linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03))",
    border: "1px solid rgba(255,255,255,0.14)",
    borderRadius: 10,
    width: 52,
    height: 52,
    boxShadow: "0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.18)",
    touchAction: "none",
    transition: "transform 0.08s ease, filter 0.08s ease",
  };

  return (
    <>
      <div ref={mapContainerRef} style={{ position: "absolute", inset: 0 }} />
      {/* Plain CSS for press feedback -- simplest way to add a ":active" rule
          from inside a single self-contained component file. */}
      <style>{`.touch-dpad-btn:active { transform: scale(0.93); filter: brightness(1.2); }`}</style>
      <div
        style={{
          position: "absolute",
          bottom: 16,
          left: "50%",
          transform: "translateX(-50%)",
          display: "grid",
          gridTemplateColumns: "repeat(3, 52px)",
          gridTemplateRows: "repeat(2, 52px)",
          gap: 8,
          padding: 10,
          borderRadius: 16,
          background: "rgba(13, 17, 23, 0.55)",
          backdropFilter: "blur(8px)",
          WebkitBackdropFilter: "blur(8px)",
          border: "1px solid rgba(255,255,255,0.08)",
          boxShadow: "0 8px 24px rgba(0,0,0,0.35)",
        }}
      >
        <button
          type="button"
          className="touch-dpad-btn"
          style={{ ...buttonStyle, gridArea: "1 / 2" }}
          onPointerDown={(e) => {
            e.preventDefault();
            e.currentTarget.setPointerCapture(e.pointerId);
            keysDownRef.current.add("KeyW");
          }}
          onLostPointerCapture={() => keysDownRef.current.delete("KeyW")}
        >
          W
        </button>
        <button
          type="button"
          className="touch-dpad-btn"
          style={{ ...buttonStyle, gridArea: "2 / 1" }}
          onPointerDown={(e) => {
            e.preventDefault();
            e.currentTarget.setPointerCapture(e.pointerId);
            keysDownRef.current.add("KeyA");
          }}
          onLostPointerCapture={() => keysDownRef.current.delete("KeyA")}
        >
          A
        </button>
        <button
          type="button"
          className="touch-dpad-btn"
          style={{ ...buttonStyle, gridArea: "2 / 2" }}
          onPointerDown={(e) => {
            e.preventDefault();
            e.currentTarget.setPointerCapture(e.pointerId);
            keysDownRef.current.add("KeyS");
          }}
          onLostPointerCapture={() => keysDownRef.current.delete("KeyS")}
        >
          S
        </button>
        <button
          type="button"
          className="touch-dpad-btn"
          style={{ ...buttonStyle, gridArea: "2 / 3" }}
          onPointerDown={(e) => {
            e.preventDefault();
            e.currentTarget.setPointerCapture(e.pointerId);
            keysDownRef.current.add("KeyD");
          }}
          onLostPointerCapture={() => keysDownRef.current.delete("KeyD")}
        >
          D
        </button>
      </div>
    </>
  );
}