react-route-profile

React component that renders a Google Map route with an interactive elevation profile.

Installation

npm install react-route-profile
# or
yarn add react-route-profile
# or (preferred)
bun add react-route-profile

Quick start

import { RouteMap } from "react-route-profile";
import type { RouteConfig } from "react-route-profile";

const apiKey = process.env.VITE_GOOGLE_MAPS_API_KEY || "";

const myRoute: RouteConfig = {
  id: "01",
  name: "Sample route",
  center: { lat: 48.9, lng: 20.5 },
  zoomHorizontal: 14,
  zoomVertical: 12,
  geoJson: myGeoJsonObject,
  surface: [{ segment: [0, 1000], type: "asphalt" }],
  routes: [{ id: "A12", color: "green", segment: [0, 1000] }],
};

<RouteMap apiKey={apiKey} route={myRoute} height="100dvh" lang="en" />;

Precompute elevation offline

bunx fetch-elevation --in path/to/route.geojson --out path/to/route.elevation.json --samples 200 --key $GOOGLE_MAPS_API_KEY
# - Elevation API must be enabled for this key
# - Omit --out to overwrite the input file with elevationProfile
# - Pass the output json to RouteConfig

Customization

Custom theme

import type { Theme } from "react-route-profile";

const myTheme: Theme = {
  colors: {
    primary: "rgba(14, 165, 233, 1)",
    primaryMuted: "rgba(14, 165, 233, 0.7)",
    accent: "rgba(132, 204, 22, 1)",
    surface: "rgba(248, 250, 252, 1)",
  },
};

<RouteMap apiKey={apiKey} route={myRoute} theme={myTheme} lang="en" />;

Sticky header sizing

import { useMapHeader } from "react-route-profile";

const {
  refHeader,
  mapHeight,
} = useMapHeader();

<header ref={refHeader}>Header</header>
<div style={{ height: mapHeight }}>
  <RouteMap apiKey={apiKey} route={myRoute} height={mapHeight} lang="en" />
</div>;

API

RouteMap props

| Prop | Type | Description | | --------- | ---------------------- | ------------------------------------------------------ | | apiKey | string | Required Google Maps JS API key. | | route | RouteConfig | Route data (center, zooms, geoJson). | | height | number | string | Map height (e.g., 520 or "100dvh"). | | className | string | Optional wrapper class. | | style | CSSProperties | Inline style overrides. | | theme | Theme | Optional theme override (colors, marker/dots, layout). | | lang | "de" \| "en" \| "sk" | Optional UI language for built-in labels. |

RouteConfig

| Field | Type | Description | | -------------- | ----------------------------------------------------------------- | -------------------------------------------- | | id | string | Identifier for the route. | | name | string | Display name. | | center | { lat: number; lng: number } | Map center. | | zoomHorizontal | number (optional) | Zoom when landscape. | | zoomVertical | number (optional) | Zoom when portrait. | | geoJson | FeatureCollection | GeoJSON geometry and features. | | surface | Array<{ segment: [number, number]; type: SurfaceType }> | Optional surface segments for the strip. | | routes | Array<{ id: string; color: string; segment: [number, number] }> | Optional route segments for the route strip. |

Theme

| Field | Type | Description | | ------------------- | ------ | --------------------------------------- | | colors.primary | string | Main accent color. | | colors.primaryMuted | string | Softer variant of the primary. | | colors.accent | string | Secondary/accent color for labels. | | colors.surface | string | Background for loader/surfaces. | | marker | object | Marker palette (outer/inner/start/end). | | dots | object | Hover/line dot colors. | | map | object | Map stroke/marker sizing. | | chart | object | Chart spacing/strokes/ticks. | | tooltip | object | Tooltip background/text/padding. | | markerShape | object | Marker icon/label sizing/offsets. |

useMapHeader

Returns helpers to size the map below a sticky header:

• refHeader: attach to your header element.
• headerHeight: measured header height (px), 0 until ready.
• isHeaderReady: true once the header is measured.
• mapHeight: string/number height you can pass to RouteMap.

Notes

• Requires a valid Google Maps JavaScript API key with Maps JavaScript enabled.
• Provide geoJson as a FeatureCollection including your route geometry and optional point features for start/finish markers.