NextJs Maplibre

← Dashboard
components/SimpleMap.tsx
The minimal case: no keyboard controls, no click handlers, no game loop -- just a map. Everything tunable (where it's centered, which style, starting zoom) is a prop with a default from lib/map-config.ts, same convention as every other mode here.
import { DEFAULT_MAP_STYLE, DEFAULT_ORIGIN, MAPLIBRE_WORKER_URL } from "@/lib/map-config";
import * as maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { useEffect, useRef } from "react";

export interface SimpleMapProps {
  origin?: [number, number];
  mapStyle?: string;
  initialZoom?: number;
}

export default function SimpleMap({
  origin = DEFAULT_ORIGIN,
  mapStyle = DEFAULT_MAP_STYLE,
  initialZoom = 14,
}: SimpleMapProps) {
  const mapContainerRef = useRef<HTMLDivElement | null>(null);
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);
Create the map, add the default zoom/rotate control, and clean it up on unmount -- that's the whole component. No custom event listeners: MapLibre's own built-in drag-to-pan, scroll-to-zoom, and the NavigationControl buttons are all you get, which is the point of this mode.
useEffect(() => {
  if (!mapContainerRef.current) return;

  maplibregl.setWorkerUrl(MAPLIBRE_WORKER_URL);

  const map = new maplibregl.Map({
    container: mapContainerRef.current,
    style: mapStyle,
    center: origin,
    zoom: initialZoom,
  });
  map.addControl(new maplibregl.NavigationControl(), "top-right");

  return () => {
    map.remove();
  };
}, [origin, mapStyle, initialZoom]);

return <div ref={mapContainerRef} style={{ position: "absolute", inset: 0 }} />;
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.
SimpleMap.tsx
"use client";

/**
 * Drop-in MapLibre map -- the minimal setup, no extra controls beyond
 * MapLibre's own built-in drag/scroll/zoom-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";

export interface SimpleMapProps {
  /** [lng, lat] to center the map on. */
  origin?: [number, number];
  /** Any MapLibre style URL. */
  mapStyle?: string;
  initialZoom?: number;
}

export default function SimpleMap({
  origin = [10.1862, 36.80025],
  mapStyle = "https://tiles.openfreemap.org/styles/liberty",
  initialZoom = 14,
}: SimpleMapProps) {
  const mapContainerRef = useRef<HTMLDivElement | null>(null);

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

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

    const map = new maplibregl.Map({
      container: mapContainerRef.current,
      style: mapStyle,
      center: origin,
      zoom: initialZoom,
    });
    map.addControl(new maplibregl.NavigationControl(), "top-right");

    return () => {
      map.remove();
    };
  }, [origin, mapStyle, initialZoom]);

  return <div ref={mapContainerRef} style={{ position: "absolute", inset: 0 }} />;
}