@object-ui/plugin-map 3.0.3 → 3.1.0

package/dist/src/ObjectMap.d.ts

@@ -8,6 +8,10 @@ export interface ObjectMapProps {
     onRowClick?: (record: any) => void;
     onEdit?: (record: any) => void;
     onDelete?: (record: any) => void;
+    /** Enable marker clustering for dense data */
+    enableClustering?: boolean;
+    /** Cluster radius in pixels (default: 50) */
+    clusterRadius?: number;
 }
 export declare const ObjectMap: React.FC<ObjectMapProps>;
 export default ObjectMap;

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;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"}
+{"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;AAO/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;IACjC,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwOD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwV9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-map",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "type": "module",
   "license": "MIT",
   "description": "Map visualization plugin for Object UI",
@@ -24,22 +24,22 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^3.0.4",
-    "lucide-react": "^0.563.0",
-    "maplibre-gl": "^5.18.0",
+    "@objectstack/spec": "^3.2.0",
+    "lucide-react": "^0.576.0",
+    "maplibre-gl": "^5.19.0",
     "react-map-gl": "^8.1.0",
     "zod": "^4.3.6",
-    "@object-ui/components": "3.0.3",
-    "@object-ui/core": "3.0.3",
-    "@object-ui/react": "3.0.3",
-    "@object-ui/types": "3.0.3"
+    "@object-ui/components": "3.1.0",
+    "@object-ui/core": "3.1.0",
+    "@object-ui/react": "3.1.0",
+    "@object-ui/types": "3.1.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": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",

package/src/ObjectMap.tsx

@@ -23,9 +23,10 @@
 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 { NavigationOverlay, cn } from '@object-ui/components';
+import { extractRecords, buildExpandFields } from '@object-ui/core';
 import { z } from 'zod';
-import Map, { NavigationControl, Marker, Popup } from 'react-map-gl/maplibre';
+import MapGL, { NavigationControl, Marker, Popup } from 'react-map-gl/maplibre';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
@@ -47,6 +48,10 @@ export interface ObjectMapProps {
   onRowClick?: (record: any) => void;
   onEdit?: (record: any) => void;
   onDelete?: (record: any) => void;
+  /** Enable marker clustering for dense data */
+  enableClustering?: boolean;
+  /** Cluster radius in pixels (default: 50) */
+  clusterRadius?: number;
 }
 
 interface MapConfig {
@@ -213,6 +218,72 @@ function extractCoordinates(record: any, config: MapConfig): [number, number] |
   return null;
 }
 
+interface MarkerData {
+  id: string;
+  title: string;
+  description?: string;
+  coordinates: [number, number];
+  data: any;
+}
+
+interface ClusterData {
+  id: string;
+  coordinates: [number, number];
+  markers: MarkerData[];
+  isCluster: boolean;
+}
+
+/**
+ * Simple grid-based marker clustering.
+ * Groups markers that are close to each other at a given zoom level.
+ */
+function clusterMarkers(markers: MarkerData[], zoom: number, radius: number = 50): ClusterData[] {
+  if (markers.length <= 1 || zoom >= 15) {
+    return markers.map(m => ({
+      id: m.id,
+      coordinates: m.coordinates,
+      markers: [m],
+      isCluster: false,
+    }));
+  }
+
+  // Grid cell size based on zoom (larger cells at lower zoom)
+  const cellSize = radius / Math.pow(2, zoom);
+  const grid = new Map<string, MarkerData[]>();
+
+  markers.forEach(marker => {
+    const cellX = Math.floor(marker.coordinates[0] / cellSize);
+    const cellY = Math.floor(marker.coordinates[1] / cellSize);
+    const key = `${cellX}:${cellY}`;
+    if (!grid.has(key)) grid.set(key, []);
+    grid.get(key)!.push(marker);
+  });
+
+  const clusters: ClusterData[] = [];
+  grid.forEach((group, key) => {
+    if (group.length === 1) {
+      clusters.push({
+        id: group[0].id,
+        coordinates: group[0].coordinates,
+        markers: group,
+        isCluster: false,
+      });
+    } else {
+      // Compute centroid
+      const avgLng = group.reduce((sum, m) => sum + m.coordinates[0], 0) / group.length;
+      const avgLat = group.reduce((sum, m) => sum + m.coordinates[1], 0) / group.length;
+      clusters.push({
+        id: `cluster-${key}`,
+        coordinates: [avgLng, avgLat],
+        markers: group,
+        isCluster: true,
+      });
+    }
+  });
+
+  return clusters;
+}
+
 export const ObjectMap: React.FC<ObjectMapProps> = ({
   schema,
   dataSource,
@@ -221,6 +292,8 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   onRowClick,
   onEdit,
   onDelete,
+  enableClustering,
+  clusterRadius = 50,
   ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
@@ -271,27 +344,21 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
           return;
         }
 
-        if (!dataSource) {
+        if (!dataSource || typeof dataSource.find !== 'function') {
           throw new Error('DataSource required for object/api providers');
         }
 
         if (dataConfig?.provider === 'object') {
           const objectName = dataConfig.object;
+          // Auto-inject $expand for lookup/master_detail fields
+          const expand = buildExpandFields(objectSchema?.fields);
           const result = await dataSource.find(objectName, {
             $filter: schema.filter,
             $orderby: convertSortToQueryParams(schema.sort),
+            ...(expand.length > 0 ? { $expand: expand } : {}),
           });
           
-          let items: any[] = [];
-          if (Array.isArray(result)) {
-            items = result;
-          } 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).records)) {
-                items = (result as any).records;
-             }
-          }
+          let items: any[] = extractRecords(result);
           setData(items);
         } else if (dataConfig?.provider === 'api') {
           console.warn('API provider not yet implemented for ObjectMap');
@@ -306,7 +373,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
     };
 
     fetchData();
-  }, [dataConfig, dataSource, hasInlineData, schema.filter, schema.sort]);
+  }, [dataConfig, dataSource, hasInlineData, schema.filter, schema.sort, objectSchema]);
 
   // Fetch object schema for field metadata
   useEffect(() => {
@@ -370,6 +437,8 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
     markers.find(m => m.id === selectedMarkerId),
   [markers, selectedMarkerId]);
 
+  const [currentZoom, setCurrentZoom] = useState(mapConfig.zoom || 3);
+
   const navigation = useNavigationOverlay({
     navigation: (schema as any).navigation,
     objectName: schema.objectName,
@@ -385,6 +454,20 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
     );
   }, [markers, searchQuery]);
 
+  // Cluster markers when clustering is enabled
+  const clusteredData = useMemo(() => {
+    const shouldCluster = enableClustering ?? ((schema as any).enableClustering || filteredMarkers.length > 100);
+    if (!shouldCluster) {
+      return filteredMarkers.map(m => ({
+        id: m.id,
+        coordinates: m.coordinates,
+        markers: [m],
+        isCluster: false,
+      }));
+    }
+    return clusterMarkers(filteredMarkers, currentZoom, clusterRadius);
+  }, [filteredMarkers, currentZoom, enableClustering, clusterRadius, schema]);
+
   // Calculate map bounds
   const initialViewState = useMemo(() => {
     if (!filteredMarkers.length) {
@@ -413,7 +496,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
 
   if (loading) {
     return (
-      <div className={className}>
+      <div className={cn("min-w-0 overflow-hidden", className)}>
         <div className="flex items-center justify-center h-96 bg-muted rounded-lg border">
           <div className="text-muted-foreground">Loading map...</div>
         </div>
@@ -423,7 +506,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
 
   if (error) {
     return (
-      <div className={className}>
+      <div className={cn("min-w-0 overflow-hidden", className)}>
         <div className="flex items-center justify-center h-96 bg-muted rounded-lg border">
           <div className="text-destructive">Error: {error.message}</div>
         </div>
@@ -432,7 +515,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   }
 
   return (
-    <div className={className}>
+    <div className={cn("min-w-0 overflow-hidden", className)}>
       {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.`}
@@ -450,24 +533,45 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
         </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
+         <MapGL
             initialViewState={initialViewState}
             style={{ width: '100%', height: '100%' }}
             mapStyle="https://demotiles.maplibre.org/style.json"
             touchZoomRotate={true}
             dragRotate={true}
             touchPitch={true}
+            onZoom={(e) => setCurrentZoom(Math.round(e.viewState.zoom))}
          >
             <NavigationControl position="top-right" showCompass={true} showZoom={true} />
             
-            {filteredMarkers.map(marker => (
+            {clusteredData.map(cluster => (
+              cluster.isCluster ? (
+                <Marker
+                  key={cluster.id}
+                  longitude={cluster.coordinates[0]}
+                  latitude={cluster.coordinates[1]}
+                  anchor="center"
+                >
+                  <div
+                    className="flex items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xs cursor-pointer hover:scale-110 transition-transform shadow-md"
+                    style={{
+                      width: Math.min(48, 24 + cluster.markers.length * 2),
+                      height: Math.min(48, 24 + cluster.markers.length * 2),
+                    }}
+                    title={`${cluster.markers.length} markers`}
+                  >
+                    {cluster.markers.length}
+                  </div>
+                </Marker>
+              ) : (
                 <Marker
-                    key={marker.id}
-                    longitude={marker.coordinates[0]}
-                    latitude={marker.coordinates[1]}
+                    key={cluster.id}
+                    longitude={cluster.coordinates[0]}
+                    latitude={cluster.coordinates[1]}
                     anchor="bottom"
                     onClick={(e) => {
                         e.originalEvent.stopPropagation();
+                        const marker = cluster.markers[0];
                         setSelectedMarkerId(marker.id);
                         navigation.handleClick(marker.data);
                         onMarkerClick?.(marker.data);
@@ -477,6 +581,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
                         📍
                     </div>
                 </Marker>
+              )
             ))}
 
             {selectedMarker && (
@@ -503,7 +608,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
                     </div>
                 </Popup>
             )}
-         </Map>
+         </MapGL>
       </div>
       {navigation.isOverlay && (
         <NavigationOverlay {...navigation} title="Location Details">

package/src/index.tsx

@@ -17,7 +17,7 @@ export type { ObjectMapProps };
 
 // Register component
 export const ObjectMapRenderer: React.FC<any> = ({ schema, ...props }) => {
-  const { dataSource } = useSchemaContext();
+  const { dataSource } = useSchemaContext() || {};
   return <ObjectMap schema={schema} dataSource={dataSource} {...props} />;
 };