mapping-component-package-jp 0.0.56 → 0.0.57

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "mapping-component-package-jp",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "rollup": "rollup -c --bundleConfigAsCjs",
-    "build": "rollup -c --bundleConfigAsCjs",
+    "rollup": "npx rollup -c --bundleConfigAsCjs",
+    "build": "npx rollup -c --bundleConfigAsCjs",
     "prepublishOnly": "npm run build",
     "vp": "npm version patch",
     "vm": "npm version minor",
@@ -26,6 +26,7 @@
     "install": "^0.13.0",
     "polylabel": "^2.0.1",
     "polyline": "^0.2.0",
+    "postcss": "^8.5.6",
     "react": "^18.3.1",
     "tslib": "^2.7.0",
     "typescript": "^5.6.3"
@@ -40,6 +41,7 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.0",
+    "@vis.gl/react-google-maps": "^1.7.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",

package/src/components/JPMapComponentNew.tsx

@@ -0,0 +1,92 @@
+import React, { memo, useEffect } from "react";
+// Import from the new modern library:
+import { APIProvider, Map, useMap } from "@vis.gl/react-google-maps"; 
+
+// Assuming useMapManager is compatible and imported correctly
+import { useMapManager } from "../hooks/useMapManager"; 
+
+const containerStyle = {
+  width: "100%",
+  height: "100%",
+};
+
+const center = {
+  lat: -25.7652061,
+  lng: 28.2710333,
+};
+
+const DISABLE_DEFAULT_UI = true;
+const MAP_TYPE_ID = 'hybrid' as google.maps.MapTypeId;
+const MAP_TYPE_CONTROL = true;
+const ZOOM_CONTROL = true;
+const MAP_ID = 'JP_DEMO_MAP';
+
+
+// Define the type that matches your existing expectation
+export type jpMapType = {
+  isMapInitialized: boolean;
+  mapObject: google.maps.Map | null;
+  mapManager: any; // Type this more specifically if possible
+};
+
+interface JPMapComponentNewProps {
+  gmAPIkey: string;
+  // The callback to pass the initialized map data back up to the parent App
+  jpMap: (jpMap: jpMapType) => void;
+}
+
+
+// --- 1. The Handler Component: Gets Map context via Hook ---
+// This component sits inside the <Map> component and uses the useMap hook
+const MapHandlerComponent: React.FC<{ jpMap: JPMapComponentNewProps['jpMap'] }> = ({ jpMap }) => {
+  // Access the map instance using the hook provided by @vis.gl/react-google-maps
+  const mapInstance = useMap();
+
+  // Assuming useMapManager needs the map instance passed to it
+  const { mapManager } = useMapManager({ mapInstance });
+
+  // Use useEffect to trigger the parent callback once the map and manager are ready
+  useEffect(() => {
+    if (mapInstance && mapManager) {
+      // Pass the necessary objects back to the parent component
+      jpMap({
+        isMapInitialized: true,
+        mapObject: mapInstance,
+        mapManager: mapManager,
+      });
+    }
+    // Note: A cleanup function is optional here as the APIProvider handles cleanup
+  }, [mapInstance, mapManager, jpMap]);
+
+  // This component renders nothing visually
+  return null;
+};
+
+
+// --- 2. The Main Map Component: Sets up Provider and Map ---
+const JPMapComponentNew: React.FC<JPMapComponentNewProps> = ({ gmAPIkey, jpMap }) => {
+
+  return (
+    // The APIProvider handles key, script loading, and libraries
+    <APIProvider 
+      apiKey={gmAPIkey} 
+      libraries={['places', 'marker', 'geometry']}
+    >
+      <Map
+        mapId={MAP_ID}
+        style={containerStyle}
+        center={center}
+        zoom={5}
+        disableDefaultUI={DISABLE_DEFAULT_UI}
+        mapTypeId={MAP_TYPE_ID}
+        mapTypeControl={MAP_TYPE_CONTROL}
+        zoomControl={ZOOM_CONTROL}
+      >
+        {/* Render the handler component inside the Map context */}
+        <MapHandlerComponent jpMap={jpMap} />
+      </Map>
+    </APIProvider>
+  );
+};
+
+export default memo(JPMapComponentNew);