@page-speed/maps

High-performance MapLibre primitives for DashTrack and OpenSite apps.

Install

pnpm add @page-speed/maps maplibre-gl react-map-gl

Quick Start

import { MapLibre } from "@page-speed/maps";

export function Example() {
  return (
    <div style={{ width: "100%", height: 420 }}>
      <MapLibre
        stadiaApiKey={process.env.NEXT_PUBLIC_STADIA_API ?? ""}
        mapStyle="osm-bright"
        viewState={{ latitude: 40.7128, longitude: -74.006, zoom: 12 }}
        markers={[
          {
            id: "nyc",
            latitude: 40.7128,
            longitude: -74.006,
            label: "New York"
          }
        ]}
      />
    </div>
  );
}

Why This Package

• Explicit Stadia auth: no hard-coded keys
• Auto-loads MapLibre CSS (no extra stylesheet import required)
• Keyless fallback map style: if no Stadia key is available, roads/landmarks still render via Carto Positron
• Tree-shakable exports (@page-speed/maps/core, @page-speed/maps/utils)
• Drop-in API compatibility with the current MapLibre component used in dt-cms

API

• MapLibre, DTMapLibreMap
• getMapLibreStyleUrl(value, stadiaApiKey)
• appendStadiaApiKey(styleUrl, stadiaApiKey)
• generateGoogleMapLink(latitude, longitude, zoom?)
• generateGoogleDirectionsLink(latitude, longitude)

See docs/README.md for migration notes and full usage details.