@mapcomponents/react-maplibre 0.1.49 → 0.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.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/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['layout'];
   /**
    * 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/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['layout'];
   /**
-   * 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/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;