@mapcomponents/react-maplibre 0.1.33 → 0.1.36

package/src/components/MapLibreMap/{MapLibreMap.js → MapLibreMap.tsx}

@@ -1,10 +1,37 @@
-import React, { useRef, useEffect, useContext } from "react";
-import PropTypes from "prop-types";
+import React, { useRef, useEffect, useContext, FC } from "react";
+
+// @ts-ignore
 import { MapContext } from "@mapcomponents/react-core";
+// @ts-ignore
 import MapLibreGlWrapper from "./lib/MapLibreGlWrapper";
 
 import "maplibre-gl/dist/maplibre-gl.css";
 
+type MapLibreMapProps = {
+  /**
+   * Id of the MapLibreGl(Wrapper) instance in mapContext
+   */
+  mapId?: string;
+  /**
+   * Config object that is passed to the MapLibreGl constructor as first parameter.
+   * See https://maplibre.org/maplibre-gl-js-docs/api/map/ for a formal documentation of al
+   * available properties.
+   */
+  options?: object;
+  /**
+   * css style definition passed to the map container DOM element
+   */
+  style?: object;
+};
+
+const defaultProps: MapLibreMapProps = {
+  mapId: undefined,
+  options: {
+    center: { lng: 8.607, lat: 53.1409349 },
+    zoom: 11,
+  },
+};
+
 /**
  * Creates a MapLibreGlWrapper instance and registers it in MapContext
  * after the MapLibre-gl load event has fired.
@@ -13,24 +40,22 @@ import "maplibre-gl/dist/maplibre-gl.css";
  * This Component must be kept unaware of any related components that interact with the MapLibre-gl
  * instance.
  *
- * @component
+ * @category Map components
  */
-const MapLibreMap = (props) => {
-  const map = useRef(null);
+const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
+  const map: any = useRef(null);
   const mapContainer = useRef(null);
 
-  const mapContext = useContext(MapContext);
-  const mapContextRef = useRef(mapContext);
+  const mapContext: any = useContext(MapContext);
 
   const mapIdRef = useRef(props.mapId);
   const mapOptions = props.options;
 
   useEffect(() => {
     let mapId = mapIdRef.current;
-    let _mapContext = mapContextRef.current;
 
     return () => {
-      _mapContext.removeMap(mapId);
+      mapContext.removeMap(mapId);
       map.current?.remove?.();
       map.current = null;
     };
@@ -39,11 +64,12 @@ const MapLibreMap = (props) => {
   useEffect(() => {
     if (mapContainer.current) {
       map.current = new MapLibreGlWrapper({
+        // @ts-ignore
         mapOptions: {
           container: mapContainer.current,
           ...mapOptions,
         },
-        onReady: (map, wrapper) => {
+        onReady: (map: any, wrapper: any) => {
           map.once("load", () => {
             if (props.mapId) {
               mapContext.registerMap(props.mapId, wrapper);
@@ -51,40 +77,17 @@ const MapLibreMap = (props) => {
               mapContext.setMap(wrapper);
             }
           });
-
-          // TODO: remove this line
-          window.map = wrapper;
         },
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mapContainer]);
 
-  return <div ref={mapContainer} className="mapContainer" />;
-};
-
-MapLibreMap.defaultProps = {
-  mapId: undefined,
-  options: {
-    lng: 8.607,
-    lat: 53.1409349,
-    zoom: 10,
-    accessToken:
-      "pk.eyJ1IjoibWF4dG9iaSIsImEiOiJjaW1rcWQ5bWMwMDJvd2hrbWZ2ZTBhcnM5In0.NcGt5NmLP5Q1WC7P5u6qUA",
-  },
+  return (
+    <div ref={mapContainer} className="mapContainer" style={props.style} />
+  );
 };
 
-MapLibreMap.propTypes = {
-  /**
-   * Id of the MapLibreGl(Wrapper) instance in mapContext
-   */
-  mapId: PropTypes.string,
-  /**
-   * Config object that is passed to the MapLibreGl constructor as first parameter.
-   * See https://maplibre.org/maplibre-gl-js-docs/api/map/ for a formal documentation of al
-   * available properties.
-   */
-  options: PropTypes.object,
-};
+MapLibreMap.defaultProps = defaultProps;
 
 export default MapLibreMap;

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.test.js

@@ -26,8 +26,8 @@ var mockMapLibreMethods = {
 mockMapLibreMethods.style = {
   ...mockMapLibreMethods,
 };
-jest.mock("maplibre-gl/dist/maplibre-gl", () => {
-  const originalModule = jest.requireActual("maplibre-gl/dist/maplibre-gl");
+jest.mock("maplibre-gl", () => {
+  const originalModule = jest.requireActual("maplibre-gl");
 
   return {
     ...originalModule,
@@ -159,7 +159,7 @@ const SourceTestComponent = (props) => {
       {...props}
       afterInit={(map, componentId) => {
         for (let i = 0; i < props.cnt; i++) {
-          map.addSource(uuidv4(), {}, undefined, componentId);
+          map.addSource(uuidv4(), {}, componentId);
         }
       }}
     />