@object-ui/plugin-map 2.0.0 → 3.0.0

package/dist/src/ObjectMap.d.ts

@@ -5,6 +5,7 @@ export interface ObjectMapProps {
     dataSource?: DataSource;
     className?: string;
     onMarkerClick?: (record: any) => void;
+    onRowClick?: (record: any) => void;
     onEdit?: (record: any) => void;
     onDelete?: (record: any) => void;
 }

package/dist/src/ObjectMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectMap.d.ts","sourceRoot":"","sources":["../../src/ObjectMap.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAY,MAAM,kBAAkB,CAAC;AAI/E,OAAO,kCAAkC,CAAC;AAY1C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAsKD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsQ9C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ObjectMap.d.ts","sourceRoot":"","sources":["../../src/ObjectMap.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAY,MAAM,kBAAkB,CAAC;AAM/E,OAAO,kCAAkC,CAAC;AAY1C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAsKD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAsT9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-map",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "license": "MIT",
   "description": "Map visualization plugin for Object UI",
@@ -24,24 +24,24 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^2.0.7",
+    "@objectstack/spec": "^3.0.2",
     "lucide-react": "^0.563.0",
-    "maplibre-gl": "^5.17.0",
+    "maplibre-gl": "^5.18.0",
     "react-map-gl": "^8.1.0",
     "zod": "^4.3.6",
-    "@object-ui/components": "2.0.0",
-    "@object-ui/core": "2.0.0",
-    "@object-ui/react": "2.0.0",
-    "@object-ui/types": "2.0.0"
+    "@object-ui/components": "3.0.0",
+    "@object-ui/react": "3.0.0",
+    "@object-ui/core": "3.0.0",
+    "@object-ui/types": "3.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.13",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.3",
+    "@types/react": "19.2.13",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/ObjectMap.tsx

@@ -22,6 +22,8 @@
 
 import React, { useEffect, useState, useMemo } from 'react';
 import type { ObjectGridSchema, DataSource, ViewData } from '@object-ui/types';
+import { useNavigationOverlay } from '@object-ui/react';
+import { NavigationOverlay } from '@object-ui/components';
 import { z } from 'zod';
 import Map, { NavigationControl, Marker, Popup } from 'react-map-gl/maplibre';
 import maplibregl from 'maplibre-gl';
@@ -42,6 +44,7 @@ export interface ObjectMapProps {
   dataSource?: DataSource;
   className?: string;
   onMarkerClick?: (record: any) => void;
+  onRowClick?: (record: any) => void;
   onEdit?: (record: any) => void;
   onDelete?: (record: any) => void;
 }
@@ -215,6 +218,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   dataSource,
   className,
   onMarkerClick,
+  onRowClick,
   onEdit,
   onDelete,
   ...rest
@@ -224,6 +228,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   const [error, setError] = useState<Error | null>(null);
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [selectedMarkerId, setSelectedMarkerId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
 
   const rawDataConfig = getDataConfig(schema);
   // Memoize dataConfig using deep comparison to prevent infinite loops
@@ -283,8 +288,8 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
           } else if (result && typeof result === 'object') {
              if (Array.isArray((result as any).data)) {
                 items = (result as any).data; 
-             } else if (Array.isArray((result as any).value)) {
-                items = (result as any).value;
+             } else if (Array.isArray((result as any).records)) {
+                items = (result as any).records;
              }
           }
           setData(items);
@@ -365,9 +370,24 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
     markers.find(m => m.id === selectedMarkerId),
   [markers, selectedMarkerId]);
 
+  const navigation = useNavigationOverlay({
+    navigation: (schema as any).navigation,
+    objectName: schema.objectName,
+    onRowClick,
+  });
+
+  const filteredMarkers = useMemo(() => {
+    if (!searchQuery.trim()) return markers;
+    const q = searchQuery.toLowerCase();
+    return markers.filter(m =>
+      m.title?.toLowerCase().includes(q) ||
+      m.description?.toLowerCase().includes(q)
+    );
+  }, [markers, searchQuery]);
+
   // Calculate map bounds
   const initialViewState = useMemo(() => {
-    if (!markers.length) {
+    if (!filteredMarkers.length) {
       return {
         longitude: mapConfig.center?.[1] || 0,
         latitude: mapConfig.center?.[0] || 0,
@@ -376,8 +396,8 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
     }
 
     // Simple bounds calculation
-    const lngs = markers.map(m => m.coordinates[0]);
-    const lats = markers.map(m => m.coordinates[1]);
+    const lngs = filteredMarkers.map(m => m.coordinates[0]);
+    const lats = filteredMarkers.map(m => m.coordinates[1]);
     
     const minLng = Math.min(...lngs);
     const maxLng = Math.max(...lngs);
@@ -389,7 +409,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
       latitude: (minLat + maxLat) / 2,
       zoom: mapConfig.zoom || 3, // Auto-zoom logic could be improved here
     };
-  }, [markers, mapConfig]);
+  }, [filteredMarkers, mapConfig]);
 
   if (loading) {
     return (
@@ -418,15 +438,29 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
           {`${invalidCount} record${invalidCount !== 1 ? 's' : ''} with missing or invalid coordinates excluded from the map.`}
         </div>
       )}
-      <div className="relative border rounded-lg overflow-hidden bg-muted" style={{ height: '600px', width: '100%' }}>
+      {markers.length > 0 && (
+        <div className="mb-2">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search locations…"
+            className="w-full px-3 py-2 text-sm border rounded-md bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+          />
+        </div>
+      )}
+      <div className="relative border rounded-lg overflow-hidden bg-muted h-[300px] sm:h-[400px] md:h-[500px] lg:h-[600px] w-full">
          <Map
             initialViewState={initialViewState}
             style={{ width: '100%', height: '100%' }}
             mapStyle="https://demotiles.maplibre.org/style.json"
+            touchZoomRotate={true}
+            dragRotate={true}
+            touchPitch={true}
          >
-            <NavigationControl position="top-right" />
+            <NavigationControl position="top-right" showCompass={true} showZoom={true} />
             
-            {markers.map(marker => (
+            {filteredMarkers.map(marker => (
                 <Marker
                     key={marker.id}
                     longitude={marker.coordinates[0]}
@@ -435,6 +469,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
                     onClick={(e) => {
                         e.originalEvent.stopPropagation();
                         setSelectedMarkerId(marker.id);
+                        navigation.handleClick(marker.data);
                         onMarkerClick?.(marker.data);
                     }}
                 >
@@ -452,7 +487,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
                     onClose={() => setSelectedMarkerId(null)}
                     closeOnClick={false}
                 >
-                    <div className="p-2 min-w-[200px]">
+                    <div className="p-2 min-w-[150px] sm:min-w-[200px]">
                         <h3 className="font-bold text-sm mb-1">{selectedMarker.title}</h3>
                         {selectedMarker.description && (
                             <p className="text-xs text-muted-foreground">{selectedMarker.description}</p>
@@ -470,6 +505,22 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
             )}
          </Map>
       </div>
+      {navigation.isOverlay && (
+        <NavigationOverlay {...navigation} title="Location Details">
+          {(record) => (
+            <div className="space-y-3">
+              {Object.entries(record).map(([key, value]) => (
+                <div key={key} className="flex flex-col">
+                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                    {key.replace(/_/g, ' ')}
+                  </span>
+                  <span className="text-sm">{String(value ?? '—')}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </NavigationOverlay>
+      )}
     </div>
   );
 };