@object-ui/plugin-map 0.5.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,CAyP9C,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": "0.5.0",
+  "version": "3.0.0",
   "type": "module",
   "license": "MIT",
   "description": "Map visualization plugin for Object UI",
@@ -24,24 +24,24 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^0.9.2",
+    "@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": "0.5.0",
-    "@object-ui/core": "0.5.0",
-    "@object-ui/react": "0.5.0",
-    "@object-ui/types": "0.5.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.10",
-    "@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,9 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   dataSource,
   className,
   onMarkerClick,
+  onRowClick,
+  onEdit,
+  onDelete,
   ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
@@ -222,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
@@ -281,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);
@@ -326,19 +333,23 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   }, [schema.objectName, dataSource, hasInlineData, dataConfig]);
 
   // Transform data to map markers
-  const markers = useMemo(() => {
-    return data
+  const { markers, invalidCount } = useMemo(() => {
+    let invalid = 0;
+    const validMarkers = data
       .map((record, index) => {
         const coordinates = extractCoordinates(record, mapConfig);
-        if (!coordinates) return null;
+        if (!coordinates) {
+          invalid++;
+          return null;
+        }
 
         const title = mapConfig.titleField ? record[mapConfig.titleField] : 'Marker';
         const description = mapConfig.descriptionField ? record[mapConfig.descriptionField] : undefined;
 
         // Ensure lat/lng are within valid ranges
         const [lat, lng] = coordinates;
-        if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
-            console.warn(`Invalid coordinates for marker ${index}: [${lat}, ${lng}]`);
+        if (!isFinite(lat) || !isFinite(lng) || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
+            invalid++;
             return null;
         }
 
@@ -351,15 +362,32 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
         };
       })
       .filter((marker): marker is NonNullable<typeof marker> => marker !== null);
+
+    return { markers: validMarkers, invalidCount: invalid };
   }, [data, mapConfig]);
 
   const selectedMarker = useMemo(() => 
     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,
@@ -368,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);
@@ -381,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 (
@@ -405,15 +433,34 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
 
   return (
     <div className={className}>
-      <div className="relative border rounded-lg overflow-hidden bg-muted" style={{ height: '600px', width: '100%' }}>
+      {invalidCount > 0 && (
+        <div className="mb-2 p-2 text-sm text-yellow-800 bg-yellow-50 border border-yellow-200 rounded">
+          {`${invalidCount} record${invalidCount !== 1 ? 's' : ''} with missing or invalid coordinates excluded from the map.`}
+        </div>
+      )}
+      {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]}
@@ -422,6 +469,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
                     onClick={(e) => {
                         e.originalEvent.stopPropagation();
                         setSelectedMarkerId(marker.id);
+                        navigation.handleClick(marker.data);
                         onMarkerClick?.(marker.data);
                     }}
                 >
@@ -439,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>
@@ -457,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>
   );
 };

package/src/index.tsx

@@ -25,7 +25,17 @@ console.log('Registering object-map...');
 ComponentRegistry.register('object-map', ObjectMapRenderer, {
   namespace: 'plugin-map',
   label: 'Object Map',
-  category: 'plugin',
+  category: 'view',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'map', type: 'object', label: 'Map Config', description: 'latitudeField, longitudeField, titleField' },
+  ],
+});
+
+ComponentRegistry.register('map', ObjectMapRenderer, {
+  namespace: 'view',
+  label: 'Map View',
+  category: 'view',
   inputs: [
     { name: 'objectName', type: 'string', label: 'Object Name', required: true },
     { name: 'map', type: 'object', label: 'Map Config', description: 'latitudeField, longitudeField, titleField' },