Controls

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

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`:

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

Examples

Plain Map

GeoLocator

Geocode with Nomatim