schema meta :)

docs/map-ex.md

@@ -0,0 +1,70 @@
+# map.astro Component Documentation
+
+## Overview
+`map.astro` is an Astro component that renders a Google Maps static map displaying multiple locations with markers. The component centers the map based on the average coordinates of all locations.
+
+## Component Structure
+- **File Location**: `C:\Users\zx\Desktop\polymech\polymech-site\src\components\polymech\map.astro`
+- **Dependencies**: Imports types from `map-types.ts`
+
+## Props
+The component accepts the following props:
+
+### `locations` (optional)
+An array of location objects with the following structure:
+```typescript
+interface Location {
+  geo: {
+    lat: number;  // Latitude
+    lon: number;  // Longitude
+  };
+  title: string;  // Location title/name
+}
+```
+
+If not provided, it defaults to sample locations in Lamu, Kenya.
+
+### `options` (optional)
+Configuration options for the map:
+```typescript
+interface Options {
+  zoom?: number;    // Map zoom level (default: 9)
+  api_key?: string; // Google Maps API key (required for map to display)
+}
+```
+
+## Features
+1. **Automatic Map Centering**: Calculates the average of all location coordinates to center the map
+2. **Labeled Markers**: Adds alphabetical labels (A, B, C, etc.) to each marker
+3. **Location Legend**: Displays a list of locations with corresponding marker labels
+4. **Error Handling**: Shows an error message when no API key is provided
+
+## Example Usage
+```astro
+---
+import Map from '../components/polymech/map.astro';
+---
+
+<Map 
+  locations={[
+    {
+      geo: { lat: 37.7749, lon: -122.4194 },
+      title: 'San Francisco'
+    },
+    {
+      geo: { lat: 34.0522, lon: -118.2437 },
+      title: 'Los Angeles'
+    }
+  ]}
+  options={{
+    zoom: 7,
+    api_key: 'YOUR_GOOGLE_MAPS_API_KEY'
+  }}
+/>
+```
+
+## Notes
+- **API Key Required**: A Google Maps API key is necessary for the map to function
+- **Responsive Design**: The map container uses responsive classes for proper display on various screen sizes
+- **Style Customization**: The component includes a style tag for additional CSS customization
+

docs/map.md

@@ -0,0 +1,81 @@
+# Google Maps Static API Astro Component
+
+This documentation explains how to use the `map.astro` component which displays locations on a static Google Map.
+
+## Setting up Google Maps Static API key
+
+Before using this component, you need to obtain a Google Maps API key with access to the Static Maps API:
+
+1. Go to the [Google Cloud Console](https://console.cloud.google.com/)
+2. Create a new project or select an existing one
+3. Navigate to APIs & Services > Library
+4. Search for "Maps Static API" and enable it
+5. Navigate to Credentials and create an API key
+6. Make sure to restrict the API key to only the Static Maps API and your domain for production use
+
+## Usage
+
+Import the component in your Astro page and use it as follows:
+
+```astro
+---
+import Map from '../path/to/map.astro';
+import type { Location } from '../path/to/map-types';
+
+// Define your locations
+const myLocations: Location[] = [
+  {
+    geo: { lat: 37.7749296, lon: -122.4194155 },
+    title: 'Golden Gate Bridge'
+  },
+  {
+    geo: { lat: 37.7749, lon: -122.4314 },
+    title: 'Palace of Fine Arts'
+  }
+];
+---
+
+<h1>Explore San Francisco</h1>
+
+<Map 
+  locations={myLocations} 
+  options={{ zoom: 13, api_key: import.meta.env.GOOGLE_MAPS_API_KEY }} 
+/>
+```
+
+## Props
+
+The `Map` component accepts the following props:
+
+- `locations`: An array of `Location` objects, each containing:
+  - `geo`: An object with `lat` and `lon` properties for the coordinates
+  - `title`: A string describing the location
+- `options`: An object with optional configurations:
+  - `zoom`: The zoom level of the map (default: 12)
+  - `api_key`: Your Google Maps API key (required for production use)
+
+## Environment Variables
+
+For security, it's recommended to store your API key as an environment variable. Create an `.env` file in the root of your Astro project with:
+
+```
+GOOGLE_MAPS_API_KEY=your_api_key_here
+```
+
+Then access it in your component with `import.meta.env.GOOGLE_MAPS_API_KEY`.
+
+## Default Values
+
+If no locations are provided, the component defaults to showing two locations in Lamu, Kenya:
+
+1. Lamu Old Town (-2.269456, 40.902096)
+2. Shela Beach (-2.272012, 40.890586)
+
+## Error Handling
+
+The component includes a simple error message if no API key is provided, reminding users to set up their Google Maps API key.
+
+## Styling
+
+The component uses Tailwind CSS for styling, ensuring a responsive design that fits into various layouts. The map container has a fixed aspect ratio of 6 to 4 and a max height of 400px.
+`}