### Install astro-leaflet Package

Source: https://github.com/pascal-brand38/astro-leaflet/blob/main/README.md

Installs the latest version of the astro-leaflet package using NPM. This is the first step to integrate Leaflet maps into your Astro project.

```bash
$ npm install astro-leaflet
```

--------------------------------

### Organize Layers with Astro Leaflet Controls

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Organizes map layers into switchable groups using LayerGroup, ControlLayer, BaseLayer, and Overlay components. This allows users to toggle different tile layers and data overlays, such as cities and restaurants, on and off. It utilizes various components from 'astro-leaflet' and requires the library to be installed.

```jsx
---
import {
  Leaflet,
  LayerGroup,
  ControlLayer,
  BaseLayer,
  Overlay,
  Marker,
  TileLayer
} from "astro-leaflet";
---

<Leaflet noDefault={true} options={{ center: [39.73, -104.99], zoom: 10 }}>
  <ControlLayer>
    <!-- Base layers (radio button selection) -->
    <BaseLayer name="OpenStreetMap">
      <TileLayer tileByName="OSM" />
    </BaseLayer>

    <BaseLayer name="Google Satellite">
      <TileLayer tileByName="Google&type=satellite" />
    </BaseLayer>

    <BaseLayer name="Google Streets">
      <TileLayer tileByName="Google&type=street" />
    </BaseLayer>

    <!-- Overlay layers (checkbox selection) -->
    <Overlay name="Cities">
      <LayerGroup>
        <Marker latlng={[39.7392, -104.9903]} options={{ title: "Denver" }} />
        <Marker latlng={[40.7608, -111.8910]} options={{ title: "Salt Lake City" }} />
      </LayerGroup>
    </Overlay>

    <Overlay name="Restaurants">
      <LayerGroup>
        <Marker latlng={[39.7420, -104.9920]} options={{ title: "Restaurant 1" }} />
        <Marker latlng={[39.7380, -104.9850]} options={{ title: "Restaurant 2" }} />
      </LayerGroup>
    </Overlay>
  </ControlLayer>
</Leaflet>
```

--------------------------------

### Create Basic Leaflet Map in Astro

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Demonstrates how to create a basic interactive map using the `<Leaflet>` component in Astro. It shows minimal configuration for OpenStreetMap, a Google satellite map centered on specific coordinates, and a custom tile layer with detailed options for attribution and zoom levels.

```jsx
---
import { Leaflet } from "astro-leaflet";
---

<!-- Minimal OpenStreetMap -->
<Leaflet />

<!-- Google satellite map centered on specific coordinates -->
<Leaflet options={{
  tileByName: 'Google&type=satellite',
  center: [40.7128, -74.0060],
  zoom: 12
}} />

<!-- Custom tile layer with full options -->
<Leaflet options={{
  tileLayer: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  center: [51.505, -0.09],
  zoom: 13,
  tileLayerOptions: {
    attribution: '&copy; OpenStreetMap contributors',
    maxZoom: 19
  },
  mapOptions: {
    zoomControl: true,
    scrollWheelZoom: true
  }
}} />
```

--------------------------------

### Minimal Astro Leaflet Usage

Source: https://github.com/pascal-brand38/astro-leaflet/blob/main/README.md

Demonstrates the most basic implementation of the Leaflet component in an Astro file. It imports the Leaflet component and renders it without any specific configurations, defaulting to OpenStreetMap.

```jsx
---
import { Leaflet } from "astro-leaflet";
---
<Leaflet />
```

--------------------------------

### Basic Map Component

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

The `<Leaflet>` component is used to create a basic interactive map. It can be configured with different tile providers, center coordinates, and zoom levels.

```APIDOC
## Basic Map Component

### Description
The `<Leaflet>` component creates an interactive map with customizable tile layers and view settings.

### Method
N/A (Component-based)

### Endpoint
N/A (Component-based)

### Parameters
#### Props
- **options** (object) - Optional - Configuration options for the map.
  - **tileByName** (string) - Optional - Predefined tile provider name (e.g., 'Google&type=satellite').
  - **tileLayer** (string) - Optional - Custom tile layer URL.
  - **center** (array) - Optional - Latitude and longitude for the map center [lat, lng].
  - **zoom** (number) - Optional - Initial zoom level.
  - **tileLayerOptions** (object) - Optional - Options for the tile layer (e.g., attribution, maxZoom).
  - **mapOptions** (object) - Optional - General map options (e.g., zoomControl, scrollWheelZoom).

### Request Example
```jsx
<Leaflet />

<Leaflet options={{
  tileByName: 'Google&type=satellite',
  center: [40.7128, -74.0060],
  zoom: 12
}} />

<Leaflet options={{
  tileLayer: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  center: [51.505, -0.09],
  zoom: 13,
  tileLayerOptions: {
    attribution: '&copy; OpenStreetMap contributors',
    maxZoom: 19
  },
  mapOptions: {
    zoomControl: true,
    scrollWheelZoom: true
  }
}} />
```

### Response
N/A (Component renders a map)
```

--------------------------------

### Configure TileLayer with Name and Options

Source: https://github.com/pascal-brand38/astro-leaflet/blob/main/README.md

The TileLayer component allows adding tile layers to the map. It supports a friendly name to infer the URL and associated options like subdomains. This functionality is useful for overlaying different map tiles or labels.

```javascript
<TileLayer
  urlTemplate='url of the tiles to overlay'
  options={{ leaflet options of tileLayer() }}>
```

--------------------------------

### Troubleshoot Map Display with Vite OptimizeDeps

Source: https://github.com/pascal-brand38/astro-leaflet/blob/main/README.md

This configuration snippet addresses the 'map not displayed' issue that may arise due to incorrect module handling in Vite. By adding 'leaflet' to the 'optimizeDeps.include' array in `astro.config.mjs`, you ensure that Leaflet modules are correctly processed, resolving potential syntax errors related to exports like 'layerGroup'.

```javascript
export default defineConfig({
  ...
  vite: {
    optimizeDeps: {
      include: ['leaflet'],
    }
  },
  ...
});
```

--------------------------------

### Circles and Popups

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Draw circular overlays with the `<Circle>` component and add interactive information windows using the `<Popup>` component. Popups can be attached to markers or circles.

```APIDOC
## Circles and Popups

### Description
The `<Circle>` component draws circular overlays, and `<Popup>` adds interactive information windows. Popups can be attached to markers or circles.

### Method
N/A (Component-based)

### Endpoint
N/A (Component-based)

### Parameters
#### Leaflet Component Props
- **options** (object) - Map configuration options (see Basic Map Component).

#### Circle Component Props
- **latlng** (array) - Required - Latitude and longitude for the circle center [lat, lng].
- **options** (object) - Optional - Options for styling the circle (e.g., radius, color, fillColor, fillOpacity).

#### Popup Component Props
- **content** (string) - Required - The HTML content to display in the popup.
- **open** (boolean) - Optional - Whether the popup should be initially open (default: false).

#### Marker Component Props (for attaching popups)
- **latlng** (array) - Required - Latitude and longitude for the marker [lat, lng].
- **options** (object) - Optional - Marker specific options.

### Request Example
```jsx
---
import { Leaflet, Circle, Marker, Popup } from "astro-leaflet";
---

<Leaflet options={{ center: [51.508, -0.11], zoom: 13 }}>
  <Circle
    latlng={[51.508, -0.11]}
    options={{
      radius: 500,
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5
    }}
  >
    <Popup content="500m radius from center" open={true} />
  </Circle>

  <Marker latlng={[51.5, -0.09]} options={{ title: "London" }}>
    <Popup content="<b>London</b><br>Capital of England" />
  </Marker>
</Leaflet>
```

### Response
N/A (Component renders a map with circles and popups)
```

--------------------------------

### Configure Map Tile Providers with tileByName

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

The `tileByName` parameter in Astro Leaflet allows easy selection of various map providers without manual URL configuration. It supports different map types, language options, and additional layers for providers like Google and Michelin.

```jsx
---
import { Leaflet } from "astro-leaflet";
---

<!-- OpenStreetMap -->
<Leaflet options={{ tileByName: 'OSM' }} />

<!-- Google satellite view -->
<Leaflet options={{ tileByName: 'Google&type=satellite' }} />

<!-- Google street view with Korean labels -->
<Leaflet options={{ tileByName: 'Google&type=street&lang=ko' }} />

<!-- Google hybrid with transit and bike layers -->
<Leaflet options={{ tileByName: 'Google&type=hybrid&extra=transit,bike' }} />

<!-- Michelin maps -->
<Leaflet options={{ tileByName: 'Michelin&type=map' }} />

<!-- Michelin labels -->
<Leaflet options={{ tileByName: 'Michelin&type=label' }} />
```

--------------------------------

### Display Single Image Overlay on Map

Source: https://github.com/pascal-brand38/astro-leaflet/blob/main/README.md

The ImageOverlay component displays a single image over specific geographical bounds on the map. It requires the image URL, the geographical bounds, and optional Leaflet options like opacity.

```javascript
<ImageOverlay
  imageUrl="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
  bounds={[[40.712216, -74.22655], [40.773941, -74.12544]]}
  options={{opacity:0.5}}
/>
```

--------------------------------

### Polylines and Polygons

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Draw lines and shapes on the map using the `<Polyline>` and `<Polygon>` components. The `<FitBounds>` component can automatically adjust the map view to encompass these elements.

```APIDOC
## Polylines and Polygons

### Description
The `<Polyline>` and `<Polygon>` components draw lines and shapes on the map. The `<FitBounds>` component can be used to automatically adjust map view.

### Method
N/A (Component-based)

### Endpoint
N/A (Component-based)

### Parameters
#### Leaflet Component Props
- **options** (object) - Map configuration options (see Basic Map Component).

#### Polyline Component Props
- **latlngs** (array) - Required - An array of latitude and longitude points defining the polyline.
- **options** (object) - Optional - Options for styling the polyline (e.g., color, weight, opacity).

#### Polygon Component Props
- **latlngs** (array) - Required - An array of latitude and longitude points defining the polygon vertices.
- **options** (object) - Optional - Options for styling the polygon (e.g., color, fillColor, fillOpacity).

#### FitBounds Component Props
- No direct props; it works as a child of `Leaflet`, `Polyline`, or `Polygon` to fit bounds.

### Request Example
```jsx
---
import { Leaflet, Polyline, Polygon, FitBounds } from "astro-leaflet";

const routeCoordinates = [
  [40.7580, -73.9855],
  [40.7614, -73.9776],
  [40.7489, -73.9680],
  [40.7420, -73.9875]
];

const areaCoordinates = [
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
];
---

<Leaflet options={{ center: [40.7580, -73.9855], zoom: 13 }}>
  <Polyline
    latlngs={routeCoordinates}
    options={{
      color: 'red',
      weight: 5,
      opacity: 0.7
    }}
  >
    <FitBounds />
  </Polyline>

  <Polygon
    latlngs={areaCoordinates}
    options={{
      color: 'blue',
      fillColor: '#30f',
      fillOpacity: 0.3
    }}
  />
</Leaflet>
```

### Response
N/A (Component renders a map with polylines and polygons)
```

--------------------------------

### Create Custom Leaflet Icon with Astro

Source: https://github.com/pascal-brand38/astro-leaflet/blob/main/README.md

This snippet demonstrates how to create a custom divicon for use in Leaflet markers within an Astro project. It requires the CreateLeafletIcon component to be implemented before the Leaflet component. Currently, only divicons are supported. The styling for the custom icon is applied using global CSS.

```astro
<CreateLeafletIcon
  name='name of the icon to be used in markers'
  options={{
    className:"leaflet-icon-myicon",
    iconSize: [20,20]
    ...
  }}/>
<Leaflet options={options}/>

<style is:global>
	/* class definition used to define the custom icon */
	.leaflet-icon-myicon {
		background:red;
		border:5px solid rgba(255,255,255,0.5);
		border-radius:50%;
	}
</style>
```

--------------------------------

### Add Multiple Tile Layers and Overlays in Astro Leaflet

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Demonstrates how to add multiple tile layers to a Leaflet map in Astro, allowing for overlays like street labels on satellite imagery. The `<TileLayer>` component is used for this purpose, with options for opacity to blend layers effectively.

```jsx
---
import { Leaflet, TileLayer } from "astro-leaflet";
---

<Leaflet options={{
  tileByName: 'Google&type=satellite',
  center: [40.7128, -74.0060],
  zoom: 12
}}>
  <!-- Overlay street labels on satellite imagery -->
  <TileLayer
    tileByName='Google&type=hybrid'
    options={{
      opacity: 0.7
    }}
  />
</Leaflet>
```

--------------------------------

### Create Circles and Popups on Leaflet Map in Astro

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Explains how to draw circular overlays and add interactive popups to a Leaflet map in Astro. The `<Circle>` component allows for defining radius, color, and fill properties, while the `<Popup>` component can display content on markers or other map features, with an option to open automatically.

```jsx
---
import { Leaflet, Circle, Marker, Popup } from "astro-leaflet";
---

<Leaflet options={{ center: [51.508, -0.11], zoom: 13 }}>
  <!-- Circle with 500m radius -->
  <Circle
    latlng={[51.508, -0.11]}
    options={{
      radius: 500,
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5
    }}
  >
    <Popup content="500m radius from center" open={true} />
  </Circle>

  <!-- Marker with popup -->
  <Marker latlng={[51.5, -0.09]} options={{ title: "London" }}>
    <Popup content="<b>London</b><br>Capital of England" />
  </Marker>
</Leaflet>
```

--------------------------------

### Markers with Custom Icons

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Add markers to the map using the `<Marker>` component. Custom icons can be defined using `<CreateLeafletIcon>` and referenced by `astroIconName`.

```APIDOC
## Markers with Custom Icons

### Description
The `<Marker>` component adds clickable icons to the map, with support for custom styling through `<CreateLeafletIcon>`.

### Method
N/A (Component-based)

### Endpoint
N/A (Component-based)

### Parameters
#### Leaflet Component Props
- **options** (object) - Map configuration options (see Basic Map Component).
  - **markers** (array) - Optional - An array of marker configurations.
    - **latlng** (array) - Latitude and longitude for the marker [lat, lng].
    - **options** (object) - Optional - Marker specific options (e.g., title).
    - **astroIconName** (string) - Optional - Name of the custom icon defined with `<CreateLeafletIcon>`.

#### Marker Component Props
- **latlng** (array) - Latitude and longitude for the marker [lat, lng].
- **options** (object) - Optional - Marker specific options (e.g., title).
- **astroIconName** (string) - Optional - Name of the custom icon defined with `<CreateLeafletIcon>`.

#### CreateLeafletIcon Component Props
- **name** (string) - Required - The name to reference this icon by in `astroIconName`.
- **options** (object) - Required - Icon configuration options (e.g., className, iconSize).

### Request Example
```jsx
---
import { Leaflet, CreateLeafletIcon, Marker } from "astro-leaflet";

const options = {
  tileByName: 'Google&type=street',
  center: [48.8566, 2.3522],
  zoom: 13,
  markers: [
    { latlng: [48.8566, 2.3522], options: { title: "Paris" } },
    {
      latlng: [48.8584, 2.2945],
      options: { title: "Eiffel Tower" },
      astroIconName: 'custom-icon'
    }
  ]
};
---

<CreateLeafletIcon
  name='custom-icon'
  options={{
    className: "leaflet-icon-custom",
    iconSize: [20, 20]
  }}
/>

<Leaflet options={options}>
  <Marker latlng={[48.8738, 2.2950]} options={{ title: "Arc de Triomphe" }} />
</Leaflet>

<style is:global>
  .leaflet-icon-custom {
    background: red;
    border: 5px solid rgba(255,255,255,0.5);
    border-radius: 50%;
  }
</style>
```

### Response
N/A (Component renders a map with markers)
```

--------------------------------

### Multiple Tile Layers and Overlays

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Add additional tile layers or overlays to the map using the `<TileLayer>` component. This allows for layering different map data, such as satellite imagery with street labels.

```APIDOC
## Multiple Tile Layers and Overlays

### Description
The `<TileLayer>` component adds additional tile layers on top of the base map. This is useful for overlaying different map data.

### Method
N/A (Component-based)

### Endpoint
N/A (Component-based)

### Parameters
#### Leaflet Component Props
- **options** (object) - Map configuration options (see Basic Map Component).

#### TileLayer Component Props
- **tileByName** (string) - Optional - Predefined tile provider name for the overlay.
- **tileLayer** (string) - Optional - Custom tile layer URL for the overlay.
- **options** (object) - Optional - Options for the tile layer (e.g., opacity).

### Request Example
```jsx
---
import { Leaflet, TileLayer } from "astro-leaflet";
---

<Leaflet options={{
  tileByName: 'Google&type=satellite',
  center: [40.7128, -74.0060],
  zoom: 12
}}>
  <TileLayer
    tileByName='Google&type=hybrid'
    options={{
      opacity: 0.7
    }}
  />
</Leaflet>
```

### Response
N/A (Component renders a map with multiple tile layers
```

--------------------------------

### Display Google Satellite Maps with Astro Leaflet

Source: https://github.com/pascal-brand38/astro-leaflet/blob/main/README.md

Shows how to configure the Leaflet component to display Google satellite imagery. This is achieved by setting the 'tileByName' option to 'Google'.

```html
<Leaflet options={{ tileByName: 'Google' }} />
```

--------------------------------

### Automatically Center Map with FitBounds

Source: https://github.com/pascal-brand38/astro-leaflet/blob/main/README.md

The FitBounds component automatically centers the map to fit specific elements, such as the points of a polyline. It should be placed within the slot of the element it needs to center on.

```javascript
<FitBounds/>
```

--------------------------------

### Access Astro Leaflet Map Objects from Client Code

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Provides helper functions to retrieve Leaflet map instances from client-side JavaScript for programmatic manipulation. This allows for dynamic updates to the map, such as adding markers or changing the view based on user interactions or other events. It requires the 'astro-leaflet' library and exposes functions like getMapFromId and getMapFromElement.

```jsx
---
import { Leaflet, Marker } from "astro-leaflet";
---

<Leaflet id="my-map" options={{ center: [51.505, -0.09], zoom: 13 }}>
  <Marker latlng={[51.5, -0.09]} />
</Leaflet>

<script>
  import { getMapFromId, getMapFromElement } from 'astro-leaflet';

  // Get map by ID
  const map = getMapFromId('my-map');
  if (map) {
    map.on('click', (e) => {
      console.log('Map clicked at:', e.latlng);

      // Add marker at clicked location
      L.marker(e.latlng).addTo(map);
    });

    // Programmatically change view
    setTimeout(() => {
      map.setView([48.8566, 2.3522], 10);
    }, 3000);
  }

  // Get map from DOM element
  const element = document.getElementById('my-map');
  const mapFromEl = getMapFromElement(element);
</script>
```

--------------------------------

### Draw Polyline Overlays on Map

Source: https://github.com/pascal-brand38/astro-leaflet/blob/main/README.md

The Polyline component is used to draw polyline overlays on a map. It requires an array of LatLngTuple for the coordinates and accepts optional Leaflet options for styling the polyline.

```javascript
<Polyline
  latlngs={array of LatLngTuple[]}
  options={{  leaflet options of polyline() }}>
```

--------------------------------

### Add Markers with Custom Icons on Leaflet Map in Astro

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Illustrates adding clickable markers to a Leaflet map in Astro using the `<Marker>` component. It also shows how to define and use custom marker icons with the `<CreateLeafletIcon>` component, including basic CSS styling for the custom icon.

```jsx
---
import { Leaflet, CreateLeafletIcon, Marker } from "astro-leaflet";

const options = {
  tileByName: 'Google&type=street',
  center: [48.8566, 2.3522],
  zoom: 13,
  markers: [
    { latlng: [48.8566, 2.3522], options: { title: "Paris" } },
    {
      latlng: [48.8584, 2.2945],
      options: { title: "Eiffel Tower" },
      astroIconName: 'custom-icon'
    }
  ]
};
---

<CreateLeafletIcon
  name='custom-icon'
  options={{
    className: "leaflet-icon-custom",
    iconSize: [20, 20]
  }}
/>

<Leaflet options={options}>
  <Marker latlng={[48.8738, 2.2950]} options={{ title: "Arc de Triomphe" }} />
</Leaflet>

<style is:global>
  .leaflet-icon-custom {
    background: red;
    border: 5px solid rgba(255,255,255,0.5);
    border-radius: 50%;
  }
</style>
```

--------------------------------

### Render GeoJSON Data with Astro Leaflet

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Renders GeoJSON geographic data with custom styling and interactions using the GeoJson component. It requires the 'astro-leaflet' library and defines GeoJSON data and a function to determine feature colors based on properties. The output is a Leaflet map with the GeoJSON layer styled and popups enabled. Client-side JavaScript can also interact with the GeoJSON layer.

```jsx
---
import { Leaflet, GeoJson } from "astro-leaflet";

const geojsonData = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "name": "Region A", "density": 424 },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[
          [-73.9857, 40.7484],
          [-73.9857, 40.8484],
          [-73.8857, 40.8484],
          [-73.8857, 40.7484],
          [-73.9857, 40.7484]
        ]]
      }
    }
  ]
};

function getColor(density) {
  return density > 1000 ? '#800026' :
         density > 500  ? '#BD0026' :
         density > 200  ? '#E31A1C' :
         density > 100  ? '#FC4E2A' :
                          '#FED976';
}
---

<Leaflet options={{ center: [40.8, -73.93], zoom: 11 }}>
  <GeoJson
    id="geojson-layer"
    geojson={geojsonData}
    options={{
      style: (feature) => ({
        fillColor: getColor(feature.properties.density),
        weight: 2,
        opacity: 1,
        color: 'white',
        fillOpacity: 0.7
      }),
      onEachFeature: (feature, layer) => {
        layer.bindPopup(`${feature.properties.name}: ${feature.properties.density}`);
      }
    }}
  />
</Leaflet>

<script>
  import { getLeafletFromId } from 'astro-leaflet';

  // Access GeoJSON layer from client code
  const geoJsonLayer = getLeafletFromId('geojson-layer');
  if (geoJsonLayer) {
    geoJsonLayer.on('click', (e) => {
      console.log('Clicked feature:', e.layer.feature);
    });
  }
</script>
```

--------------------------------

### Display Image Overlay on Astro Leaflet Map

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Displays a custom image over specific geographic bounds using the ImageOverlay component. This component takes an image URL and bounds as input, allowing for the overlay of historical maps or custom imagery. It requires the 'astro-leaflet' library and Leaflet to be available.

```jsx
---
import { Leaflet, ImageOverlay } from "astro-leaflet";
---

<Leaflet options={{ center: [40.7439, -74.1724], zoom: 13 }}>
  <ImageOverlay
    imageUrl="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
    bounds={[[40.712216, -74.22655], [40.773941, -74.1724]]}
    options={{
      opacity: 0.7,
      interactive: true
    }}
  />
</Leaflet>
```

--------------------------------

### Draw Polylines and Polygons on Leaflet Map in Astro

Source: https://context7.com/pascal-brand38/astro-leaflet/llms.txt

Shows how to draw vector shapes on a Leaflet map in Astro. The `<Polyline>` component is used for lines with customizable color and weight, while the `<Polygon>` component draws filled areas. The `<FitBounds>` component automatically adjusts the map view to encompass the drawn shapes.

```jsx
---
import { Leaflet, Polyline, Polygon, FitBounds } from "astro-leaflet";

const routeCoordinates = [
  [40.7580, -73.9855],
  [40.7614, -73.9776],
  [40.7489, -73.9680],
  [40.7420, -73.9875]
];

const areaCoordinates = [
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
];
---

<Leaflet options={{ center: [40.7580, -73.9855], zoom: 13 }}>
  <!-- Draw a red polyline route -->
  <Polyline
    latlngs={routeCoordinates}
    options={{
      color: 'red',
      weight: 5,
      opacity: 0.7
    }}
  >
    <!-- Automatically fit map bounds to show entire polyline -->
    <FitBounds />
  </Polyline>

  <!-- Draw a blue polygon area -->
  <Polygon
    latlngs={areaCoordinates}
    options={{
      color: 'blue',
      fillColor: '#30f',
      fillOpacity: 0.3
    }}
  />
</Leaflet>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.