@mapcomponents/react-maplibre 0.1.37 → 0.1.40

package/src/contexts/MapComponentsProvider.test.js

@@ -0,0 +1,260 @@
+import React, { useContext } from "react";
+import MapContext from "./MapContext";
+import { MapComponentsProvider } from "./MapContext";
+import { mount } from "enzyme";
+
+const MapObjectTestBlock = ({ mapId }) => {
+  const mapContext = useContext(MapContext);
+
+  return (
+    <>
+      <button
+        className={"register_" + mapId}
+        onClick={() => {
+          mapContext.registerMap(mapId, { id: mapId });
+        }}
+      >
+        set {mapId}
+      </button>
+      <button
+        className={"remove_" + mapId}
+        onClick={() => {
+          mapContext.removeMap(mapId);
+        }}
+      >
+        set {mapId}
+      </button>
+      <div className={mapId + "_found"}>{mapContext.mapExists(mapId) ? "true" : "false"}</div>
+      <div className={mapId + "_id"}>
+        {mapContext.mapExists(mapId) ? mapContext.getMap(mapId).id : ""}
+      </div>
+      <div className={mapId + "_id_position_in_map_ids"}>{mapContext.mapIds.indexOf(mapId)}</div>
+    </>
+  );
+};
+
+const MapContextTestComponent = () => {
+  const mapContext = useContext(MapContext);
+
+  return (
+    <>
+      <div className="map_count">{mapContext.mapIds.length}</div>
+      <div className="typeof_map">{typeof mapContext.map}</div>
+      <button
+        className="set_anonymous_map"
+        onClick={() => {
+          mapContext.setMap({});
+        }}
+      >
+        set anonymous map
+      </button>
+      <button
+        className="remove_anonymous_map"
+        onClick={() => {
+          mapContext.removeMap();
+        }}
+      >
+        set anonymous map
+      </button>
+      <div className="anonymous_map_found">{mapContext.mapExists() ? "true" : "false"}</div>
+      <div className="get_anonymous_map">{mapContext.getMap() ? "true" : "false"}</div>
+
+      {["map_1", "map_2"].map((mapId) => (
+        <MapObjectTestBlock mapId={mapId} key={mapId} />
+      ))}
+    </>
+  );
+};
+
+describe("MapComponentsProvider.setMap", () => {
+  it("should add an anonymous map object to mapContext", () => {
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <MapContextTestComponent />
+      </MapComponentsProvider>
+    );
+
+    expect(wrapper.find(".typeof_map").text()).toEqual("undefined");
+    expect(wrapper.find(".map_count").text()).toEqual("0");
+
+    wrapper.find(".set_anonymous_map").simulate("click");
+
+    expect(wrapper.find(".typeof_map").text()).toEqual("object");
+    expect(wrapper.find(".map_count").text()).toEqual("1");
+  });
+});
+
+describe("MapComponentsProvider.getMap", () => {
+  it("should return the map object referenced by mapContext.map if no parameters are passed", () => {
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <MapContextTestComponent />
+      </MapComponentsProvider>
+    );
+
+    expect(wrapper.find(".get_anonymous_map").text()).toEqual("false");
+
+    wrapper.find(".set_anonymous_map").simulate("click");
+
+    expect(wrapper.find(".get_anonymous_map").text()).toEqual("true");
+  });
+});
+
+describe("MapComponentsProvider.mapExists", () => {
+  it("should return true if an anonymous map object has been set using setMap", () => {
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <MapContextTestComponent />
+      </MapComponentsProvider>
+    );
+
+    expect(wrapper.find(".typeof_map").text()).toEqual("undefined");
+    expect(wrapper.find(".map_count").text()).toEqual("0");
+    expect(wrapper.find(".anonymous_map_found").text()).toEqual("false");
+
+    wrapper.find(".set_anonymous_map").simulate("click");
+
+    expect(wrapper.find(".typeof_map").text()).toEqual("object");
+    expect(wrapper.find(".map_count").text()).toEqual("1");
+    expect(wrapper.find(".anonymous_map_found").text()).toEqual("true");
+  });
+
+  it("should return true if a map object has been registered using registerMap", () => {
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <MapContextTestComponent />
+      </MapComponentsProvider>
+    );
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("false");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
+    expect(wrapper.find(".anonymous_map_found").text()).toEqual("false");
+
+    wrapper.find(".register_map_1").simulate("click");
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("true");
+    expect(wrapper.find(".map_1_id").text()).toEqual("map_1");
+    expect(wrapper.find(".anonymous_map_found").text()).toEqual("true");
+  });
+});
+
+describe("MapComponentsProvider.registerMap", () => {
+  it("should register a map object with the id map_1 to mapContext", () => {
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <MapContextTestComponent />
+      </MapComponentsProvider>
+    );
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("false");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
+
+    wrapper.find(".register_map_1").simulate("click");
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("true");
+    expect(wrapper.find(".map_1_id").text()).toEqual("map_1");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).not.toEqual("-1");
+  });
+
+  it("should register a map object with the id map_1 and another on with the id map_2 to mapContext", () => {
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <MapContextTestComponent />
+      </MapComponentsProvider>
+    );
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("false");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
+    expect(wrapper.find(".map_2_found").text()).toEqual("false");
+    expect(wrapper.find(".map_2_id_position_in_map_ids").text()).toEqual("-1");
+
+    wrapper.find(".register_map_1").simulate("click");
+    wrapper.find(".register_map_2").simulate("click");
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("true");
+    expect(wrapper.find(".map_1_id").text()).toEqual("map_1");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).not.toEqual("-1");
+    expect(wrapper.find(".map_2_found").text()).toEqual("true");
+    expect(wrapper.find(".map_2_id").text()).toEqual("map_2");
+    expect(wrapper.find(".map_2_id_position_in_map_ids").text()).not.toEqual("-1");
+  });
+});
+
+describe("MapComponentsProvider.removeMap", () => {
+  it("should remove an anonymous map object from mapContext", () => {
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <MapContextTestComponent />
+      </MapComponentsProvider>
+    );
+
+    expect(wrapper.find(".typeof_map").text()).toEqual("undefined");
+    expect(wrapper.find(".map_count").text()).toEqual("0");
+
+    wrapper.find(".set_anonymous_map").simulate("click");
+
+    expect(wrapper.find(".typeof_map").text()).toEqual("object");
+    expect(wrapper.find(".map_count").text()).toEqual("1");
+
+    wrapper.find(".remove_anonymous_map").simulate("click");
+
+    expect(wrapper.find(".typeof_map").text()).toEqual("undefined");
+    expect(wrapper.find(".map_count").text()).toEqual("0");
+  });
+
+  it("should remove a map object with the id map_1 from mapContext", () => {
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <MapContextTestComponent />
+      </MapComponentsProvider>
+    );
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("false");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
+
+    wrapper.find(".register_map_1").simulate("click");
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("true");
+    expect(wrapper.find(".map_1_id").text()).toEqual("map_1");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).not.toEqual("-1");
+
+    wrapper.find(".remove_map_1").simulate("click");
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("false");
+    expect(wrapper.find(".map_1_id").text()).toEqual("");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
+  });
+
+  it("should remove a map object with the id map_1 and another on with the id map_2 from mapContext", () => {
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <MapContextTestComponent />
+      </MapComponentsProvider>
+    );
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("false");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
+    expect(wrapper.find(".map_2_found").text()).toEqual("false");
+    expect(wrapper.find(".map_2_id_position_in_map_ids").text()).toEqual("-1");
+
+    wrapper.find(".register_map_1").simulate("click");
+    wrapper.find(".register_map_2").simulate("click");
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("true");
+    expect(wrapper.find(".map_1_id").text()).toEqual("map_1");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).not.toEqual("-1");
+    expect(wrapper.find(".map_2_found").text()).toEqual("true");
+    expect(wrapper.find(".map_2_id").text()).toEqual("map_2");
+    expect(wrapper.find(".map_2_id_position_in_map_ids").text()).not.toEqual("-1");
+
+    wrapper.find(".remove_map_1").simulate("click");
+    wrapper.find(".remove_map_2").simulate("click");
+
+    expect(wrapper.find(".map_1_found").text()).toEqual("false");
+    expect(wrapper.find(".map_1_id").text()).toEqual("");
+    expect(wrapper.find(".map_1_id_position_in_map_ids").text()).toEqual("-1");
+    expect(wrapper.find(".map_2_found").text()).toEqual("false");
+    expect(wrapper.find(".map_2_id").text()).toEqual("");
+    expect(wrapper.find(".map_2_id_position_in_map_ids").text()).toEqual("-1");
+  });
+});

package/src/contexts/MapContext.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useRef } from "react";
+import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
+
+const MapContext = React.createContext({} as MapContextType);
+
+
+/**
+ * MapComponentsProvider must be imported and wrapped around component where at least one of its child nodes requires access to a MapLibre-gl or openlayers instance that is registered in this mapContext.
+MapComponentsProvider must be used one level higher than the first use of MapContext.
+ *
+ * MapComponentsProvider requires at least one use of the MapLibreMap component somewhere down the component tree that will create the MapLibre-gl object and set the reference at MapContext.map. For MapLibre maps it is a good idea to provide a mapId attribute to the MapLibreMap Component even if you are only using a single map instance at start. It will make a later transition to using multiple instances within the same project much easier.
+ */
+
+const MapComponentsProvider = ({ children }:{children:any}) => {
+  const [map, setMap] = useState<(MapLibreGlWrapper | undefined)>(undefined);
+  const [mapIds, setMapIds] = useState<[...string[]]>([]);
+  let mapIds_raw = useRef<[...string[]]>([]);
+  let maps = useRef<any>({});
+
+
+  const removeMap = (mapId:string) => {
+    if (mapId) {
+      if (typeof maps.current[mapId] !== "undefined") {
+        delete maps.current[mapId];
+      }
+      let mapIdIndex = mapIds_raw.current.indexOf(mapId);
+      if (mapIdIndex > -1) {
+        mapIds_raw.current.splice(mapIdIndex, 1);
+      }
+      setMapIds([...mapIds_raw.current]);
+
+      if (mapIds.length === 1 && map) {
+        setMap(undefined);
+      }
+    } else {
+      setMap(undefined);
+      removeMap("anonymous_map");
+    }
+  };
+
+  const setMapHandler = (mapInstance:MapLibreGlWrapper) => {
+    setMap(mapInstance);
+
+    if (mapIds.length === 0) {
+      let mapId = "anonymous_map";
+      setMapIds([...mapIds, mapId]);
+      maps.current[mapId] = mapInstance;
+    }
+  };
+
+  const value = {
+    map: map,
+    setMap: setMapHandler,
+    maps: maps.current,
+    mapIds: mapIds,
+    registerMap: (mapId:string, mapInstance:MapLibreGlWrapper) => {
+      if (mapId && mapInstance) {
+        maps.current[mapId] = mapInstance;
+        mapIds_raw.current.push(mapId);
+        setMapIds([...mapIds_raw.current]);
+
+        if (!map) {
+          setMap(mapInstance);
+        }
+      }
+    },
+    removeMap,
+    mapExists: (mapId:string) => {
+      if (mapId && Object.keys(maps.current).indexOf(mapId) === -1) {
+        return false;
+      } else if (!mapId && !map) {
+        return false;
+      }
+      return true;
+    },
+    getMap: (mapId:string):(MapLibreGlWrapper | null) => {
+      if (mapId && mapIds.indexOf(mapId) !== -1) {
+        return maps.current[mapId];
+      } else if (!mapId && map) {
+        return map;
+      }
+
+      return null;
+    },
+  };
+
+  //@ts-ignore
+  return <MapContext.Provider value={value}>{children}</MapContext.Provider>;
+};
+
+export { MapComponentsProvider };
+export default MapContext;

package/src/contexts/SimpleDataContext.js

@@ -0,0 +1,6 @@
+import React from "react";
+
+const SimpleDataContext = React.createContext({});
+
+export const SimpleDataContextProvider = SimpleDataContext.Provider;
+export default SimpleDataContext;

package/src/contexts/SimpleDataProvider.js

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { SimpleDataContextProvider } from "./SimpleDataContext";
+import * as d3 from "d3";
+
+const SimpleDataProvider = (props) => {
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    if (!props.url) return;
+
+    let data_promise = null;
+    if (props.format === "json") {
+      data_promise = d3.json(props.url);
+    } else if (props.format === "csv") {
+      data_promise = d3.csv(props.url);
+    } else if (props.format === "xml") {
+      data_promise = d3.xml(props.url);
+    }
+
+    if (data_promise) {
+      data_promise.then((received_data) => {
+        if (props.format === "xml") {
+          if (props.nodeType) {
+            let dataTmp = [];
+            received_data.querySelectorAll(props.nodeType).forEach((el) => {
+
+              dataTmp.push(props.formatData(el));
+            });
+            setData(dataTmp);
+          }
+        } else {
+          if (props.data_property) {
+            received_data = received_data[props.data_property];
+          }
+          if (typeof props.formatData === "function") {
+            setData(received_data.map(props.formatData));
+          } else {
+            setData(received_data);
+          }
+        }
+        if (typeof props.onData === "function") {
+          props.onData();
+        }
+      });
+    }
+  }, [props.url, props]);
+
+  const value = {
+    data: data,
+    setData: setData,
+  };
+
+  return (
+    <SimpleDataContextProvider value={value}>
+      {props.children}
+    </SimpleDataContextProvider>
+  );
+};
+
+SimpleDataProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default SimpleDataProvider;

package/src/contexts/SimpleDataProvider.test.js

@@ -0,0 +1,68 @@
+import React, {useContext} from 'react';
+import SimpleDataContext from './SimpleDataContext';
+import SimpleDataProvider from './SimpleDataProvider';
+import {  waitFor } from '@testing-library/react';
+import {mount} from 'enzyme';
+import * as d3 from "d3";
+
+
+jest.mock('d3');
+
+
+const SimpleDataContextTestComponent = () => {
+
+  const simpleDataContext = useContext(SimpleDataContext);
+
+  return <>
+    <div className="data">{JSON.stringify(simpleDataContext.data)}</div>
+  </>;
+}
+
+const mockData = {id:12,title:'Testtitle'};
+const nestedMockData = {data:mockData};
+const xmlMockData = (new DOMParser()).parseFromString('<?xml version="1.0" encoding="UTF-8" ?><records>	<record>		<id>1</id>		<title>Macey, Josephine, Robert, Clark</title>	</record>	<record>		<id>2</id>		<title>Summer, Channing, Colette, Josephine</title>	</record></records>',"text/xml");;
+
+describe('SimpleDataProvider',() => {
+
+  it('should retrieve data and provide it through simpleDataContext.data (format: "csv")', async () => {
+    d3.csv.mockResolvedValue(mockData);
+
+    const wrapper = mount(<SimpleDataProvider format="csv" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
+
+    await waitFor(() => expect(d3.csv).toHaveBeenCalledTimes(1))
+
+    expect(wrapper.find('.data').text()).toEqual(JSON.stringify(mockData));
+  });
+
+  it('should retrieve data and provide it through simpleDataContext.data (format: "xml")', async () => {
+    d3.xml.mockResolvedValue(xmlMockData);
+
+    const wrapper = mount(<SimpleDataProvider format="xml" nodeType="record" formatData={(record) => { return {id:record.querySelector('id').innerHTML,title:record.querySelector('title').innerHTML}}} url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
+
+    await waitFor(() => expect(d3.xml).toHaveBeenCalledTimes(1))
+
+    expect(wrapper.find('.data').text()).toEqual('[{"id":"1","title":"Macey, Josephine, Robert, Clark"},{"id":"2","title":"Summer, Channing, Colette, Josephine"}]');
+  });
+
+  it('should retrieve data and provide it through simpleDataContext.data (format: "json")', async () => {
+    d3.json.mockResolvedValue(mockData);
+
+    const wrapper = mount(<SimpleDataProvider format="json" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
+
+    await waitFor(() => expect(d3.json).toHaveBeenCalledTimes(1))
+
+    expect(wrapper.find('.data').text()).toEqual(JSON.stringify(mockData));
+  });
+
+  it('should retrieve data and provide the content of the key props.dataProperty on the retrieved data through simpleDataContext.data (format: "json")', async () => {
+    d3.json.mockResolvedValue(nestedMockData);
+
+    const wrapper = mount(<SimpleDataProvider format="json" data_property="data" url="test"><SimpleDataContextTestComponent /></SimpleDataProvider>);
+
+    await waitFor(() => expect(d3.json).toHaveBeenCalledTimes(1))
+
+    expect(wrapper.find('.data').text()).toEqual(JSON.stringify(mockData));
+  });
+
+
+});

package/src/custom.d.tsx

@@ -9,7 +9,7 @@ declare module "*.js" {
   export default content;
 }
 
-//declare module '@mapcomponents/react-core';
+//declare module '../index';
 type MapContextType= {
   mapIds: [string?];
   mapExists: Function;

package/src/decorators/MapContextDecorator.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { MapComponentsProvider } from "@mapcomponents/react-core";
+import { MapComponentsProvider } from "../index";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 import "./style.css";
 import { createTheme, ThemeProvider } from "@mui/material/styles";

package/src/decorators/MultiMapContextDecorator.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { MapComponentsProvider } from "@mapcomponents/react-core";
+import { MapComponentsProvider } from "../index";
 
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 

package/src/hooks/useLayer.ts

@@ -53,8 +53,7 @@ function useLayer(props: useLayerProps): useLayerType {
 
   const initializedRef = useRef<boolean>(false);
   const layerId = useRef(
-    props.layerId ||
-      (props.idPrefix ? props.idPrefix : "Layer-") + mapHook.componentId
+    props.layerId || (props.idPrefix ? props.idPrefix : "Layer-") + mapHook.componentId
   );
 
   const createLayer = useCallback(() => {
@@ -85,30 +84,15 @@ function useLayer(props: useLayerProps): useLayerType {
     setLayer(mapHook.map.map.getLayer(layerId.current));
 
     if (typeof props.onHover !== "undefined") {
-      mapHook.map.on(
-        "mousemove",
-        layerId.current,
-        props.onHover,
-        mapHook.componentId
-      );
+      mapHook.map.on("mousemove", layerId.current, props.onHover, mapHook.componentId);
     }
 
     if (typeof props.onClick !== "undefined") {
-      mapHook.map.on(
-        "click",
-        layerId.current,
-        props.onClick,
-        mapHook.componentId
-      );
+      mapHook.map.on("click", layerId.current, props.onClick, mapHook.componentId);
     }
 
     if (typeof props.onLeave !== "undefined") {
-      mapHook.map.on(
-        "mouseleave",
-        layerId.current,
-        props.onLeave,
-        mapHook.componentId
-      );
+      mapHook.map.on("mouseleave", layerId.current, props.onLeave, mapHook.componentId);
     }
 
     layerPaintConfRef.current = JSON.stringify(props.options?.paint);
@@ -140,22 +124,15 @@ function useLayer(props: useLayerProps): useLayerType {
   }, [mapHook.map, props.options, createLayer]);
 
   useEffect(() => {
-    if (
-      !initializedRef.current ||
-      !mapHook?.map?.map.getSource(layerId.current)
-    )
+    if (!initializedRef.current || !mapHook.map?.map?.getSource(layerId.current))
       return;
 
-    // @ts-ignore
-    mapHook.map.map.getSource(layerId.current).setData(props.geojson);
+      //@ts-ignore setData only exists on GeoJsonSource
+    mapHook.map.map.getSource(layerId.current)?.setData?.(props.geojson);
   }, [props.geojson, mapHook.map, props.options.type]);
 
   useEffect(() => {
-    if (
-      !mapHook.map ||
-      !mapHook.map?.map?.getLayer?.(layerId.current) ||
-      !initializedRef.current
-    )
+    if (!mapHook.map || !mapHook.map?.map?.getLayer?.(layerId.current) || !initializedRef.current)
       return;
 
     var key;
@@ -165,15 +142,8 @@ function useLayer(props: useLayerProps): useLayerType {
       let oldLayout = JSON.parse(layerLayoutConfRef.current);
 
       for (key in props.options.layout) {
-        if (
-          props.options.layout?.[key] &&
-          props.options.layout[key] !== oldLayout[key]
-        ) {
-          mapHook.map.map.setLayoutProperty(
-            layerId.current,
-            key,
-            props.options.layout[key]
-          );
+        if (props.options.layout?.[key] && props.options.layout[key] !== oldLayout[key]) {
+          mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
         }
       }
       layerLayoutConfRef.current = layoutString;
@@ -183,15 +153,8 @@ function useLayer(props: useLayerProps): useLayerType {
     if (paintString !== layerPaintConfRef.current) {
       let oldPaint = JSON.parse(layerPaintConfRef.current);
       for (key in props.options.paint) {
-        if (
-          props.options.paint?.[key] &&
-          props.options.paint[key] !== oldPaint[key]
-        ) {
-          mapHook.map.map.setPaintProperty(
-            layerId.current,
-            key,
-            props.options.paint[key]
-          );
+        if (props.options.paint?.[key] && props.options.paint[key] !== oldPaint[key]) {
+          mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
         }
       }
       layerPaintConfRef.current = paintString;