solid-map-gl 1.13.0 → 2.0.0

package/README.md

@@ -1,39 +1,166 @@
----
-description: >-
-  Solid Map GL provides Mapbox & MapLibre functionality within SolidJS
-  applications
-cover: docs/docs/header.png
-coverY: -136.56381942189023
-layout: landing
----
+[![Banner](https://assets.solidjs.com/banner?project=solid-map-gl&background=tiles&type=Component%20Library)](https://gis-hub.gitbook.io/solid-map-gl)
 
-# Introduction
+# SolidJS Component Library for Mapbox GL & MapLibre GL
+
+[![CI](https://img.shields.io/github/actions/workflow/status/GIShub4/solid-map-gl/ci.yml?branch=main&label=CI)](https://github.com/GIShub4/solid-map-gl/actions/workflows/ci.yml)
+[![codecov](https://img.shields.io/codecov/c/github/GIShub4/solid-map-gl)](https://codecov.io/gh/GIShub4/solid-map-gl)
+[![npm](https://img.shields.io/npm/v/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl)
+[![downloads](https://img.shields.io/npm/dt/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl)
+[![licence](https://img.shields.io/npm/l/solid-map-gl?color=blue)](LICENSE/)
 
 [SolidJS](https://www.solidjs.com/) Component Library for [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) and [MapLibre GL.](https://maplibre.org/projects/maplibre-gl-js/) Both libraries render interactive maps from vector tiles and Map styles using WebGL. This project is intended to be as close as possible to the [Mapbox GL JS API.](https://docs.mapbox.com/mapbox-gl-js/api/)
 
-{% content-ref url="docs/start.md" %}
-[start.md](docs/start.md)
-{% endcontent-ref %}
+## Documentation & Examples
+
+[![Gallery](/docs/header.png)](https://gis-hub.gitbook.io/solid-map-gl)
+
+## Getting Started
+
+#### [Mapbox GL](https://gis-hub.gitbook.io/solid-map-gl/start#existing-project)
+
+```shell
+pnpm add mapbox-gl solid-map-gl
+yarn add mapbox-gl solid-map-gl
+npm  i   mapbox-gl solid-map-gl
+```
+
+#### [MapLibre](https://gis-hub.gitbook.io/solid-map-gl/start#with-maplibre-project)
+
+```shell
+pnpm create solid && pnpm i
+# Install MapLibre package and placeholder Mapbox package
+pnpm add solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0
+pnpm dev
+```
+
+#### [Solid Start](https://gis-hub.gitbook.io/solid-map-gl/start#solid-start)
+
+```shell
+pnpm create solid && pnpm i
+pnpm add mapbox-gl solid-map-gl
+pnpm dev
+```
+
+> [!CAUTION]
+> If you use `vite` and get the error `'mapbox-gl.js' does not provide an export named 'default'`,
+> add this to your `vite.config.ts`:
+>
+> ```ts
+> optimizeDeps: { include: ['mapbox-gl'] }
+> ```
+
+## Components
+
+| [Component](https://gis-hub.gitbook.io/solid-map-gl/components)                                                                   | Description                                                                                                            |
+| --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| [MapGL](https://gis-hub.gitbook.io/solid-map-gl/components/mapgl)           | Represents map on the page                                                                                             |
+| [Source](https://gis-hub.gitbook.io/solid-map-gl/components/source)         | [Sources](https://docs.mapbox.com/mapbox-gl-js/api/#sources) specify the geographic features to be rendered on the map |
+| [Layer](https://gis-hub.gitbook.io/solid-map-gl/components/layer)           | [Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) specify the `Sources`                                |
+| [Layer3D](https://gis-hub.gitbook.io/solid-map-gl/components/layer3d)       | Component for [BabylonJS](https://www.babylonjs.com/) or [ThreeJS](https://threejs.org/)                               |
+| [Atmosphere](https://gis-hub.gitbook.io/solid-map-gl/components/atmosphere) | Specify the Atmosphere                                                                                                 |
+| [Light](https://gis-hub.gitbook.io/solid-map-gl/components/light)           | Specify the Light Source                                                                                               |
+| [Terrain](https://gis-hub.gitbook.io/solid-map-gl/components/terrain)       | Specify the Terrain                                                                                                    |
+| [Image](https://gis-hub.gitbook.io/solid-map-gl/components/image)           | Adds an image to the map style                                                                                         |
+| [Popup](https://gis-hub.gitbook.io/solid-map-gl/components/popup)           | Component for [Mapbox GL JS Popup](https://docs.mapbox.com/mapbox-gl-js/api/#popup)                                    |
+| [Marker](https://gis-hub.gitbook.io/solid-map-gl/components/marker)         | Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker)                                  |
+| [Control](https://gis-hub.gitbook.io/solid-map-gl/components/control)       | Represents the map's control                                                                                           |
+| [Camera](https://gis-hub.gitbook.io/solid-map-gl/components/camera)         | Map's camera view                                                                                                      |
+| [Draw](https://gis-hub.gitbook.io/solid-map-gl/components/draw)             | Draw Control view                                                                                                      |
+| [DeckOverlay](https://gis-hub.gitbook.io/solid-map-gl/components/deckoverlay) | Adds a [deck.gl](https://deck.gl/) overlay on top of the map                                                         |
+
+## Usage with [Mapbox](https://docs.mapbox.com/mapbox-gl-js/guides/)
+
+Pass the _Mapbox access token_ via `<MapGL> options` or `.env` file as `VITE_MAPBOX_ACCESS_TOKEN`
+
+```jsx
+import { render } from "solid-js/web";
+import { Component, createSignal } from "solid-js";
+import MapGL, { Viewport, Source, Layer } from "solid-map-gl";
+import 'mapbox-gl/dist/mapbox-gl.css'
+
+const App: Component = () => {
+  const [viewport, setViewport] = createSignal({
+    center: [-122.45, 37.78],
+    zoom: 11,
+  } as Viewport);
+
+  return (
+    <MapGL
+      options={{ style: "mb:light" }}
+      viewport={viewport()}
+      onViewportChange={(evt: Viewport) => setViewport(evt)}
+    >
+      <Source
+        source={{
+          type: "geojson",
+          data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
+        }}
+      >
+        <Layer
+          style={{
+            type: "circle",
+            paint: {
+              "circle-radius": 8,
+              "circle-color": "red",
+            },
+          }}
+        />
+      </Source>
+    </MapGL>
+  );
+};
+
+render(() => <App />, document.getElementById("app")!);
+```
+
+## Usage with [MapLibre](https://maplibre.org/maplibre-gl-js-docs/api/)
+
+Install MapLibre package and placeholder Mapbox package
+
+```shell
+pnpm add solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0
+yarn add solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0
+npm  i   solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0
+```
+
+```jsx
+import { render } from "solid-js/web";
+import { Component, createSignal } from "solid-js";
+import MapGL, { Viewport } from "solid-map-gl";
+import * as maplibre from 'maplibre-gl'
+import 'maplibre-gl/dist/maplibre-gl.css'
 
-{% content-ref url="docs/examples.md" %}
-[examples.md](docs/examples.md)
-{% endcontent-ref %}
+const App: Component = () => {
+  const [viewport, setViewport] = createSignal({
+    center: [-122.45, 37.78],
+    zoom: 11,
+  } as Viewport);
 
-## Simple Demo
+  return (
+    <MapGL
+      mapLib={maplibre} // <- Pass MapLibre package here
+      options={{ style: 'https://demotiles.maplibre.org/style.json' }}
+      viewport={viewport()}
+      onViewportChange={(evt: Viewport) => setViewport(evt)}
+    />
+  );
+};
 
-{% embed url="https://stackblitz.com/edit/solid-map-gl-intro?embed=1&hideExplorer=1&hideNavigation=1&hidedevtools=1&view=preview&file=src%2FApp.tsx" %}
+render(() => <App />, document.getElementById("app")!);
+```
 
-#### Roadmap
+## Roadmap
 
-* [x] Basic Mapbox GL Functionality
-* [x] Include Map Controls
-* [x] Include Fog, Sky, and Terrain
-* [x] Include Popup and Markers
-* [x] Minify bundle & reduce size
-* [x] Add basemap switching
-* [x] Include event handling
-* [x] Sync Maps
-* [x] Add MapLibre support
-* [x] Add draw functionality
-* [x] Add 3D Layer support
-* [ ] Add debug console
+- [x] Basic Mapbox GL Functionality
+- [x] Include Map Controls
+- [x] Include Fog, Sky, and Terrain
+- [x] Include Popup and Markers
+- [x] Minify bundle & reduce size
+- [x] Add basemap switching
+- [x] Include event handling
+- [x] Sync Maps
+- [x] Add MapLibre support
+- [x] Add debug functionality
+- [x] Add draw functionality
+- [x] Add 3D Layer support
+- [x] Add deck.gl support

package/dist/index.d.ts

@@ -0,0 +1,489 @@
+import { Component, JSX, ParentComponent, VoidComponent } from 'solid-js';
+import { MapMouseEvent, MapTouchEvent, MapWheelEvent, MapDataEvent, MapBoxZoomEvent, LngLatLike, LngLatBounds, PaddingOptions, MapboxOptions, StyleSpecification, SourceSpecification, CustomLayerInterface, FilterSpecification, FogSpecification, NavigationControlOptions, ScaleControlOptions, AttributionControlOptions, FullscreenControlOptions, GeolocateControlOptions, MarkerOptions, PopupOptions, StyleImageInterface, Map as Map$1, LightSpecification } from 'mapbox-gl';
+
+type mapEventTypes = {
+    onMouseDown?: (event: MapMouseEvent) => void;
+    onMouseUp?: (event: MapMouseEvent) => void;
+    onMouseOver?: (event: MapMouseEvent) => void;
+    onMouseOut?: (event: MapMouseEvent) => void;
+    onMouseMove?: (event: MapMouseEvent) => void;
+    onMouseEnter?: (event: MapMouseEvent) => void;
+    onMouseLeave?: (event: MapMouseEvent) => void;
+    onPreClick?: (event: MapMouseEvent) => void;
+    onClick?: (event: MapMouseEvent) => void;
+    onDblClick?: (event: MapMouseEvent) => void;
+    onContextMenu?: (event: MapMouseEvent) => void;
+    onTouchStart?: (event: MapTouchEvent) => void;
+    onTouchEnd?: (event: MapTouchEvent) => void;
+    onTouchCancel?: (event: MapTouchEvent) => void;
+    onTouchMove?: (event: MapTouchEvent) => void;
+    onWheel?: (event: MapWheelEvent) => void;
+    onResize?: () => void;
+    onRemove?: () => void;
+    onMoveStart?: (event: DragEvent) => void;
+    onMove?: (event: MapMouseEvent | MapTouchEvent) => void;
+    onMoveEnd?: (event: DragEvent) => void;
+    onDragStart?: (event: DragEvent) => void;
+    onDrag?: (event: MapMouseEvent | MapTouchEvent) => void;
+    onDragEnd?: (event: DragEvent) => void;
+    onZoomStart?: (event: MapMouseEvent | MapTouchEvent) => void;
+    onZoom?: (event: MapMouseEvent | MapTouchEvent) => void;
+    onZoomEnd?: (event: MapMouseEvent | MapTouchEvent) => void;
+    onRotateStart?: (event: MapMouseEvent | MapTouchEvent) => void;
+    onRotate?: (event: MapMouseEvent | MapTouchEvent) => void;
+    onRotatEnd?: (event: MapMouseEvent | MapTouchEvent) => void;
+    onPitchStart?: (event: MapDataEvent) => void;
+    onPitch?: (event: MapDataEvent) => void;
+    onPitchEnd?: (event: MapDataEvent) => void;
+    onBoxZoomStart?: (event: MapBoxZoomEvent) => void;
+    onBoxZoomEnd?: (event: MapBoxZoomEvent) => void;
+    onBoxZoomCancel?: (event: MapBoxZoomEvent) => void;
+    onWebglContextLost?: () => void;
+    onWebglContextRestored?: () => void;
+    onLoad?: (event: any) => void;
+    onRender?: () => void;
+    onIdle?: () => void;
+    onError?: (error: string) => void;
+    onData?: (event: MapDataEvent) => void;
+    onStyleData?: (event: MapDataEvent) => void;
+    onSourceData?: (event: MapDataEvent) => void;
+    onDataLoading?: (event: MapDataEvent) => void;
+    onStyleDataLoading?: (event: MapDataEvent) => void;
+    onSourceDataLoading?: (event: MapDataEvent) => void;
+    onStyleImageMissing?: (event: MapDataEvent) => void;
+};
+type layerEventTypes = {
+    onMouseDown?: (event: MapMouseEvent) => void;
+    /** called when the mouse button is pressed down on the layer */
+    onMouseUp?: (event: MapMouseEvent) => void;
+    /** called when the mouse button is released after a mouse down event on the layer */
+    onMouseOver?: (event: MapMouseEvent) => void;
+    /** called when the mouse enters the layer */
+    onMouseOut?: (event: MapMouseEvent) => void;
+    /** called when the mouse leaves the layer */
+    onMouseMove?: (event: MapMouseEvent) => void;
+    /** called when the mouse is moved over the layer */
+    onMouseEnter?: (event: MapMouseEvent) => void;
+    /** called when the mouse enters the layer */
+    onMouseLeave?: (event: MapMouseEvent) => void;
+    /** called when the mouse leaves the layer */
+    onClick?: (event: MapMouseEvent) => void;
+    /** called when the layer is clicked */
+    onDblClick?: (event: MapMouseEvent) => void;
+    /** called when the layer is double-clicked */
+    onContextMenu?: (event: MapMouseEvent) => void;
+    /** called when the context menu is triggered on the layer */
+    onTouchStart?: (event: MapTouchEvent) => void;
+    /** called when a touch event is started on the layer */
+    onTouchEnd?: (event: MapTouchEvent) => void;
+    /** called when a touch event is ended on the layer */
+    onTouchCancel?: (event: MapTouchEvent) => void;
+};
+type drawEventTypes = {
+    onCreate?: (event: Object) => void;
+    /** called when a feature is created */
+    onDelete?: (event: Object) => void;
+    /** called when a feature is deleted */
+    onCombine?: (event: Object) => void;
+    /** called when features are combined */
+    onUncombine?: (event: Object) => void;
+    /** called when features are uncombined */
+    onUpdate?: (event: Object) => void;
+    /** called when a feature is updated */
+    onSelectionchange?: (event: Object) => void;
+    /** called when the selected features change */
+    onModechange?: (event: Object) => void;
+    /** called when the draw mode changes */
+    onRender?: (event: Object) => void;
+    /** called when the draw canvas is re-rendered */
+    onActionable?: (event: Object) => void;
+};
+
+type Map = mapboxgl.Map & {
+    debug: boolean;
+    debugEvents: boolean;
+    sourceIdList: string[];
+    layerIdList: string[];
+    /** Whether this map instance is backed by MapLibre GL JS rather than Mapbox GL JS */
+    isMapLibre: boolean;
+};
+type Viewport = {
+    id?: string;
+    point?: {
+        x: number;
+        y: number;
+    };
+    center?: LngLatLike;
+    bounds?: LngLatBounds;
+    zoom?: number;
+    pitch?: number;
+    bearing?: number;
+    padding?: PaddingOptions;
+    inTransit?: boolean;
+};
+type Props$b = {
+    /** ID for the map container element */
+    id?: string;
+    /** Map Container CSS Style */
+    style?: JSX.CSSProperties;
+    /** Map Container CSS Class */
+    class?: string;
+    /** SolidJS Class List for Map Container */
+    classList?: {
+        [k: string]: boolean | undefined;
+    };
+    /** Current Map View */
+    viewport?: Viewport;
+    /** Mapbox Options
+     * @see https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters
+     */
+    options?: MapboxOptions;
+    /** Mapbox Standard / Standard Satellite style configuration — Mapbox-only, no-op on MapLibre.
+     * @see https://docs.mapbox.com/mapbox-gl-js/guides/styles/#configure-a-style
+     */
+    config?: {
+        id?: string;
+        lightPreset?: "dawn" | "day" | "dusk" | "night" | string;
+        showPlaceLabels?: boolean;
+        showRoadLabels?: boolean;
+        showPointOfInterestLabels?: boolean;
+        showTransitLabels?: boolean;
+        showRoadsAndTransit?: boolean;
+        showLandmarkIcons?: boolean;
+        showLandmarkIconLabels?: boolean;
+        showPedestrianRoads?: boolean;
+        show3dObjects?: boolean;
+        show3dBuildings?: boolean;
+        show3dTrees?: boolean;
+        show3dLandmarks?: boolean;
+        show3dFacades?: boolean;
+        showAdminBoundaries?: boolean;
+        showIndoor?: boolean;
+        showIndoorLabels?: boolean;
+        theme?: "default" | "faded" | "monochrome" | "custom" | string;
+        themeData?: string;
+        colorModePointOfInterestLabels?: "default" | "single" | string;
+        backgroundPointOfInterestLabels?: "circle" | "none" | string;
+        densityPointOfInterestLabels?: 1 | 2 | 3 | 4 | 5 | number;
+        fuelingStationModePointOfInterestLabels?: string;
+        colorPlaceLabels?: string;
+        colorRoadLabels?: string;
+        colorCommercial?: string;
+        colorEducation?: string;
+        colorMedical?: string;
+        colorIndustrial?: string;
+        colorGreenspace?: string;
+        colorWater?: string;
+        colorLand?: string;
+        colorAdminBoundaries?: string;
+        colorPointOfInterestLabels?: string;
+        colorMotorways?: string;
+        colorTrunks?: string;
+        colorRoads?: string;
+        colorBuildings?: string;
+        colorBuildingHighlight?: string;
+        colorBuildingSelect?: string;
+        colorPlaceLabelHighlight?: string;
+        colorPlaceLabelSelect?: string;
+        colorIndoorLabelSelect?: string;
+        colorIndoorLabelHighlight?: string;
+        font?: string[];
+        [key: string]: boolean | string | number | string[];
+    };
+    /** Type for pan, move and zoom transitions */
+    transitionType?: "flyTo" | "easeTo" | "jumpTo" | string;
+    /** Event listener for Viewport updates */
+    onViewportChange?: (viewport: Viewport) => void;
+    /** Event listener for User Interaction */
+    onUserInteraction?: (user: boolean) => void;
+    /** Displays Map Tile Borders */
+    showTileBoundaries?: boolean;
+    /** Displays Wireframe if Terrain is visible */
+    showTerrainWireframe?: boolean;
+    /** Displays Borders if Padding is set */
+    showPadding?: boolean;
+    /** Displays Label Collision Boxes */
+    showCollisionBoxes?: boolean;
+    /** Displays all feature outlines even if normally not drawn by style rules */
+    showOverdrawInspector?: boolean;
+    /** Mouse Cursor Style */
+    cursorStyle?: string;
+    darkStyle?: StyleSpecification | string;
+    /** Called with (prevStyle, nextStyle) on every base style change. Return false to skip
+     * mapbox-gl's diff attempt and go straight to a full rebuild — useful when you already know a
+     * given style pair can never diff (e.g. Standard vs Standard Satellite, whose sprite/glyphs
+     * always differ), to avoid the wasted diff pass and its "Unimplemented ... Rebuilding the style
+     * from scratch" console warnings. Defaults to always attempting the diff (mapbox-gl's own
+     * default), so existing consumers see no behavior change unless they opt in. */
+    shouldDiffStyle?: (prevStyle: any, nextStyle: any) => boolean;
+    disableResize?: boolean;
+    mapLib?: any;
+    apikey?: string;
+    debug?: boolean;
+    debugEvents?: boolean;
+    ref?: HTMLDivElement;
+    /** Children within the Map Container */
+    children?: any;
+} & mapEventTypes;
+/** Creates a new Map Container */
+declare const MapGL: Component<Props$b>;
+
+type MapContextState = {
+    map: Map | null;
+    /** The resolved Mapbox/MapLibre module in use — replaces the old `window.MapLib` global */
+    mapLib: any;
+    isMapLibre: boolean;
+};
+declare const useMapContext: () => [MapContextState];
+declare const MapProvider: ParentComponent<{
+    map?: Map;
+    mapLib?: any;
+    isMapLibre?: boolean;
+}>;
+
+declare const useSourceId: () => string;
+type Props$a = {
+    /** @optional Source ID for referencing non nexted Layers */
+    id?: string;
+    /** @see https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/ */
+    source: SourceSpecification;
+    /** The map layers associated with this source */
+    children?: any;
+};
+declare const Source: Component<Props$a>;
+
+type FlatLayerStyle = Record<string, any>;
+type Props$9 = {
+    id?: string;
+    /** A string that uniquely identifies the layer. If not provided, a unique ID will be generated. */
+    style?: FlatLayerStyle;
+    /** A Mapbox Style Specification object that defines the visual appearance of the layer. */
+    customLayer?: CustomLayerInterface;
+    /** An object that implements the `CustomLayerInterface` interface, which allows you to create custom layers using WebGL. */
+    filter?: FilterSpecification;
+    /** A Mapbox filter specification that defines which features of the layer to include or exclude from the layer. */
+    visible?: boolean;
+    /** A boolean that determines whether the layer is visible or not. */
+    sourceId?: string;
+    /** A string that specifies the ID of the source that the layer uses for its data. */
+    slot?: "bottom" | "middle" | "top" | string;
+    /** A string that specifies the slot to which the layer belongs. */
+    beforeType?: "background" | "fill" | "line" | "symbol" | "raster" | "circle" | "fill-extrusion" | "heatmap" | "hillshade" | "sky" | string;
+    /** A string that specifies the type of layer before which the current layer should be inserted. */
+    beforeId?: string;
+    /** A string that specifies the ID of the layer before which the current layer should be inserted. */
+    featureState?: {
+        id: number | string;
+        state: Record<string, any>;
+    };
+    /** An object that specifies the state of a feature in the layer. The object consists of an ID (either a number or a string) and an object containing the state. */
+    children?: any;
+} & layerEventTypes;
+declare const Layer: Component<Props$9>;
+
+declare global {
+    interface Window {
+        BABYLON?: any;
+        THREE?: any;
+    }
+}
+type Props$8 = {
+    id?: string;
+    origin?: [number, number, number?];
+    defaultLight?: boolean;
+    babylon?: boolean;
+    onAdd?: (scene: any, map: any, gl: any) => void;
+    onRender?: (gl: any, matrix: any) => void;
+    children?: JSX.Element | JSX.Element[];
+    /** A string that specifies the type of layer before which the current layer should be inserted. */
+    beforeId?: string;
+    disableProjectionMatrix?: boolean;
+};
+declare const useScene: () => any;
+declare const Layer3D: Component<Props$8>;
+
+/** MapLibre's `sky` style-spec object — a genuinely different shape from Mapbox's `Fog`,
+ * not a variant of it. */
+interface MapLibreSky {
+    "sky-color"?: string;
+    "sky-horizon-blend"?: number;
+    "horizon-color"?: string;
+    "horizon-fog-blend"?: number;
+    "fog-color"?: string;
+    "fog-ground-blend"?: number;
+    "atmosphere-blend"?: number;
+}
+interface AtmosphereProps {
+    /** Fog (Mapbox) or Sky (MapLibre) Specification — shape depends on the active base library */
+    style?: FogSpecification | MapLibreSky;
+}
+declare const Atmosphere: VoidComponent<AtmosphereProps>;
+
+interface TerrainSpecification {
+    source?: string;
+    exaggeration?: number | undefined;
+}
+declare const Terrain: VoidComponent<TerrainSpecification>;
+
+type ControlType = "navigation" | "scale" | "attribution" | "fullscreen" | "geolocate" | "logo" | "terrain";
+type Props$7 = {
+    type?: ControlType;
+    options?: NavigationControlOptions | ScaleControlOptions | AttributionControlOptions | FullscreenControlOptions | GeolocateControlOptions | object;
+    custom?: any;
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+};
+declare const Control: VoidComponent<Props$7>;
+
+type Props$6 = {
+    /** The geographical location to place the marker */
+    lngLat: LngLatLike;
+    /** Options for the Mapbox GL JS marker */
+    options?: MarkerOptions;
+    /** Options for the Mapbox GL JS popup that is associated with the marker */
+    popup?: PopupOptions;
+    /** Whether the marker's associated popup should be open */
+    showPopup?: boolean;
+    /** Whether the marker is draggable */
+    draggable?: boolean;
+    /** A function that is called when the marker's associated popup is opened */
+    onOpen?: () => void;
+    /** A function that is called when the marker's associated popup is closed */
+    onClose?: () => void;
+    /** A function that is called when the marker starts being dragged */
+    onDragStart?: () => void;
+    /** A function that is called when the marker stops being dragged */
+    onDragEnd?: () => void;
+    /** A function that is called when the marker is being dragged */
+    onDrag?: (lngLat: number[]) => void;
+    /** The content to be displayed in the marker's associated popup */
+    children?: any;
+};
+declare const Marker: Component<Props$6>;
+
+type Props$5 = {
+    /** Options for configuring the popup */
+    options?: PopupOptions;
+    /** Flag for tracking the mouse pointer */
+    trackPointer?: boolean;
+    /** Longitude and latitude for the popup */
+    lngLat?: LngLatLike;
+    /** Callback for when the popup is opened */
+    onOpen?: () => void;
+    /** Callback for when the popup is closed */
+    onClose?: () => void;
+    /** Children to display within the popup */
+    children?: any;
+};
+declare const Popup: Component<Props$5>;
+
+type StyleImageMetadata = NonNullable<Parameters<Map$1['addImage']>[2]>;
+declare const patternList: string[];
+type Color = `#${string}` | `rgb(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})`;
+type Props$4 = {
+    id: string;
+    /** The unique identifier for the image. */
+    source?: HTMLImageElement | ImageBitmap | ImageData | SVGElement | {
+        width: number;
+        height: number;
+        data: Uint8Array | Uint8ClampedArray;
+    } | StyleImageInterface | string;
+    /** The image to be used for the image component. */
+    options?: StyleImageMetadata & {
+        fill?: Color;
+        stroke?: Color;
+        transform?: string;
+    };
+    /**  The options for the image */
+    pattern?: {
+        type: string;
+        color: Color;
+        background: Color;
+        lineWith: number;
+    };
+};
+declare const MGL_Image: VoidComponent<Props$4>;
+
+/** Options for rotating the globe. */
+interface RotateGlobeOptions {
+    /** The number of seconds per revolution. */
+    secPerRev?: number;
+    /** The maximum zoom level for spinning the globe.  */
+    maxSpinZoom?: number;
+    /** The zoom level at which the spinning slows down. */
+    slowSpinZoom?: number;
+}
+/** Options for rotating the viewport. */
+interface RotateViewportOptions {
+    /** The number of seconds per revolution. */
+    secPerRev?: number;
+    /** The pitch angle in degrees. */
+    pitch?: number;
+    /** The center of rotation. */
+    around?: LngLatLike;
+}
+/** Props for the component. */
+type Props$3 = {
+    /** Whether to rotate the globe. */
+    rotateGlobe?: boolean | RotateGlobeOptions;
+    /** Whether to rotate the viewport. */
+    rotateViewport?: boolean | RotateViewportOptions;
+    /** Whether to reverse the rotation direction. */
+    reverse?: boolean;
+    /** Whether to reset the rotation when stopped. */
+    resetWhenStopped?: boolean;
+    /** Translation options. */
+    translate?: {
+        /** The type of translation. */
+        type?: 'line' | 'sphere';
+        /** The starting position. */
+        start: [number, number, number];
+        /** The ending position. */
+        end: [number, number, number];
+        /** The target position. */
+        target: LngLatLike;
+        /** The ending target position. */
+        targetEnd?: LngLatLike;
+        /** The easing function to use. */
+        easing?: 'in' | 'out' | 'inOut';
+        /** Whether to loop the translation. */
+        loop?: boolean;
+        /** The duration of the translation in milliseconds. */
+        duration: number;
+    };
+    /** The children to render. */
+    children?: any;
+};
+declare const Camera: Component<Props$3>;
+
+type Props$2 = {
+    /** Light Specifications */
+    style: LightSpecification;
+};
+declare const Light: VoidComponent<Props$2>;
+
+type Props$1 = {
+    /** Draw Library */
+    lib: any;
+    /** Draw Options */
+    options?: object;
+    /** Draw Control Position */
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /** Draw Control Instance */
+    getInstance?: (object: any) => void;
+    showLength?: boolean;
+    showArea?: boolean;
+} & drawEventTypes;
+declare const Draw: VoidComponent<Props$1>;
+
+type Props = {
+    /** The deck.gl overlay class matching the active base library — `MapboxOverlay` from
+     * `@deck.gl/mapbox` for Mapbox, `MapLibreOverlay` from `@deck.gl/maplibre` for MapLibre.
+     * solid-map-gl never imports either package itself; you supply the class. */
+    overlay: new (props: any) => any;
+    /** Props forwarded to the deck.gl overlay, e.g. `{ layers, interleaved }` */
+    props?: any;
+};
+/** Adds a deck.gl overlay control to the map, forwarding `props` reactively via `setProps`. */
+declare const DeckOverlay: VoidComponent<Props>;
+
+export { Atmosphere, Camera, type Color, Control, DeckOverlay, Draw, MGL_Image as Image, Layer, Layer3D, Light, type MapLibreSky, MapProvider, Marker, Popup, Source, Terrain, type Viewport, MapGL as default, patternList, useMapContext, useScene, useSourceId };