@mapcomponents/react-maplibre 0.1.49 → 0.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.49",
+  "version": "0.1.53",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",

package/scripts/create-map-component.sh

@@ -18,14 +18,14 @@ if [ ! -d "$target_path$component_name" ]; then
 
   mv $target_path$component_name/$template_name.doc.de.md $target_path$component_name/$component_name.doc.de.md
 
-  mv $target_path$component_name/$template_name.js $target_path$component_name/$component_name.js
+  mv $target_path$component_name/$template_name.tsx $target_path$component_name/$component_name.tsx
 
   mv $target_path$component_name/$template_name.meta_.json $target_path$component_name/$component_name.meta_.json
 
   mv $target_path$component_name/$template_name.stories.js $target_path$component_name/$component_name.stories.js
 
   sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.doc.de.md
-  sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.js
+  sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.tsx
   sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.meta_.json
   sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.stories.js
 

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.ts

@@ -1,4 +1,5 @@
-import { Map, IControl, MapOptions as MapOptionsType } from "!maplibre-gl";
+import { Map, IControl, MapOptions as MapOptionsType,  } from "!maplibre-gl";
+import { Map as MapType  } from "maplibre-gl";
 
 type EventArgArray = [string, string | Function, Function?];
 type LayerState = {
@@ -53,7 +54,7 @@ class MapLibreGlWrapper {
   };
   initRegisteredElements: Function;
   addNativeMaplibreFunctionsAndProps: Function;
-  map: Map;
+  map: MapType;
   style: object;
 
   styleJson: object;
@@ -603,7 +604,7 @@ class MapLibreGlWrapper {
           });
       }
 
-      self.map = new Map(props.mapOptions);
+      self.map = new Map(props.mapOptions) as MapType;
       //@ts-ignore
       window._map = self.map;
 

package/src/components/MlCenterPosition/MlCenterPosition.doc.de.md

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

package/src/components/MlCenterPosition/MlCenterPosition.meta_.json

@@ -0,0 +1,15 @@
+{
+  "name": "MlCenterPosition",
+  "title": "",
+  "description": "",
+  "i18n": {
+    "de": {
+      "title": "",
+      "description": ""
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component",
+  "price": 0
+}

package/src/components/MlCenterPosition/MlCenterPosition.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import MlCenterPosition from "./MlCenterPosition";
+
+import mapContextDecorator from "../../decorators/MapContextDecorator";
+
+const storyoptions = {
+  title: "MapComponents/MlCenterPosition",
+  component: MlCenterPosition,
+  argTypes: {
+  },
+  decorators: mapContextDecorator,
+  parameters: { docs: { source: { type: 'code' } } }
+};
+export default storyoptions;
+
+const Template = (args) => <MlCenterPosition />;
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};

package/src/components/MlCenterPosition/MlCenterPosition.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useCallback } from "react";
+import useMap from "../../hooks/useMap";
+import { Button } from "@mui/material";
+import  GpsFixedIcon  from "@mui/icons-material/GpsFixed";
+
+interface MlCenterPositionProps {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId?: string;
+  /**
+   * Id of an existing layer in the mapLibre instance to help specify the layer order
+   * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+   */
+  insertBeforeLayer?: string;
+  /**
+   * Active button font color
+   */
+  onColor?: string;
+  /**
+   * Inactive button font color
+   */
+  offColor?: string;
+  /**
+   * CSS style object that is applied to the button component
+   */
+  style?: any;
+}
+
+/**
+ * Component template
+ *
+ */
+const MlCenterPosition = (props: MlCenterPositionProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
+  const [locationAccessDenied, setLocationAccessDenied] = useState(false);
+
+  const centerCurrentLocation = () => {
+    navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);
+  };
+
+  const getLocationSuccess = useCallback((location) => {
+    mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);
+  }, [mapHook.map]);
+
+  const getLocationError = () => {
+    console.log("Access of user location denied");
+    setLocationAccessDenied(true);
+  };
+  return <>
+      <Button 
+        sx={{
+          zIndex: 1002,
+          color: !locationAccessDenied ? props.onColor : props.offColor,
+          ...props.style,
+        }}
+       onClick={centerCurrentLocation} disabled={locationAccessDenied}>
+        <GpsFixedIcon sx={{ ...(props.style?.fontSize?{fontSize: props.style?.fontSize}:{}) }} />{" "}
+      </Button>
+  </>;
+
+};
+
+MlCenterPosition.defaultProps = {
+  mapId: undefined,
+  style: {
+    minWidth: "30px",
+    minHeight: "30px",
+    width: "30px",
+    height: "30px",
+    backgroundColor: "#414141",
+    borderRadius: "23%",
+    margin: 0.15,
+    fontSize: "1.3em",
+    ":hover": {
+      backgroundColor: "#515151",
+      color: "#ececec",
+    },
+  },
+  onColor: "#ececec",
+  offColor: "#666",
+};
+export default MlCenterPosition;

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx

@@ -8,6 +8,9 @@ import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
 import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
 import { Feature, FeatureCollection } from "@turf/turf";
 
+
+import { LineLayerSpecification, CircleLayerSpecification, FillLayerSpecification,MapLayerMouseEvent, LayerSpecification } from "maplibre-gl";
+
 type MlGeoJsonLayerProps = {
   /**
    * Id of the target MapLibre instance in mapContext
@@ -16,6 +19,8 @@ type MlGeoJsonLayerProps = {
   /**
    * Id of an existing layer in the mapLibre instance to help specify the layer order
    * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+   * This layer will not be added to the maplibre-gl instance until a layer with an 
+   * id that matches the value of insertBeforeLayer is created.
    */
   insertBeforeLayer?: string;
   /**
@@ -30,7 +35,7 @@ type MlGeoJsonLayerProps = {
    * Type of the layer that will be added to the MapLibre instance.
    * Possible values: "line", "circle", "fill"
    */
-  type?: string;
+  type?: "fill" | "line" | "circle";
   /**
    * Paint property object, that is passed to the addLayer call.
    * Possible props depend on the layer type.
@@ -38,7 +43,7 @@ type MlGeoJsonLayerProps = {
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  paint?: any;
+  paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
   /**
    * Layout property object, that is passed to the addLayer call.
    * Possible props depend on the layer type.
@@ -46,28 +51,28 @@ type MlGeoJsonLayerProps = {
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  layout?: any;
+  layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
   /**
    * Javascript object that is spread into the addLayer commands first parameter.
    */
-  options?: any;
+  options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
   /**
    * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
    */
-  defaultPaintOverrides?: any;
+  defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
   /**
    * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
    */
-  onHover?: Function;
+  onHover?: MapLayerMouseEvent;
   /**
    * Click event handler that is executed whenever a geometry rendered by this component is clicked.
    */
-  onClick?: Function;
+  onClick?: MapLayerMouseEvent;
   /**
    * Leave event handler that is executed whenever a geometry rendered by this component is
    * left/unhovered.
    */
-  onLeave?: Function;
+  onLeave?: MapLayerMouseEvent;
 }
 
 /**
@@ -91,7 +96,7 @@ const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
         ),
       layout: props.layout || {},
       ...props.options,
-      type: layerType,
+      type: layerType as LayerSpecification['type'],
     },
     insertBeforeLayer: props.insertBeforeLayer,
     onHover: props.onHover,

package/src/components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry.ts

@@ -1,4 +1,5 @@
 import { Feature, FeatureCollection } from "@turf/turf";
+import { LayerSpecification } from "maplibre-gl";
 
 const mapGeometryTypesToLayerTypes = {
   Position: "circle",
@@ -13,7 +14,7 @@ const mapGeometryTypesToLayerTypes = {
 
 const getDefaulLayerTypeByGeometry: Function = (
   geojson: Feature | FeatureCollection
-): string => {
+): LayerSpecification['type'] => {
   if (geojson?.type === "Feature") {
     return mapGeometryTypesToLayerTypes?.[geojson?.geometry?.type]
       ? mapGeometryTypesToLayerTypes[geojson.geometry.type]

package/src/components/MlNavigationTools/MlNavigationTools.stories.js

@@ -2,7 +2,9 @@ import React from "react";
 
 import MlNavigationTools from "./MlNavigationTools";
 
-import mapContextDecorator from "../../decorators/MapContextDecorator";
+import noNavToolsDecorator from "../../decorators/NoNavToolsDecorator";
+import BuildIcon from "@mui/icons-material/Build";
+import Button from "@mui/material/Button";
 
 const storyoptions = {
   title: "MapComponents/MlNavigationTools",
@@ -11,12 +13,47 @@ const storyoptions = {
     url: {},
     layer: {},
   },
-  decorators: mapContextDecorator,
+  decorators: noNavToolsDecorator,
 };
 export default storyoptions;
 
-const Template = (args) => <MlNavigationTools />;
+const Template = (args) => <MlNavigationTools {...args} />;
 
-export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
-ExampleConfig.args = {};
+export const DefaultConfig = Template.bind({});
+DefaultConfig.parameters = {};
+DefaultConfig.args = {};
+
+export const No3DButton = Template.bind({});
+No3DButton.parameters = {};
+No3DButton.args = {
+  show3DButton: false,
+};
+
+export const ShowCenterLocationButton = Template.bind({});
+ShowCenterLocationButton.parameters = {};
+ShowCenterLocationButton.args = {
+  showFollowGpsButton: false,
+  showCenterLocationButton: true,
+};
+
+export const NoZoomButtons = Template.bind({});
+NoZoomButtons.parameters = {};
+NoZoomButtons.args = {
+  showZoomButtons: false,
+};
+
+export const NoFollowGpsButton = Template.bind({});
+NoFollowGpsButton.parameters = {};
+NoFollowGpsButton.args = {
+  showFollowGpsButton: false,
+};
+
+export const CustomButton = Template.bind({});
+CustomButton.parameters = {};
+CustomButton.args = {
+  children: (
+    <Button onClick={() => {}}>
+      <BuildIcon sx={{ fontSize: "1em" }} />
+    </Button>
+  ),
+};

package/src/components/MlNavigationTools/MlNavigationTools.tsx

@@ -8,13 +8,41 @@ import MlNavigationCompass from "../MlNavigationCompass/MlNavigationCompass";
 import MlFollowGps from "../MlFollowGps/MlFollowGps";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useMap from "../../hooks/useMap";
+import MlCenterPosition from "../MlCenterPosition/MlCenterPosition";
 
 interface MlNavigationToolsProps {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
   mapId?: string;
+  /**
+   * The layerId of an existing layer this layer should be rendered visually beneath
+   * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
+   */
   insertBeforeLayer?: string;
+  /**
+   * Show 3D button
+   */
+  show3DButton?: boolean;
+  /**
+   * Show zoom button
+   */
+  showZoomButtons?: boolean;
+  /**
+   * Show follow GPS button
+   */
+  showFollowGpsButton?: boolean;
+  /**
+   * Show center on current position button
+   */
+  showCenterLocationButton?: boolean;
+  /**
+   * Additional JSX Elements to be rendered below MlNavigationTools buttons
+   */
+  children?: JSX.Element;
 }
 
- /**
+/**
  * @component
  */
 const MlNavigationTools = (props: MlNavigationToolsProps) => {
@@ -35,31 +63,35 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
     //border: "1px solid #bbb",
     //boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
     margin: 0.15,
-    fontSize: mediaIsMobile ? "1.5em" : "1.2em",
+    fontSize: mediaIsMobile ? "1.4em" : "1.2em",
     ":hover": {
       backgroundColor: "#515151",
     },
     color: "#ececec",
   };
+  const iconStyle = {
+    fontSize: buttonStyle.fontSize,
+  }
 
   useEffect(() => {
     if (!mapHook.map) return;
 
-    mapHook.map.on("pitchend", () => {
-      if (!mapHook.map) return;
+    mapHook.map.on(
+      "pitchend",
+      () => {
+        if (!mapHook.map) return;
 
-      setPitch(mapHook.map.map.getPitch());
-    },mapHook.componentId);
+        setPitch(mapHook.map.map.getPitch());
+      },
+      mapHook.componentId
+    );
     setPitch(mapHook.map.map.getPitch());
   }, [mapHook.map, props.mapId]);
 
   const zoomIn = () => {
     if (!mapHook.map) return;
 
-    if (
-      mapHook.map.map.transform._zoom + 0.5 <=
-      mapHook.map.map.transform._maxZoom
-    ) {
+    if (mapHook.map.map.transform._zoom + 0.5 <= mapHook.map.map.transform._maxZoom) {
       mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom + 0.5 });
     }
   };
@@ -67,10 +99,7 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
   const zoomOut = () => {
     if (!mapHook.map) return;
 
-    if (
-      mapHook.map.map.transform._zoom - 0.5 >=
-      mapHook.map.map.transform._minZoom
-    ) {
+    if (mapHook.map.map.transform._zoom - 0.5 >= mapHook.map.map.transform._minZoom) {
       mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom - 0.5 });
     }
   };
@@ -108,10 +137,20 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
           boxShadow: "0px 0px 18px rgba(0,0,0,.5)",
         }}
       />
-      <Button sx={{ ...buttonStyle, fontSize:mediaIsMobile?'1.4em':'1em', fontWeight: 600 }} onClick={adjustPitch}>
-        {pitch ? "2D" : "3D"}
-      </Button>
-      <MlFollowGps style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
+      {props.show3DButton && (
+        <Button
+          sx={{ ...buttonStyle, fontSize: mediaIsMobile ? "1.4em" : "1em", fontWeight: 600 }}
+          onClick={adjustPitch}
+        >
+          {pitch ? "2D" : "3D"}
+        </Button>
+      )}
+      {props.showFollowGpsButton && (
+        <MlFollowGps style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
+      )}
+      {props.showCenterLocationButton && (
+        <MlCenterPosition style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
+      )}
       <ButtonGroup
         orientation="vertical"
         sx={{
@@ -121,19 +160,31 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
           "Button:hover": { border: "none" },
         }}
       >
-        <Button sx={{ ...buttonStyle, color: "#ececec" }} onClick={zoomIn}>
-          <ControlPointIcon
-            sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }}
-          />
-        </Button>
-        <Button sx={{ ...buttonStyle, color: "#ececec" }} onClick={zoomOut}>
-          <RemoveCircleOutlineIcon
-            sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }}
-          />
-        </Button>
+        {props.showZoomButtons && (
+          <>
+            <Button sx={{ ...buttonStyle }} onClick={zoomIn}>
+              <ControlPointIcon sx={{...iconStyle}} />
+            </Button>
+            <Button sx={{ ...buttonStyle }} onClick={zoomOut}>
+              <RemoveCircleOutlineIcon  sx={{...iconStyle}} />
+            </Button>
+          </>
+        )}
       </ButtonGroup>
+      {props.children &&
+        React.cloneElement(props.children, {
+          sx: { ...buttonStyle },
+        })}
     </div>
   );
 };
 
+MlNavigationTools.defaultProps = {
+  mapId: undefined,
+  show3DButton: true,
+  showFollowGpsButton: true,
+  showCenterLocationButton: false,
+  showZoomButtons: true,
+};
+
 export default MlNavigationTools;

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.tsx

@@ -7,6 +7,7 @@ import useMap from "../../hooks/useMap";
 import { _transitionToGeojson } from "./util/transitionFunctions";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 import { Feature, FeatureCollection } from "@turf/turf";
+import { CircleLayerSpecification, FillLayerSpecification, LineLayerSpecification, MapLayerMouseEvent } from "maplibre-gl";
 
 const msPerStep = 50;
 
@@ -15,57 +16,57 @@ interface MlTransitionGeoJsonLayerProps {
    * Id of the target MapLibre instance in mapContext
    */
   mapId: string;
+  /**
+   * GeoJSON data that is supposed to be rendered by this component.
+   */
+  geojson: Feature | FeatureCollection | undefined;
   /**
    * Type of the layer that will be added to the MapLibre instance.
    * Possible values: "line", "circle", "fill"
    */
-  type: string;
+  type?: "fill" | "line" | "circle";
   /**
-   * Layout property object, that is passed to the addLayer call.
+   * Paint property object, that is passed to the addLayer call.
    * Possible props depend on the layer type.
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  layout: any;
+  paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
   /**
-   * Paint property object, that is passed to the addLayer call.
+   * Layout property object, that is passed to the addLayer call.
    * Possible props depend on the layer type.
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  paint: any;
-  /**
-   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
-   */
-  defaultPaintOverrides: any;
+  layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
   /**
    * Javascript object that is spread into the addLayer commands first parameter.
    */
-  options: any;
+  options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
   /**
-   * GeoJSON data that is supposed to be rendered by this component.
+   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
    */
-  geojson: Feature | FeatureCollection;
+  defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
   /**
    * Id of an existing layer in the mapLibre instance to help specify the layer order
    * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
    */
   insertBeforeLayer: string;
   /**
-   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
+   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
    */
-  onClick: Function;
+  onHover?: MapLayerMouseEvent;
   /**
-   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
+   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
    */
-  onHover: Function;
+  onClick?: MapLayerMouseEvent;
   /**
    * Leave event handler that is executed whenever a geometry rendered by this component is
    * left/unhovered.
    */
-  onLeave: Function;
+  onLeave?: MapLayerMouseEvent;
   /**
    * Creates transition animation whenever the geojson prop changes.
    * Only works with layer type "line" and LineString GeoJSON data.

package/src/decorators/NoNavToolsDecorator.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+import { MapComponentsProvider } from "../index";
+import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
+import "./style.css";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
+
+const theme = createTheme({});
+
+const decorators = [
+  (Story) => (
+    <div className="fullscreen_map">
+      <ThemeProvider theme={theme}>
+        <MapComponentsProvider>
+          <Story />
+          <MapLibreMap
+            options={{
+              zoom: 14.5,
+              style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+              center: [7.0851268, 50.73884],
+            }}
+            mapId="map_1"
+          />
+        </MapComponentsProvider>
+      </ThemeProvider>
+    </div>
+  ),
+];
+
+export default decorators;

package/src/hooks/useLayer.ts

@@ -6,6 +6,9 @@ import { LayerSpecification } from "maplibre-gl";
 
 import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
 
+import { MapLayerMouseEvent } from "maplibre-gl";
+import { GeoJSONObject } from "@turf/turf";
+
 type useLayerType = {
   map: MapLibreGlWrapper | undefined;
   layer: LayerSpecification;
@@ -20,11 +23,11 @@ interface useLayerProps {
   idPrefix?: string;
   insertBeforeLayer?: string;
   insertBeforeFirstSymbolLayer?: boolean;
-  geojson?: object;
-  options: LayerSpecification;
-  onHover?: Function;
-  onClick?: Function;
-  onLeave?: Function;
+  geojson?: GeoJSONObject;
+  options: Partial<LayerSpecification>;
+  onHover?: MapLayerMouseEvent;
+  onClick?: MapLayerMouseEvent;
+  onLeave?: MapLayerMouseEvent;
 }
 
 const legalLayerTypes = [
@@ -116,7 +119,7 @@ function useLayer(props: useLayerProps): useLayerType {
 
     layerPaintConfRef.current = JSON.stringify(props.options?.paint);
     layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
-    layerTypeRef.current = props.options.type;
+    layerTypeRef.current = props.options.type as LayerSpecification['type'];
   }, [props, mapHook.map]);
 
   useEffect(() => {
@@ -124,8 +127,8 @@ function useLayer(props: useLayerProps): useLayerType {
 
     if (
       initializedRef.current &&
-      (legalLayerTypes.indexOf(props.options.type) === -1 ||
-        (legalLayerTypes.indexOf(props.options.type) !== -1 &&
+      (legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) === -1 ||
+        (legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) !== -1 &&
           props.options.type === layerTypeRef.current))
     ) {
       return;