@object-ui/plugin-map 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,276 @@
+# @object-ui/plugin-map
+
+Map visualization plugin for Object UI - Display geographic data with interactive maps.
+
+## Features
+
+- **Interactive Maps** - Zoomable, pannable map visualization
+- **Markers** - Add markers with custom icons and popups
+- **Layers** - Multiple map layers support
+- **Geolocation** - User location detection
+- **Customizable** - Tailwind CSS styling support
+- **Responsive** - Mobile-friendly map controls
+
+## Installation
+
+```bash
+pnpm add @object-ui/plugin-map
+```
+
+## Usage
+
+### Automatic Registration (Side-Effect Import)
+
+```typescript
+// In your app entry point (e.g., App.tsx or main.tsx)
+import '@object-ui/plugin-map';
+
+// Now you can use map types in your schemas
+const schema = {
+  type: 'map',
+  center: { lat: 37.7749, lng: -122.4194 },
+  zoom: 12,
+  markers: [
+    { lat: 37.7749, lng: -122.4194, label: 'San Francisco' }
+  ]
+};
+```
+
+### Manual Registration
+
+```typescript
+import { mapComponents } from '@object-ui/plugin-map';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Register map components
+Object.entries(mapComponents).forEach(([type, component]) => {
+  ComponentRegistry.register(type, component);
+});
+```
+
+## Schema API
+
+### Map
+
+Display an interactive map:
+
+```typescript
+{
+  type: 'map',
+  center: { lat: number, lng: number },
+  zoom?: number,                  // Default: 10
+  markers?: MapMarker[],
+  layers?: MapLayer[],
+  height?: number | string,
+  onMarkerClick?: (marker) => void,
+  className?: string
+}
+```
+
+### Map Marker
+
+```typescript
+interface MapMarker {
+  lat: number;
+  lng: number;
+  label?: string;
+  icon?: string;                  // Icon URL or name
+  popup?: string | ReactNode;
+  color?: string;                 // Marker color
+}
+```
+
+## Examples
+
+### Basic Map
+
+```typescript
+const schema = {
+  type: 'map',
+  center: { lat: 40.7128, lng: -74.0060 },
+  zoom: 13,
+  height: 500,
+  markers: [
+    {
+      lat: 40.7128,
+      lng: -74.0060,
+      label: 'New York City',
+      popup: 'The Big Apple'
+    }
+  ]
+};
+```
+
+### Multiple Markers
+
+```typescript
+const schema = {
+  type: 'map',
+  center: { lat: 37.7749, lng: -122.4194 },
+  zoom: 10,
+  markers: [
+    {
+      lat: 37.7749,
+      lng: -122.4194,
+      label: 'San Francisco',
+      color: 'red',
+      popup: 'Golden Gate Bridge'
+    },
+    {
+      lat: 37.8044,
+      lng: -122.2712,
+      label: 'Oakland',
+      color: 'blue',
+      popup: 'Port of Oakland'
+    },
+    {
+      lat: 37.3382,
+      lng: -121.8863,
+      label: 'San Jose',
+      color: 'green',
+      popup: 'Silicon Valley'
+    }
+  ]
+};
+```
+
+### Interactive Map
+
+```typescript
+const schema = {
+  type: 'map',
+  center: { lat: 51.5074, lng: -0.1278 },
+  zoom: 12,
+  markers: [/* markers */],
+  onMarkerClick: (marker) => {
+    console.log('Marker clicked:', marker);
+    // Show marker details
+  },
+  onMapClick: (coordinates) => {
+    console.log('Map clicked at:', coordinates);
+    // Add new marker
+  }
+};
+```
+
+### Map with Data Binding
+
+```typescript
+const schema = {
+  type: 'map',
+  center: { lat: 37.7749, lng: -122.4194 },
+  zoom: 10,
+  markers: '${data.locations.map(loc => ({ lat: loc.latitude, lng: loc.longitude, label: loc.name }))}',
+  onMarkerClick: (marker) => {
+    // Handle marker click
+  }
+};
+```
+
+## Integration with ObjectQL
+
+Connect map to ObjectStack data sources:
+
+```typescript
+import { createObjectStackAdapter } from '@object-ui/data-objectstack';
+
+const dataSource = createObjectStackAdapter({
+  baseUrl: 'https://api.example.com',
+  token: 'your-auth-token'
+});
+
+const schema = {
+  type: 'object-map',
+  dataSource,
+  object: 'locations',
+  latField: 'latitude',
+  lngField: 'longitude',
+  labelField: 'name',
+  popupField: 'description',
+  center: { lat: 37.7749, lng: -122.4194 },
+  zoom: 10
+};
+```
+
+## Map Features
+
+### Custom Markers
+
+```typescript
+const schema = {
+  type: 'map',
+  markers: [
+    {
+      lat: 40.7128,
+      lng: -74.0060,
+      icon: '/custom-marker.png',
+      popup: {
+        type: 'card',
+        title: 'Location Details',
+        body: 'Custom popup content'
+      }
+    }
+  ]
+};
+```
+
+### Geolocation
+
+```typescript
+const schema = {
+  type: 'map',
+  useGeolocation: true,           // Center map on user's location
+  zoom: 15,
+  markers: []
+};
+```
+
+### Map Layers
+
+```typescript
+const schema = {
+  type: 'map',
+  center: { lat: 37.7749, lng: -122.4194 },
+  layers: [
+    { type: 'heatmap', data: [/* heatmap data */] },
+    { type: 'polygon', coordinates: [/* polygon coordinates */], color: 'rgba(255, 0, 0, 0.3)' }
+  ]
+};
+```
+
+## TypeScript Support
+
+```typescript
+import type { MapSchema, MapMarker } from '@object-ui/plugin-map';
+
+const marker: MapMarker = {
+  lat: 37.7749,
+  lng: -122.4194,
+  label: 'San Francisco',
+  color: 'red'
+};
+
+const map: MapSchema = {
+  type: 'map',
+  center: { lat: 37.7749, lng: -122.4194 },
+  zoom: 12,
+  markers: [marker]
+};
+```
+
+## Customization
+
+Style the map with Tailwind classes:
+
+```typescript
+const schema = {
+  type: 'map',
+  className: 'rounded-lg shadow-xl border-2 border-gray-200',
+  height: '600px',
+  center: { lat: 37.7749, lng: -122.4194 }
+};
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/index'
+export {}