react-bkoi-gl 1.0.7 → 2.0.0

package/README.md

@@ -17,35 +17,44 @@ Or via yarn:
 yarn add react-bkoi-gl
 ```
 
-### Example
+## Example
 
-```js
+### JavaScript (`js`) Example
+```jsx
 import { useRef } from 'react';
-import { Map, FullscreenControl, GeolocateControl, NavigationControl, ScaleControl } from 'react-bkoi-gl';
+import {
+  Map,
+  Marker,
+  Popup,
+  Layer,
+  Source,
+  NavigationControl,
+  FullscreenControl,
+  GeolocateControl,
+  ScaleControl,
+} from 'react-bkoi-gl';
 
 // Import Styles
-import "react-bkoi-gl/styles"
+import "react-bkoi-gl/styles";
 
 const App = () => {
-  const BARIKOI_API_KEY = 'YOUR_BARIKOI_API_KEY_HERE'
-  const mapStyle = `https://map.barikoi.com/styles/osm-liberty/style.json?key=${BARIKOI_API_KEY}`
+  const BARIKOI_API_KEY = 'YOUR_BARIKOI_API_KEY_HERE';
+  const mapStyle = `https://map.barikoi.com/styles/osm-liberty/style.json?key=${BARIKOI_API_KEY}`;
   const mapContainer = useRef(null);
   const mapRef = useRef(null);
   const initialViewState = {
     longitude: 90.36402,
     latitude: 23.823731,
     minZoom: 4,
-    maxZoom: 30,
+    maxZoom: 22,
     zoom: 13,
     bearing: 0,
     pitch: 0,
-    antialias: true
-  }
+    antialias: true,
+  };
 
   return (
-    <div
-      ref={mapContainer} style={containerStyles}
-    >
+    <div ref={mapContainer} style={containerStyles}>
       <Map
         ref={mapRef}
         mapStyle={mapStyle}
@@ -53,16 +62,39 @@ const App = () => {
         initialViewState={initialViewState}
         doubleClickZoom={false}
         dragRotate={false}
-        attributionControl={false}
       >
-        <GeolocateControl position="top-right" />
-        <FullscreenControl position="top-right" />
+        <Marker longitude={90.36402} latitude={23.823731} color="red" />
+        <Popup longitude={90.36402} latitude={23.823731}>
+          <div>Hello, Barikoi!</div>
+        </Popup>
+        <Source
+          id="points"
+          type="geojson"
+          data={{
+            type: 'FeatureCollection',
+            features: [
+              {
+                type: 'Feature',
+                properties: {},
+                geometry: { type: 'Point', coordinates: [90.36402, 23.823731] }
+              }
+            ]
+          }}
+        />
+        <Layer
+          id="points-layer"
+          type="circle"
+          source="points"
+          paint={{ 'circle-radius': 10, 'circle-color': '#ff0000' }}
+        />
         <NavigationControl position="top-right" />
+        <FullscreenControl position="top-right" />
+        <GeolocateControl position="top-right" />
         <ScaleControl position="bottom-right" />
       </Map>
     </div>
-  )
-}
+  );
+};
 
 // JSX Styles
 const containerStyles = {
@@ -70,11 +102,124 @@ const containerStyles = {
   height: "100vh",
   minHeight: "400px",
   overflow: "hidden",
+};
+
+export default App;
+```
+
+### TypeScript (`ts`) Example
+```tsx
+import { useRef } from 'react';
+import {
+  Map,
+  Marker,
+  Popup,
+  Layer,
+  Source,
+  NavigationControl,
+  FullscreenControl,
+  GeolocateControl,
+  ScaleControl,
+  MapRef
+} from 'react-bkoi-gl';
+
+// Import Styles
+import "react-bkoi-gl/styles";
+
+interface MapProps {
+  longitude: number;
+  latitude: number;
 }
 
-export default App
+const App: React.FC = () => {
+  const BARIKOI_API_KEY = 'YOUR_BARIKOI_API_KEY_HERE';
+  const mapStyle = `https://map.barikoi.com/styles/osm-liberty/style.json?key=${BARIKOI_API_KEY}`;
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<MapRef>(null);
+  const initialViewState = {
+    longitude: 90.36402,
+    latitude: 23.823731,
+    minZoom: 4,
+    maxZoom: 22,
+    zoom: 13,
+    bearing: 0,
+    pitch: 0,
+    antialias: true,
+  };
+
+  return (
+    <div ref={mapContainer} style={containerStyles}>
+      <Map
+        ref={mapRef}
+        mapStyle={mapStyle}
+        style={{ width: "100%", height: "100%" }}
+        initialViewState={initialViewState}
+        doubleClickZoom={false}
+        dragRotate={false}
+      >
+        <Marker longitude={90.36402} latitude={23.823731} color="red" />
+        <Popup longitude={90.36402} latitude={23.823731}>
+          <div>Hello, Barikoi!</div>
+        </Popup>
+        <Source
+          id="points"
+          type="geojson"
+          data={{
+            type: 'FeatureCollection',
+            features: [
+              {
+                type: 'Feature',
+                properties: {},
+                geometry: { type: 'Point', coordinates: [90.36402, 23.823731] }
+              }
+            ]
+          }}
+        />
+        <Layer
+          id="points-layer"
+          type="circle"
+          source="points"
+          paint={{ 'circle-radius': 10, 'circle-color': '#ff0000' }}
+        />
+        <NavigationControl position="top-right" />
+        <FullscreenControl position="top-right" />
+        <GeolocateControl position="top-right" />
+        <ScaleControl position="bottom-right" />
+      </Map>
+    </div>
+  );
+};
+
+// JSX Styles
+const containerStyles: React.CSSProperties = {
+  width: "100%",
+  height: "100vh",
+  minHeight: "400px",
+  overflow: "hidden",
+};
+
+export default App;
 ```
 
+## Components
+
+Here is a list of all available components in `react-bkoi-gl`:
+
+| Component           | Description                                                                 |
+|---------------------|-----------------------------------------------------------------------------|
+| `Map`               | The core component for rendering a Barikoi map. Must be the parent of all other components. |
+| `Marker`            | Displays a marker on the map at specified coordinates.                      |
+| `Popup`             | Displays a popup with custom content at specified coordinates.              |
+| `Layer`             | Adds a custom layer to the map.                                             |
+| `Source`            | Defines a data source for the map.                                          |
+| `NavigationControl` | Adds zoom and rotation controls.                                            |
+| `FullscreenControl` | Adds a button to toggle fullscreen mode.                                    |
+| `GeolocateControl`  | Centers the map on the user's location.                                     |
+| `ScaleControl`      | Displays a scale bar.                                                       |
+| `TerrainControl`    | Adds terrain control to the map.                                            |
+| `useMap`            | Custom hook for managing the map instance.                                  |
+| `useControl`        | Custom hook for managing map controls.                                      |
+
 ## Get Barikoi API key
 
 To access Barikoi's API services, you need to:

package/dist/components/attribution-control.d.ts

@@ -1,11 +1,9 @@
-import * as React from 'react';
-import type { ControlPosition, AttributionControlInstance } from '../types';
-export type AttributionControlProps<OptionsT> = OptionsT & {
+import * as React from "react";
+import type { ControlPosition, AttributionControlOptions } from "../types/lib";
+export type AttributionControlProps = AttributionControlOptions & {
     /** Placement of the control relative to the map. */
     position?: ControlPosition;
     /** CSS style override, applied to the control's container */
     style?: React.CSSProperties;
 };
-declare function AttributionControl<AttributionControlOptions, ControlT extends AttributionControlInstance>(props: AttributionControlProps<AttributionControlOptions>): null;
-declare const _default: React.MemoExoticComponent<typeof AttributionControl>;
-export default _default;
+export declare const AttributionControl: React.FC<AttributionControlProps>;

package/dist/components/attribution-control.js

@@ -1,7 +1,7 @@
-import { useEffect, memo } from 'react';
+import { useEffect, memo } from "react";
 import { applyReactStyle } from "../utils/apply-react-style.js";
-import useControl from "./use-control.js";
-function AttributionControl(props) {
+import { useControl } from "./use-control.js";
+function _AttributionControl(props) {
   const ctrl = useControl(_ref => {
     let {
       mapLib
@@ -12,8 +12,9 @@ function AttributionControl(props) {
   });
   useEffect(() => {
     applyReactStyle(ctrl._container, props.style);
-  }, [props.style]);
+    if (!ctrl._container) return;
+  }, [props.style, ctrl._container]);
   return null;
 }
-export default memo(AttributionControl);
+export const AttributionControl = memo(_AttributionControl);
 //# sourceMappingURL=attribution-control.js.map

package/dist/components/attribution-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"attribution-control.js","names":["useEffect","memo","applyReactStyle","useControl","AttributionControl","props","ctrl","_ref","mapLib","position","_container","style"],"sources":["../../src/components/attribution-control.ts"],"sourcesContent":["import * as React from 'react';\nimport {useEffect, memo} from 'react';\nimport {applyReactStyle} from '../utils/apply-react-style';\nimport useControl from './use-control';\n\nimport type {ControlPosition, AttributionControlInstance} from '../types';\n\nexport type AttributionControlProps<OptionsT> = OptionsT & {\n  /** Placement of the control relative to the map. */\n  position?: ControlPosition;\n  /** CSS style override, applied to the control's container */\n  style?: React.CSSProperties;\n};\n\nfunction AttributionControl<AttributionControlOptions, ControlT extends AttributionControlInstance>(\n  props: AttributionControlProps<AttributionControlOptions>\n): null {\n  const ctrl = useControl<ControlT>(\n    ({mapLib}) => new mapLib.AttributionControl(props) as ControlT,\n    {\n      position: props.position\n    }\n  );\n\n  useEffect(() => {\n    applyReactStyle(ctrl._container, props.style);\n  }, [props.style]);\n\n  return null;\n}\n\nexport default memo(AttributionControl);\n"],"mappings":"AACA,SAAQA,SAAS,EAAEC,IAAI,QAAO,OAAO;AAAC,SAC9BC,eAAe;AAAA,OAChBC,UAAU;AAWjB,SAASC,kBAAkBA,CACzBC,KAAyD,EACnD;EACN,MAAMC,IAAI,GAAGH,UAAU,CACrBI,IAAA;IAAA,IAAC;MAACC;IAAM,CAAC,GAAAD,IAAA;IAAA,OAAK,IAAIC,MAAM,CAACJ,kBAAkB,CAACC,KAAK,CAAC;EAAA,CAAY,EAC9D;IACEI,QAAQ,EAAEJ,KAAK,CAACI;EAClB,CACF,CAAC;EAEDT,SAAS,CAAC,MAAM;IACdE,eAAe,CAACI,IAAI,CAACI,UAAU,EAAEL,KAAK,CAACM,KAAK,CAAC;EAC/C,CAAC,EAAE,CAACN,KAAK,CAACM,KAAK,CAAC,CAAC;EAEjB,OAAO,IAAI;AACb;AAEA,eAAeV,IAAI,CAACG,kBAAkB,CAAC","ignoreList":[]}
+{"version":3,"file":"attribution-control.js","names":["useEffect","memo","applyReactStyle","useControl","_AttributionControl","props","ctrl","_ref","mapLib","AttributionControl","position","_container","style"],"sources":["../../src/components/attribution-control.ts"],"sourcesContent":["/* eslint-disable max-statements */\n/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport * as React from \"react\";\nimport { useEffect, memo } from \"react\";\nimport { applyReactStyle } from \"../utils/apply-react-style\";\nimport { useControl } from \"./use-control\";\n\nimport type { ControlPosition, AttributionControlOptions } from \"../types/lib\";\n\nexport type AttributionControlProps = AttributionControlOptions & {\n  /** Placement of the control relative to the map. */\n  position?: ControlPosition;\n  /** CSS style override, applied to the control's container */\n  style?: React.CSSProperties;\n};\n\nfunction _AttributionControl(props: AttributionControlProps) {\n  const ctrl = useControl(\n    ({ mapLib }) => new mapLib.AttributionControl(props),\n    { position: props.position },\n  );\n\n  useEffect(() => {\n    applyReactStyle(ctrl._container, props.style);\n\n    // Ensure the container is available\n    if (!ctrl._container) return;\n\n    // Create and append the custom attribution control\n    // const customAttribution = document.createElement('details');\n    // customAttribution.className = 'maplibregl-ctrl maplibregl-ctrl-attrib maplibregl-compact maplibregl-compact-show';\n    // customAttribution.setAttribute('open', '');\n\n    // const summary = document.createElement('summary');\n    // summary.className = 'maplibregl-ctrl-attrib-button';\n    // summary.setAttribute('title', 'Toggle attribution');\n    // summary.setAttribute('aria-label', 'Toggle attribution');\n    // customAttribution.appendChild(summary);\n\n    // const innerDiv = document.createElement('div');\n    // innerDiv.className = 'maplibregl-ctrl-attrib-inner';\n    // innerDiv.innerHTML = `\n    //   <a href=\"https://barikoi.com/\" target=\"_blank\">© Barikoi</a> |\n    //   <a href=\"https://www.openmaptiles.org/\" target=\"_blank\">© OpenMapTiles</a> |\n    //   <a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\">© OpenStreetMap contributors</a>\n    // `;\n    // customAttribution.appendChild(innerDiv);\n\n    // ctrl._container.appendChild(customAttribution);\n  }, [props.style, ctrl._container]);\n\n  return null;\n}\n\nexport const AttributionControl: React.FC<AttributionControlProps> =\n  memo(_AttributionControl);\n"],"mappings":"AAGA,SAASA,SAAS,EAAEC,IAAI,QAAQ,OAAO;AAAC,SAC/BC,eAAe;AAAA,SACfC,UAAU;AAWnB,SAASC,mBAAmBA,CAACC,KAA8B,EAAE;EAC3D,MAAMC,IAAI,GAAGH,UAAU,CACrBI,IAAA;IAAA,IAAC;MAAEC;IAAO,CAAC,GAAAD,IAAA;IAAA,OAAK,IAAIC,MAAM,CAACC,kBAAkB,CAACJ,KAAK,CAAC;EAAA,GACpD;IAAEK,QAAQ,EAAEL,KAAK,CAACK;EAAS,CAC7B,CAAC;EAEDV,SAAS,CAAC,MAAM;IACdE,eAAe,CAACI,IAAI,CAACK,UAAU,EAAEN,KAAK,CAACO,KAAK,CAAC;IAG7C,IAAI,CAACN,IAAI,CAACK,UAAU,EAAE;EAuBxB,CAAC,EAAE,CAACN,KAAK,CAACO,KAAK,EAAEN,IAAI,CAACK,UAAU,CAAC,CAAC;EAElC,OAAO,IAAI;AACb;AAEA,OAAO,MAAMF,kBAAqD,GAChER,IAAI,CAACG,mBAAmB,CAAC","ignoreList":[]}

package/dist/components/fullscreen-control.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import type { ControlPosition, FullscreenControlInstance } from '../types';
-export type FullscreenControlProps<OptionsT> = Omit<OptionsT, 'container'> & {
+import * as React from "react";
+import type { ControlPosition, FullscreenControlOptions } from "../types/lib";
+export type FullscreenControlProps = Omit<FullscreenControlOptions, "container"> & {
     /** Id of the DOM element which should be made full screen. By default, the map container
      * element will be made full screen. */
     containerId?: string;
@@ -9,6 +9,4 @@ export type FullscreenControlProps<OptionsT> = Omit<OptionsT, 'container'> & {
     /** CSS style override, applied to the control's container */
     style?: React.CSSProperties;
 };
-declare function FullscreenControl<FullscreenControlOptions, ControlT extends FullscreenControlInstance>(props: FullscreenControlProps<FullscreenControlOptions>): null;
-declare const _default: React.MemoExoticComponent<typeof FullscreenControl>;
-export default _default;
+export declare const FullscreenControl: React.FC<FullscreenControlProps>;

package/dist/components/fullscreen-control.js

@@ -1,7 +1,7 @@
-import { useEffect, memo } from 'react';
+import { useEffect, memo } from "react";
 import { applyReactStyle } from "../utils/apply-react-style.js";
-import useControl from "./use-control.js";
-function FullscreenControl(props) {
+import { useControl } from "./use-control.js";
+function _FullscreenControl(props) {
   const ctrl = useControl(_ref => {
     let {
       mapLib
@@ -17,5 +17,5 @@ function FullscreenControl(props) {
   }, [props.style]);
   return null;
 }
-export default memo(FullscreenControl);
+export const FullscreenControl = memo(_FullscreenControl);
 //# sourceMappingURL=fullscreen-control.js.map

package/dist/components/fullscreen-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-control.js","names":["useEffect","memo","applyReactStyle","useControl","FullscreenControl","props","ctrl","_ref","mapLib","container","containerId","document","getElementById","position","_controlContainer","style"],"sources":["../../src/components/fullscreen-control.tsx"],"sourcesContent":["/* global document */\nimport * as React from 'react';\nimport {useEffect, memo} from 'react';\nimport {applyReactStyle} from '../utils/apply-react-style';\nimport useControl from './use-control';\n\nimport type {ControlPosition, FullscreenControlInstance} from '../types';\n\nexport type FullscreenControlProps<OptionsT> = Omit<OptionsT, 'container'> & {\n  /** Id of the DOM element which should be made full screen. By default, the map container\n   * element will be made full screen. */\n  containerId?: string;\n  /** Placement of the control relative to the map. */\n  position?: ControlPosition;\n  /** CSS style override, applied to the control's container */\n  style?: React.CSSProperties;\n};\n\nfunction FullscreenControl<FullscreenControlOptions, ControlT extends FullscreenControlInstance>(\n  props: FullscreenControlProps<FullscreenControlOptions>\n): null {\n  const ctrl = useControl<ControlT>(\n    ({mapLib}) =>\n      new mapLib.FullscreenControl({\n        container: props.containerId && document.getElementById(props.containerId)\n      }) as ControlT,\n    {position: props.position}\n  );\n\n  useEffect(() => {\n    applyReactStyle(ctrl._controlContainer, props.style);\n  }, [props.style]);\n\n  return null;\n}\n\nexport default memo(FullscreenControl);\n"],"mappings":"AAEA,SAAQA,SAAS,EAAEC,IAAI,QAAO,OAAO;AAAC,SAC9BC,eAAe;AAAA,OAChBC,UAAU;AAcjB,SAASC,iBAAiBA,CACxBC,KAAuD,EACjD;EACN,MAAMC,IAAI,GAAGH,UAAU,CACrBI,IAAA;IAAA,IAAC;MAACC;IAAM,CAAC,GAAAD,IAAA;IAAA,OACP,IAAIC,MAAM,CAACJ,iBAAiB,CAAC;MAC3BK,SAAS,EAAEJ,KAAK,CAACK,WAAW,IAAIC,QAAQ,CAACC,cAAc,CAACP,KAAK,CAACK,WAAW;IAC3E,CAAC,CAAC;EAAA,CAAY,EAChB;IAACG,QAAQ,EAAER,KAAK,CAACQ;EAAQ,CAC3B,CAAC;EAEDb,SAAS,CAAC,MAAM;IACdE,eAAe,CAACI,IAAI,CAACQ,iBAAiB,EAAET,KAAK,CAACU,KAAK,CAAC;EACtD,CAAC,EAAE,CAACV,KAAK,CAACU,KAAK,CAAC,CAAC;EAEjB,OAAO,IAAI;AACb;AAEA,eAAed,IAAI,CAACG,iBAAiB,CAAC","ignoreList":[]}
+{"version":3,"file":"fullscreen-control.js","names":["useEffect","memo","applyReactStyle","useControl","_FullscreenControl","props","ctrl","_ref","mapLib","FullscreenControl","container","containerId","document","getElementById","position","_controlContainer","style"],"sources":["../../src/components/fullscreen-control.ts"],"sourcesContent":["/* global document */\nimport * as React from \"react\";\nimport { useEffect, memo } from \"react\";\nimport { applyReactStyle } from \"../utils/apply-react-style\";\nimport { useControl } from \"./use-control\";\n\nimport type { ControlPosition, FullscreenControlOptions } from \"../types/lib\";\n\nexport type FullscreenControlProps = Omit<\n  FullscreenControlOptions,\n  \"container\"\n> & {\n  /** Id of the DOM element which should be made full screen. By default, the map container\n   * element will be made full screen. */\n  containerId?: string;\n  /** Placement of the control relative to the map. */\n  position?: ControlPosition;\n  /** CSS style override, applied to the control's container */\n  style?: React.CSSProperties;\n};\n\nfunction _FullscreenControl(props: FullscreenControlProps) {\n  const ctrl = useControl(\n    ({ mapLib }) =>\n      new mapLib.FullscreenControl({\n        container:\n          props.containerId && document.getElementById(props.containerId),\n      }),\n    { position: props.position },\n  );\n\n  useEffect(() => {\n    applyReactStyle(ctrl._controlContainer, props.style);\n  }, [props.style]);\n\n  return null;\n}\n\nexport const FullscreenControl: React.FC<FullscreenControlProps> =\n  memo(_FullscreenControl);\n"],"mappings":"AAEA,SAASA,SAAS,EAAEC,IAAI,QAAQ,OAAO;AAAC,SAC/BC,eAAe;AAAA,SACfC,UAAU;AAiBnB,SAASC,kBAAkBA,CAACC,KAA6B,EAAE;EACzD,MAAMC,IAAI,GAAGH,UAAU,CACrBI,IAAA;IAAA,IAAC;MAAEC;IAAO,CAAC,GAAAD,IAAA;IAAA,OACT,IAAIC,MAAM,CAACC,iBAAiB,CAAC;MAC3BC,SAAS,EACPL,KAAK,CAACM,WAAW,IAAIC,QAAQ,CAACC,cAAc,CAACR,KAAK,CAACM,WAAW;IAClE,CAAC,CAAC;EAAA,GACJ;IAAEG,QAAQ,EAAET,KAAK,CAACS;EAAS,CAC7B,CAAC;EAEDd,SAAS,CAAC,MAAM;IACdE,eAAe,CAACI,IAAI,CAACS,iBAAiB,EAAEV,KAAK,CAACW,KAAK,CAAC;EACtD,CAAC,EAAE,CAACX,KAAK,CAACW,KAAK,CAAC,CAAC;EAEjB,OAAO,IAAI;AACb;AAEA,OAAO,MAAMP,iBAAmD,GAC9DR,IAAI,CAACG,kBAAkB,CAAC","ignoreList":[]}

package/dist/components/geolocate-control.d.ts

@@ -1,37 +1,21 @@
-import * as React from 'react';
-import type { ControlPosition, GeolocateControlInstance, GeolocateEvent, GeolocateResultEvent, GeolocateErrorEvent } from '../types';
-export type GeolocateControlProps<OptionsT, ControlT extends GeolocateControlInstance> = OptionsT & {
+import * as React from "react";
+import type { ControlPosition, GeolocateControlOptions } from "../types/lib";
+import type { GeolocateEvent, GeolocateResultEvent, GeolocateErrorEvent } from "../types/events";
+export type GeolocateControlProps = GeolocateControlOptions & {
     /** Placement of the control relative to the map. */
     position?: ControlPosition;
     /** CSS style override, applied to the control's container */
     style?: React.CSSProperties;
     /** Called on each Geolocation API position update that returned as success. */
-    onGeolocate?: (e: GeolocateResultEvent<ControlT>) => void;
+    onGeolocate?: (e: GeolocateResultEvent) => void;
     /** Called on each Geolocation API position update that returned as an error. */
-    onError?: (e: GeolocateErrorEvent<ControlT>) => void;
+    onError?: (e: GeolocateErrorEvent) => void;
     /** Called on each Geolocation API position update that returned as success but user position
      * is out of map `maxBounds`. */
-    onOutOfMaxBounds?: (e: GeolocateResultEvent<ControlT>) => void;
+    onOutOfMaxBounds?: (e: GeolocateResultEvent) => void;
     /** Called when the GeolocateControl changes to the active lock state. */
-    onTrackUserLocationStart?: (e: GeolocateEvent<ControlT>) => void;
+    onTrackUserLocationStart?: (e: GeolocateEvent) => void;
     /** Called when the GeolocateControl changes to the background state. */
-    onTrackUserLocationEnd?: (e: GeolocateEvent<ControlT>) => void;
+    onTrackUserLocationEnd?: (e: GeolocateEvent) => void;
 };
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
-    /** Placement of the control relative to the map. */
-    position?: ControlPosition;
-    /** CSS style override, applied to the control's container */
-    style?: React.CSSProperties;
-    /** Called on each Geolocation API position update that returned as success. */
-    onGeolocate?: (e: GeolocateResultEvent<GeolocateControlInstance>) => void;
-    /** Called on each Geolocation API position update that returned as an error. */
-    onError?: (e: GeolocateErrorEvent<GeolocateControlInstance>) => void;
-    /** Called on each Geolocation API position update that returned as success but user position
-     * is out of map `maxBounds`. */
-    onOutOfMaxBounds?: (e: GeolocateResultEvent<GeolocateControlInstance>) => void;
-    /** Called when the GeolocateControl changes to the active lock state. */
-    onTrackUserLocationStart?: (e: GeolocateEvent<GeolocateControlInstance>) => void;
-    /** Called when the GeolocateControl changes to the background state. */
-    onTrackUserLocationEnd?: (e: GeolocateEvent<GeolocateControlInstance>) => void;
-} & React.RefAttributes<GeolocateControlInstance>>>;
-export default _default;
+export declare const GeolocateControl: React.FC<GeolocateControlProps>;

package/dist/components/geolocate-control.js

@@ -1,7 +1,7 @@
-import { useImperativeHandle, useRef, useEffect, forwardRef, memo } from 'react';
+import { useImperativeHandle, useRef, useEffect, forwardRef, memo } from "react";
 import { applyReactStyle } from "../utils/apply-react-style.js";
-import useControl from "./use-control.js";
-function GeolocateControl(props, ref) {
+import { useControl } from "./use-control.js";
+function _GeolocateControl(props, ref) {
   const thisRef = useRef({
     props
   });
@@ -11,24 +11,24 @@ function GeolocateControl(props, ref) {
     } = _ref;
     const gc = new mapLib.GeolocateControl(props);
     const setupUI = gc._setupUI;
-    gc._setupUI = args => {
+    gc._setupUI = () => {
       if (!gc._container.hasChildNodes()) {
-        setupUI(args);
+        setupUI();
       }
     };
-    gc.on('geolocate', e => {
+    gc.on("geolocate", e => {
       thisRef.current.props.onGeolocate?.(e);
     });
-    gc.on('error', e => {
+    gc.on("error", e => {
       thisRef.current.props.onError?.(e);
     });
-    gc.on('outofmaxbounds', e => {
+    gc.on("outofmaxbounds", e => {
       thisRef.current.props.onOutOfMaxBounds?.(e);
     });
-    gc.on('trackuserlocationstart', e => {
+    gc.on("trackuserlocationstart", e => {
       thisRef.current.props.onTrackUserLocationStart?.(e);
     });
-    gc.on('trackuserlocationend', e => {
+    gc.on("trackuserlocationend", e => {
       thisRef.current.props.onTrackUserLocationEnd?.(e);
     });
     return gc;
@@ -42,5 +42,5 @@ function GeolocateControl(props, ref) {
   }, [props.style]);
   return null;
 }
-export default memo(forwardRef(GeolocateControl));
+export const GeolocateControl = memo(forwardRef(_GeolocateControl));
 //# sourceMappingURL=geolocate-control.js.map

package/dist/components/geolocate-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"geolocate-control.js","names":["useImperativeHandle","useRef","useEffect","forwardRef","memo","applyReactStyle","useControl","GeolocateControl","props","ref","thisRef","ctrl","_ref","mapLib","gc","setupUI","_setupUI","args","_container","hasChildNodes","on","e","current","onGeolocate","onError","onOutOfMaxBounds","onTrackUserLocationStart","onTrackUserLocationEnd","position","style"],"sources":["../../src/components/geolocate-control.ts"],"sourcesContent":["import * as React from 'react';\nimport {useImperativeHandle, useRef, useEffect, forwardRef, memo} from 'react';\nimport {applyReactStyle} from '../utils/apply-react-style';\nimport useControl from './use-control';\n\nimport type {\n  ControlPosition,\n  GeolocateControlInstance,\n  GeolocateEvent,\n  GeolocateResultEvent,\n  GeolocateErrorEvent\n} from '../types';\n\nexport type GeolocateControlProps<\n  OptionsT,\n  ControlT extends GeolocateControlInstance\n> = OptionsT & {\n  /** Placement of the control relative to the map. */\n  position?: ControlPosition;\n  /** CSS style override, applied to the control's container */\n  style?: React.CSSProperties;\n\n  /** Called on each Geolocation API position update that returned as success. */\n  onGeolocate?: (e: GeolocateResultEvent<ControlT>) => void;\n  /** Called on each Geolocation API position update that returned as an error. */\n  onError?: (e: GeolocateErrorEvent<ControlT>) => void;\n  /** Called on each Geolocation API position update that returned as success but user position\n   * is out of map `maxBounds`. */\n  onOutOfMaxBounds?: (e: GeolocateResultEvent<ControlT>) => void;\n  /** Called when the GeolocateControl changes to the active lock state. */\n  onTrackUserLocationStart?: (e: GeolocateEvent<ControlT>) => void;\n  /** Called when the GeolocateControl changes to the background state. */\n  onTrackUserLocationEnd?: (e: GeolocateEvent<ControlT>) => void;\n};\n\nfunction GeolocateControl<GeolocateControlOptions, ControlT extends GeolocateControlInstance>(\n  props: GeolocateControlProps<GeolocateControlOptions, ControlT>,\n  ref: React.Ref<ControlT>\n) {\n  const thisRef = useRef({props});\n\n  const ctrl = useControl<ControlT>(\n    ({mapLib}) => {\n      const gc = new mapLib.GeolocateControl(props) as ControlT;\n\n      // Hack: fix GeolocateControl reuse\n      // When using React strict mode, the component is mounted twice.\n      // GeolocateControl's UI creation is asynchronous. Removing and adding it back causes the UI to be initialized twice.\n      // @ts-expect-error private method\n      const setupUI = gc._setupUI;\n      // @ts-expect-error private method\n      gc._setupUI = args => {\n        if (!gc._container.hasChildNodes()) {\n          setupUI(args);\n        }\n      };\n\n      gc.on('geolocate', e => {\n        thisRef.current.props.onGeolocate?.(e as GeolocateResultEvent<ControlT>);\n      });\n      gc.on('error', e => {\n        thisRef.current.props.onError?.(e as GeolocateErrorEvent<ControlT>);\n      });\n      gc.on('outofmaxbounds', e => {\n        thisRef.current.props.onOutOfMaxBounds?.(e as GeolocateResultEvent<ControlT>);\n      });\n      gc.on('trackuserlocationstart', e => {\n        thisRef.current.props.onTrackUserLocationStart?.(e as GeolocateEvent<ControlT>);\n      });\n      gc.on('trackuserlocationend', e => {\n        thisRef.current.props.onTrackUserLocationEnd?.(e as GeolocateEvent<ControlT>);\n      });\n\n      return gc;\n    },\n    {position: props.position}\n  );\n\n  thisRef.current.props = props;\n\n  useImperativeHandle(ref, () => ctrl, []);\n\n  useEffect(() => {\n    applyReactStyle(ctrl._container, props.style);\n  }, [props.style]);\n\n  return null;\n}\n\nexport default memo(forwardRef(GeolocateControl));\n"],"mappings":"AACA,SAAQA,mBAAmB,EAAEC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAO,OAAO;AAAC,SACvEC,eAAe;AAAA,OAChBC,UAAU;AAgCjB,SAASC,gBAAgBA,CACvBC,KAA+D,EAC/DC,GAAwB,EACxB;EACA,MAAMC,OAAO,GAAGT,MAAM,CAAC;IAACO;EAAK,CAAC,CAAC;EAE/B,MAAMG,IAAI,GAAGL,UAAU,CACrBM,IAAA,IAAc;IAAA,IAAb;MAACC;IAAM,CAAC,GAAAD,IAAA;IACP,MAAME,EAAE,GAAG,IAAID,MAAM,CAACN,gBAAgB,CAACC,KAAK,CAAa;IAMzD,MAAMO,OAAO,GAAGD,EAAE,CAACE,QAAQ;IAE3BF,EAAE,CAACE,QAAQ,GAAGC,IAAI,IAAI;MACpB,IAAI,CAACH,EAAE,CAACI,UAAU,CAACC,aAAa,CAAC,CAAC,EAAE;QAClCJ,OAAO,CAACE,IAAI,CAAC;MACf;IACF,CAAC;IAEDH,EAAE,CAACM,EAAE,CAAC,WAAW,EAAEC,CAAC,IAAI;MACtBX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACe,WAAW,GAAGF,CAAmC,CAAC;IAC1E,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,OAAO,EAAEC,CAAC,IAAI;MAClBX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACgB,OAAO,GAAGH,CAAkC,CAAC;IACrE,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,gBAAgB,EAAEC,CAAC,IAAI;MAC3BX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACiB,gBAAgB,GAAGJ,CAAmC,CAAC;IAC/E,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,wBAAwB,EAAEC,CAAC,IAAI;MACnCX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACkB,wBAAwB,GAAGL,CAA6B,CAAC;IACjF,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,sBAAsB,EAAEC,CAAC,IAAI;MACjCX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACmB,sBAAsB,GAAGN,CAA6B,CAAC;IAC/E,CAAC,CAAC;IAEF,OAAOP,EAAE;EACX,CAAC,EACD;IAACc,QAAQ,EAAEpB,KAAK,CAACoB;EAAQ,CAC3B,CAAC;EAEDlB,OAAO,CAACY,OAAO,CAACd,KAAK,GAAGA,KAAK;EAE7BR,mBAAmB,CAACS,GAAG,EAAE,MAAME,IAAI,EAAE,EAAE,CAAC;EAExCT,SAAS,CAAC,MAAM;IACdG,eAAe,CAACM,IAAI,CAACO,UAAU,EAAEV,KAAK,CAACqB,KAAK,CAAC;EAC/C,CAAC,EAAE,CAACrB,KAAK,CAACqB,KAAK,CAAC,CAAC;EAEjB,OAAO,IAAI;AACb;AAEA,eAAezB,IAAI,CAACD,UAAU,CAACI,gBAAgB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"geolocate-control.js","names":["useImperativeHandle","useRef","useEffect","forwardRef","memo","applyReactStyle","useControl","_GeolocateControl","props","ref","thisRef","ctrl","_ref","mapLib","gc","GeolocateControl","setupUI","_setupUI","_container","hasChildNodes","on","e","current","onGeolocate","onError","onOutOfMaxBounds","onTrackUserLocationStart","onTrackUserLocationEnd","position","style"],"sources":["../../src/components/geolocate-control.ts"],"sourcesContent":["import * as React from \"react\";\nimport {\n  useImperativeHandle,\n  useRef,\n  useEffect,\n  forwardRef,\n  memo,\n} from \"react\";\nimport { applyReactStyle } from \"../utils/apply-react-style\";\nimport { useControl } from \"./use-control\";\n\nimport type {\n  ControlPosition,\n  GeolocateControl as GeolocateControlInstance,\n  GeolocateControlOptions,\n} from \"../types/lib\";\nimport type {\n  GeolocateEvent,\n  GeolocateResultEvent,\n  GeolocateErrorEvent,\n} from \"../types/events\";\n\nexport type GeolocateControlProps = GeolocateControlOptions & {\n  /** Placement of the control relative to the map. */\n  position?: ControlPosition;\n  /** CSS style override, applied to the control's container */\n  style?: React.CSSProperties;\n\n  /** Called on each Geolocation API position update that returned as success. */\n  onGeolocate?: (e: GeolocateResultEvent) => void;\n  /** Called on each Geolocation API position update that returned as an error. */\n  onError?: (e: GeolocateErrorEvent) => void;\n  /** Called on each Geolocation API position update that returned as success but user position\n   * is out of map `maxBounds`. */\n  onOutOfMaxBounds?: (e: GeolocateResultEvent) => void;\n  /** Called when the GeolocateControl changes to the active lock state. */\n  onTrackUserLocationStart?: (e: GeolocateEvent) => void;\n  /** Called when the GeolocateControl changes to the background state. */\n  onTrackUserLocationEnd?: (e: GeolocateEvent) => void;\n};\n\nfunction _GeolocateControl(\n  props: GeolocateControlProps,\n  ref: React.Ref<GeolocateControlInstance>,\n) {\n  const thisRef = useRef({ props });\n\n  const ctrl = useControl(\n    ({ mapLib }) => {\n      const gc = new mapLib.GeolocateControl(props);\n\n      // Hack: fix GeolocateControl reuse\n      // When using React strict mode, the component is mounted twice.\n      // GeolocateControl's UI creation is asynchronous. Removing and adding it back causes the UI to be initialized twice.\n      const setupUI = gc._setupUI;\n      gc._setupUI = () => {\n        if (!gc._container.hasChildNodes()) {\n          setupUI();\n        }\n      };\n\n      gc.on(\"geolocate\", (e) => {\n        thisRef.current.props.onGeolocate?.(e as GeolocateResultEvent);\n      });\n      gc.on(\"error\", (e) => {\n        thisRef.current.props.onError?.(e as GeolocateErrorEvent);\n      });\n      gc.on(\"outofmaxbounds\", (e) => {\n        thisRef.current.props.onOutOfMaxBounds?.(e as GeolocateResultEvent);\n      });\n      gc.on(\"trackuserlocationstart\", (e) => {\n        thisRef.current.props.onTrackUserLocationStart?.(e as GeolocateEvent);\n      });\n      gc.on(\"trackuserlocationend\", (e) => {\n        thisRef.current.props.onTrackUserLocationEnd?.(e as GeolocateEvent);\n      });\n\n      return gc;\n    },\n    { position: props.position },\n  );\n\n  thisRef.current.props = props;\n\n  useImperativeHandle(ref, () => ctrl, []);\n\n  useEffect(() => {\n    applyReactStyle(ctrl._container, props.style);\n  }, [props.style]);\n\n  return null;\n}\n\nexport const GeolocateControl: React.FC<GeolocateControlProps> = memo(\n  forwardRef(_GeolocateControl),\n);\n"],"mappings":"AACA,SACEA,mBAAmB,EACnBC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,IAAI,QACC,OAAO;AAAC,SACNC,eAAe;AAAA,SACfC,UAAU;AAgCnB,SAASC,iBAAiBA,CACxBC,KAA4B,EAC5BC,GAAwC,EACxC;EACA,MAAMC,OAAO,GAAGT,MAAM,CAAC;IAAEO;EAAM,CAAC,CAAC;EAEjC,MAAMG,IAAI,GAAGL,UAAU,CACrBM,IAAA,IAAgB;IAAA,IAAf;MAAEC;IAAO,CAAC,GAAAD,IAAA;IACT,MAAME,EAAE,GAAG,IAAID,MAAM,CAACE,gBAAgB,CAACP,KAAK,CAAC;IAK7C,MAAMQ,OAAO,GAAGF,EAAE,CAACG,QAAQ;IAC3BH,EAAE,CAACG,QAAQ,GAAG,MAAM;MAClB,IAAI,CAACH,EAAE,CAACI,UAAU,CAACC,aAAa,CAAC,CAAC,EAAE;QAClCH,OAAO,CAAC,CAAC;MACX;IACF,CAAC;IAEDF,EAAE,CAACM,EAAE,CAAC,WAAW,EAAGC,CAAC,IAAK;MACxBX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACe,WAAW,GAAGF,CAAyB,CAAC;IAChE,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,OAAO,EAAGC,CAAC,IAAK;MACpBX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACgB,OAAO,GAAGH,CAAwB,CAAC;IAC3D,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,gBAAgB,EAAGC,CAAC,IAAK;MAC7BX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACiB,gBAAgB,GAAGJ,CAAyB,CAAC;IACrE,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,wBAAwB,EAAGC,CAAC,IAAK;MACrCX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACkB,wBAAwB,GAAGL,CAAmB,CAAC;IACvE,CAAC,CAAC;IACFP,EAAE,CAACM,EAAE,CAAC,sBAAsB,EAAGC,CAAC,IAAK;MACnCX,OAAO,CAACY,OAAO,CAACd,KAAK,CAACmB,sBAAsB,GAAGN,CAAmB,CAAC;IACrE,CAAC,CAAC;IAEF,OAAOP,EAAE;EACX,CAAC,EACD;IAAEc,QAAQ,EAAEpB,KAAK,CAACoB;EAAS,CAC7B,CAAC;EAEDlB,OAAO,CAACY,OAAO,CAACd,KAAK,GAAGA,KAAK;EAE7BR,mBAAmB,CAACS,GAAG,EAAE,MAAME,IAAI,EAAE,EAAE,CAAC;EAExCT,SAAS,CAAC,MAAM;IACdG,eAAe,CAACM,IAAI,CAACO,UAAU,EAAEV,KAAK,CAACqB,KAAK,CAAC;EAC/C,CAAC,EAAE,CAACrB,KAAK,CAACqB,KAAK,CAAC,CAAC;EAEjB,OAAO,IAAI;AACb;AAEA,OAAO,MAAMd,gBAAiD,GAAGX,IAAI,CACnED,UAAU,CAACI,iBAAiB,CAC9B,CAAC","ignoreList":[]}

package/dist/components/layer.d.ts

@@ -1,17 +1,18 @@
-import type { CustomLayerInterface, ILayer } from '../types';
+import type { CustomLayerInterface } from "../types/lib";
+import type { LayerSpecification } from "../types/style-spec";
 type OptionalId<T> = T extends {
     id: string;
-} ? Omit<T, 'id'> & {
+} ? Omit<T, "id"> & {
     id?: string;
 } : T;
 type OptionalSource<T> = T extends {
     source: string;
-} ? Omit<T, 'source'> & {
+} ? Omit<T, "source"> & {
     source?: string;
 } : T;
-export type LayerProps<LayerT> = OptionalSource<OptionalId<LayerT>> & {
+export type LayerProps = (OptionalSource<OptionalId<LayerSpecification>> | CustomLayerInterface) & {
     /** If set, the layer will be inserted before the specified layer */
     beforeId?: string;
 };
-declare function Layer<LayerT extends ILayer>(props: LayerProps<LayerT | CustomLayerInterface>): any;
-export default Layer;
+export declare function Layer(props: LayerProps): any;
+export {};

package/dist/components/layer.js

@@ -1,11 +1,11 @@
-import { useContext, useEffect, useMemo, useState, useRef } from 'react';
+import { useContext, useEffect, useMemo, useState, useRef } from "react";
 import { MapContext } from "./map.js";
 import assert from "../utils/assert.js";
 import { deepEqual } from "../utils/deep-equal.js";
 function updateLayer(map, id, props, prevProps) {
-  assert(props.id === prevProps.id, 'layer id changed');
-  assert(props.type === prevProps.type, 'layer type changed');
-  if (props.type === 'custom' || prevProps.type === 'custom') {
+  assert(props.id === prevProps.id, "layer id changed");
+  assert(props.type === prevProps.type, "layer type changed");
+  if (props.type === "custom" || prevProps.type === "custom") {
     return;
   }
   const {
@@ -53,7 +53,7 @@ function updateLayer(map, id, props, prevProps) {
   }
 }
 function createLayer(map, id, props) {
-  if (map.style && map.style._loaded && (!('source' in props) || map.getSource(props.source))) {
+  if (map.style && map.style._loaded && (!("source" in props) || map.getSource(props.source))) {
     const options = {
       ...props,
       id
@@ -63,7 +63,7 @@ function createLayer(map, id, props) {
   }
 }
 let layerCounter = 0;
-function Layer(props) {
+export function Layer(props) {
   const map = useContext(MapContext).map.getMap();
   const propsRef = useRef(props);
   const [, setStyleLoaded] = useState(0);
@@ -71,10 +71,10 @@ function Layer(props) {
   useEffect(() => {
     if (map) {
       const forceUpdate = () => setStyleLoaded(version => version + 1);
-      map.on('styledata', forceUpdate);
+      map.on("styledata", forceUpdate);
       forceUpdate();
       return () => {
-        map.off('styledata', forceUpdate);
+        map.off("styledata", forceUpdate);
         if (map.style && map.style._loaded && map.getLayer(id)) {
           map.removeLayer(id);
         }
@@ -95,5 +95,4 @@ function Layer(props) {
   propsRef.current = props;
   return null;
 }
-export default Layer;
 //# sourceMappingURL=layer.js.map

package/dist/components/layer.js.map

@@ -1 +1 @@
-{"version":3,"file":"layer.js","names":["useContext","useEffect","useMemo","useState","useRef","MapContext","assert","deepEqual","updateLayer","map","id","props","prevProps","type","layout","paint","filter","minzoom","maxzoom","beforeId","moveLayer","prevLayout","key","setLayoutProperty","hasOwnProperty","undefined","prevPaint","setPaintProperty","setFilter","setLayerZoomRange","createLayer","style","_loaded","getSource","source","options","addLayer","layerCounter","Layer","getMap","propsRef","setStyleLoaded","forceUpdate","version","on","off","getLayer","removeLayer","layer","current","error","console","warn"],"sources":["../../src/components/layer.ts"],"sourcesContent":["import {useContext, useEffect, useMemo, useState, useRef} from 'react';\nimport {MapContext} from './map';\nimport assert from '../utils/assert';\nimport {deepEqual} from '../utils/deep-equal';\n\nimport type {MapInstance, CustomLayerInterface, ILayer} from '../types';\n\n// Omiting property from a union type, see\n// https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230\ntype OptionalId<T> = T extends {id: string} ? Omit<T, 'id'> & {id?: string} : T;\ntype OptionalSource<T> = T extends {source: string} ? Omit<T, 'source'> & {source?: string} : T;\n\nexport type LayerProps<LayerT> = OptionalSource<OptionalId<LayerT>> & {\n  /** If set, the layer will be inserted before the specified layer */\n  beforeId?: string;\n};\n\n/* eslint-disable complexity, max-statements */\nfunction updateLayer<LayerT extends ILayer>(\n  map: MapInstance,\n  id: string,\n  props: LayerProps<LayerT>,\n  prevProps: LayerProps<LayerT>\n) {\n  assert(props.id === prevProps.id, 'layer id changed');\n  assert(props.type === prevProps.type, 'layer type changed');\n\n  if (props.type === 'custom' || prevProps.type === 'custom') {\n    return;\n  }\n\n  const {layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId} = props;\n\n  if (beforeId !== prevProps.beforeId) {\n    map.moveLayer(id, beforeId);\n  }\n  if (layout !== prevProps.layout) {\n    const prevLayout = prevProps.layout || {};\n    for (const key in layout) {\n      if (!deepEqual(layout[key], prevLayout[key])) {\n        map.setLayoutProperty(id, key, layout[key]);\n      }\n    }\n    for (const key in prevLayout) {\n      if (!layout.hasOwnProperty(key)) {\n        map.setLayoutProperty(id, key, undefined);\n      }\n    }\n  }\n  if (paint !== prevProps.paint) {\n    const prevPaint = prevProps.paint || {};\n    for (const key in paint) {\n      if (!deepEqual(paint[key], prevPaint[key])) {\n        map.setPaintProperty(id, key, paint[key]);\n      }\n    }\n    for (const key in prevPaint) {\n      if (!paint.hasOwnProperty(key)) {\n        map.setPaintProperty(id, key, undefined);\n      }\n    }\n  }\n\n  if (!deepEqual(filter, prevProps.filter)) {\n    map.setFilter(id, filter);\n  }\n  if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {\n    map.setLayerZoomRange(id, minzoom, maxzoom);\n  }\n}\n\nfunction createLayer<LayerT extends ILayer>(\n  map: MapInstance,\n  id: string,\n  props: LayerProps<LayerT>\n) {\n  // @ts-ignore\n  if (map.style && map.style._loaded && (!('source' in props) || map.getSource(props.source))) {\n    const options: LayerProps<LayerT> = {...props, id};\n    delete options.beforeId;\n\n    // @ts-ignore\n    map.addLayer(options, props.beforeId);\n  }\n}\n\n/* eslint-enable complexity, max-statements */\n\nlet layerCounter = 0;\n\nfunction Layer<LayerT extends ILayer>(props: LayerProps<LayerT | CustomLayerInterface>) {\n  const map = useContext(MapContext).map.getMap();\n  const propsRef = useRef(props);\n  const [, setStyleLoaded] = useState(0);\n\n  const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);\n\n  useEffect(() => {\n    if (map) {\n      const forceUpdate = () => setStyleLoaded(version => version + 1);\n      map.on('styledata', forceUpdate);\n      forceUpdate();\n\n      return () => {\n        map.off('styledata', forceUpdate);\n        // @ts-ignore\n        if (map.style && map.style._loaded && map.getLayer(id)) {\n          map.removeLayer(id);\n        }\n      };\n    }\n    return undefined;\n  }, [map]);\n\n  // @ts-ignore\n  const layer = map && map.style && map.getLayer(id);\n  if (layer) {\n    try {\n      updateLayer(map, id, props, propsRef.current);\n    } catch (error) {\n      console.warn(error); // eslint-disable-line\n    }\n  } else {\n    createLayer(map, id, props);\n  }\n\n  // Store last rendered props\n  propsRef.current = props;\n\n  return null;\n}\n\nexport default Layer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"layer.js","names":["useContext","useEffect","useMemo","useState","useRef","MapContext","assert","deepEqual","updateLayer","map","id","props","prevProps","type","layout","paint","filter","minzoom","maxzoom","beforeId","moveLayer","prevLayout","key","setLayoutProperty","hasOwnProperty","undefined","prevPaint","setPaintProperty","setFilter","setLayerZoomRange","createLayer","style","_loaded","getSource","source","options","addLayer","layerCounter","Layer","getMap","propsRef","setStyleLoaded","forceUpdate","version","on","off","getLayer","removeLayer","layer","current","error","console","warn"],"sources":["../../src/components/layer.ts"],"sourcesContent":["import { useContext, useEffect, useMemo, useState, useRef } from \"react\";\nimport { MapContext } from \"./map\";\nimport assert from \"../utils/assert\";\nimport { deepEqual } from \"../utils/deep-equal\";\n\nimport type { Map as MapInstance, CustomLayerInterface } from \"../types/lib\";\nimport type { LayerSpecification } from \"../types/style-spec\";\n\n// Omiting property from a union type, see\n// https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230\ntype OptionalId<T> = T extends { id: string }\n  ? Omit<T, \"id\"> & { id?: string }\n  : T;\ntype OptionalSource<T> = T extends { source: string }\n  ? Omit<T, \"source\"> & { source?: string }\n  : T;\n\nexport type LayerProps = (\n  | OptionalSource<OptionalId<LayerSpecification>>\n  | CustomLayerInterface\n) & {\n  /** If set, the layer will be inserted before the specified layer */\n  beforeId?: string;\n};\n\n/* eslint-disable complexity, max-statements */\nfunction updateLayer(\n  map: MapInstance,\n  id: string,\n  props: LayerProps,\n  prevProps: LayerProps,\n) {\n  assert(props.id === prevProps.id, \"layer id changed\");\n  assert(props.type === prevProps.type, \"layer type changed\");\n\n  if (props.type === \"custom\" || prevProps.type === \"custom\") {\n    return;\n  }\n\n  // @ts-ignore filter does not exist in some Layer types\n  const { layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId } = props;\n\n  if (beforeId !== prevProps.beforeId) {\n    map.moveLayer(id, beforeId);\n  }\n  if (layout !== prevProps.layout) {\n    const prevLayout = prevProps.layout || {};\n    for (const key in layout) {\n      if (!deepEqual(layout[key], prevLayout[key])) {\n        map.setLayoutProperty(id, key, layout[key]);\n      }\n    }\n    for (const key in prevLayout) {\n      if (!layout.hasOwnProperty(key)) {\n        map.setLayoutProperty(id, key, undefined);\n      }\n    }\n  }\n  if (paint !== prevProps.paint) {\n    const prevPaint = prevProps.paint || {};\n    for (const key in paint) {\n      if (!deepEqual(paint[key], prevPaint[key])) {\n        map.setPaintProperty(id, key, paint[key]);\n      }\n    }\n    for (const key in prevPaint) {\n      if (!paint.hasOwnProperty(key)) {\n        map.setPaintProperty(id, key, undefined);\n      }\n    }\n  }\n\n  // @ts-ignore filter does not exist in some Layer types\n  if (!deepEqual(filter, prevProps.filter)) {\n    map.setFilter(id, filter);\n  }\n  if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {\n    map.setLayerZoomRange(id, minzoom, maxzoom);\n  }\n}\n\nfunction createLayer(map: MapInstance, id: string, props: LayerProps) {\n  // @ts-ignore\n  if (\n    map.style &&\n    map.style._loaded &&\n    (!(\"source\" in props) || map.getSource(props.source))\n  ) {\n    const options: LayerProps = { ...props, id };\n    delete options.beforeId;\n\n    // @ts-ignore\n    map.addLayer(options, props.beforeId);\n  }\n}\n\n/* eslint-enable complexity, max-statements */\n\nlet layerCounter = 0;\n\nexport function Layer(props: LayerProps) {\n  const map = useContext(MapContext).map.getMap();\n  const propsRef = useRef(props);\n  const [, setStyleLoaded] = useState(0);\n\n  const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);\n\n  useEffect(() => {\n    if (map) {\n      const forceUpdate = () => setStyleLoaded((version) => version + 1);\n      map.on(\"styledata\", forceUpdate);\n      forceUpdate();\n\n      return () => {\n        map.off(\"styledata\", forceUpdate);\n        // @ts-ignore\n        if (map.style && map.style._loaded && map.getLayer(id)) {\n          map.removeLayer(id);\n        }\n      };\n    }\n    return undefined;\n  }, [map]);\n\n  // @ts-ignore\n  const layer = map && map.style && map.getLayer(id);\n  if (layer) {\n    try {\n      updateLayer(map, id, props, propsRef.current);\n    } catch (error) {\n      console.warn(error); // eslint-disable-line\n    }\n  } else {\n    createLayer(map, id, props);\n  }\n\n  // Store last rendered props\n  propsRef.current = props;\n\n  return null;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/logo-control.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type { ControlPosition, LogoControlOptions } from "../types/lib";
+export type LogoControlProps = LogoControlOptions & {
+    /** Placement of the control relative to the map. */
+    position?: ControlPosition;
+    /** CSS style override, applied to the control's container */
+    style?: React.CSSProperties;
+};
+export declare const LogoControl: React.FC<LogoControlProps>;