Controls

SolidJS components that wrap MapLibre GL JS control classes using a createControl factory. These include:

• NavigationControl
• ScaleControl
• GlobeControl
• AttributionControl
• GeolocateControl
• FullscreenControl
• TerrainControl
• LogoControl

import type { Component } from "solid-js";
import {
  Maplibre,
  NavigationControl,
  ScaleControl,
  GlobeControl,
} from "solidjs-maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

const App: Component = () => {
  return (
    <Maplibre
      style={{ width: "100%", height: "400px" }}
      options={{
        zoom: 4,
        center: [0, 0],
      }}
    >
      <NavigationControl position="top-left" />
      <ScaleControl position="bottom-left" />
      <GlobeControl position="top-right" />
    </Maplibre>
  );
};

Properties

---

Reactive Properties

---

position:

‘top-left’ | ‘top-right’ | ‘bottom-left’ | ‘bottom-right’ | ‘top’ | ‘bottom’ | ‘left’ | ‘right’

A string indicating where on the map the control should be placed.
This matches MapLibre GL JS’s ControlPosition enum.

Controls are placed in one of the four corners or along the sides of the map container.

Example:

<NavigationControl position="top-right" />

options: Object

An optional object passed to the control’s constructor. The shape of this object depends on which control you’re creating. Here are a few examples:

NavigationControl

{
  showZoom?: boolean;
  showCompass?: boolean;
  visualizePitch?: boolean;
}

ScaleControl

{
  maxWidth?: number; // Default: 100
  unit?: "imperial" | "metric" | "nautical"; // Default: "metric"
}

GeolocateControl

{
  positionOptions?: PositionOptions;
  fitBoundsOptions?: maplibre.FitBoundsOptions;
  trackUserLocation?: boolean;
  showAccuracyCircle?: boolean;
  showUserLocation?: boolean;
}

TerrainControl

{
  source: string;
  exaggeration: number;
}

Source

controls.tsx

Further Reading

You can refer to the MapLibre control docs for full option details for each control type.