Add the control stack

MapControls is the floating stack over the canvas. Each flag adds one button, and the three panel flags add the panel behind each button.

import { MapControls, MapView, MountayaElementsProvider } from "@mountaya/elements-react";

export const Controls = () => (
  <MountayaElementsProvider client={client} map={map}>
    <div style={{ height: 420, position: "relative" }}>
      <MapView center={[6.87, 45.85]} client={client} onReady={setMap} terrain="topo" zoom={12} />
      <MapControls
        compass
        geolocate
        layers
        onClosePanel={() => setPanel(null)}
        onTogglePanel={(next) => setPanel((open) => (open === next ? null : next))}
        openPanel={panel}
        pois
        preferences
        zoom
      />
    </div>
  </MountayaElementsProvider>
);

The stack owns the open panel when you pass none, so set openPanel to keep it in a URL.

Next steps

Add a place search box

The one control that joins the stack as children.

Maps

Every control and panel, prop by prop.