SDKs · React & Next.js

Step 2 — Map & search

Show the basemap and add the place-search box.

Show a map

Wrap your UI in UbHubProvider (point it at your route) and add a sized UbHubMap. Give it a height, or it collapses.

app/map.tsx

"use client";

import { UbHubMap, UbHubProvider } from "@ubhub/maps/react";

export function Map() {
  return (
    <UbHubProvider proxyUrl="/api/ubhub">
      <UbHubMap style={{ height: 480 }} />
    </UbHubProvider>
  );
}

Add place search

Grab the controller from onReady and fly to the chosen place. The combobox searches from 2 characters with a 350 ms debounce.

app/finder.tsx

"use client";

import { useState } from "react";
import { UbHubMap, UbHubPlaceSearch, UbHubProvider, type UbHubMapController } from "@ubhub/maps/react";

export function Finder() {
  const [map, setMap] = useState<UbHubMapController>();

  return (
    <UbHubProvider proxyUrl="/api/ubhub">
      <UbHubPlaceSearch onSelect={(place) => map?.flyTo(place.location)} />
      <UbHubMap style={{ height: 480 }} onReady={setMap} />
    </UbHubProvider>
  );
}