RControls

Each MapLibre control has its React component associated with it

RAttributionControl

import { RAttributionControl, RMap } from "maplibre-react-components";
 
const center: [number, number] = [-0.5, 47.5];
 
export default function App() {
  return (
    <RMap
      initialCenter={center}
      initialZoom={2}
      initialAttributionControl={false}
    >
      <RAttributionControl customAttribution="MapLibre React Components" />
    </RMap>
  );
}

MapLibre React Components

import { ControlPosition, AttributionControlOptions } from "maplibre-gl";
 
type RAttributionControlProps = AttributionControlOptions & {
  position?: ControlPosition;
};

RFullscreenControl

import { RFullscreenControl, RMap } from "maplibre-react-components";
 
const center: [number, number] = [-0.5, 47.5];
 
export default function App() {
  return (
    <RMap
      initialCenter={center}
      initialZoom={2}
      initialAttributionControl={false}
    >
      <RFullscreenControl />
    </RMap>
  );
}

import { ControlPosition, FullscreenControlOptions } from "maplibre-gl";
 
type RFullscreenControlProps = FullscreenControlOptions & {
  position?: ControlPosition;
};

RGeolocateControl

import { RGeolocateControl, RMap } from "maplibre-react-components";
 
const center: [number, number] = [-0.5, 47.5];
 
export default function App() {
  return (
    <RMap
      initialCenter={center}
      initialZoom={2}
      initialAttributionControl={false}
    >
      <RGeolocateControl
        showUserLocation={true}
        showAccuracyCircle={true}
        trackUserLocation={false}
      />
    </RMap>
  );
}

import { ControlPosition, GeolocateControlOptions } from "maplibre-gl";
 
type RGeolocateControlProps = GeolocateControlOptions & {
  position?: ControlPosition;
};

RGlobeControl

import { RGlobeControl, RMap } from "maplibre-react-components";
 
const center: [number, number] = [-0.5, 47.5];
 
export default function App() {
  return (
    <RMap initialCenter={center} initialAttributionControl={false}>
      <RGlobeControl position="top-left" />
    </RMap>
  );
}

import { ControlPosition } from "maplibre-gl";
 
type RGlobeControlProps = {
  position?: ControlPosition;
};

RLogoControl / MrcLogoControl

if you want to help this library to make itself known...

import { MrcLogoControl, RLogoControl, RMap } from "maplibre-react-components";
 
const center: [number, number] = [-0.5, 47.5];
 
export default function App() {
  return (
    <RMap
      initialCenter={center}
      initialZoom={2}
      initialAttributionControl={false}
    >
      <MrcLogoControl position="top-right" />
      <RLogoControl position="bottom-right" />
    </RMap>
  );
}

import { ControlPosition, LogoControlOptions } from "maplibre-gl";
 
type RLogoControlProps = LogoControlOptions & {
  position?: ControlPosition;
};

RNavigationControl

import { RMap, RNavigationControl } from "maplibre-react-components";
 
const center: [number, number] = [-0.5, 47.5];
 
export default function App() {
  return (
    <RMap
      initialCenter={center}
      initialZoom={2}
      initialAttributionControl={false}
    >
      <RNavigationControl position="top-left" showCompass={false} />
    </RMap>
  );
}

import type { ControlPosition, NavigationControlOptions } from "maplibre-gl";
 
type RNavigationControlProps = NavigationControlOptions & {
  position?: ControlPosition;
};

RScaleControl

import { RMap, RScaleControl } from "maplibre-react-components";
 
const center: [number, number] = [-0.5, 47.5];
 
export default function App() {
  return (
    <RMap
      initialCenter={center}
      initialZoom={2}
      initialAttributionControl={false}
    >
      <RScaleControl position="bottom-right" unit="imperial" />
    </RMap>
  );
}

500 mi

import type { ControlPosition, ScaleControlOptions } from "maplibre-gl";
 
type RScaleControlProps = ScaleControlOptions & {
  position?: ControlPosition;
};

RTerrainControl

import {
  RLayer,
  RMap,
  RSource,
  RTerrainControl,
} from "maplibre-react-components";
 
const rasterDemTiles = [
  "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png",
];
const center = { lng: 6.4, lat: 46.1 };
 
export default function App() {
  return (
    <RMap
      initialZoom={10}
      initialBearing={-10}
      initialPitch={50}
      initialCenter={center}
      mapStyle="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json"
      initialAttributionControl={false}
    >
      <RSource
        type="raster-dem"
        id="terrarium"
        tiles={rasterDemTiles}
        encoding="terrarium"
        tileSize={256}
      />
      <RLayer id="hillshade" type="hillshade" source="terrarium" />
      <RTerrainControl
        source="terrarium"
        position="top-left"
        exaggeration={1.1}
      />
    </RMap>
  );
}

import type { ControlPosition, TerrainSpecification } from "maplibre-gl";
 
type RTerrainControlProps = TerrainSpecification & {
  position?: ControlPosition;
};