generated from polymech/site-template
71 lines
2.0 KiB
Markdown
71 lines
2.0 KiB
Markdown
# 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
|
|
|