### Install svelte-maplibre and maplibre-gl

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/README.md

Install the core library and its peer dependency using npm.

```bash
npm install svelte-maplibre maplibre-gl
```

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

### LineLayer Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Example of how to use the DeckGlLayer component with a LineLayer to render lines.

```APIDOC
## LineLayer

### Description
Renders lines with customizable width and color.

### Example

```svelte
<DeckGlLayer
  type={LineLayer}
  data={linePaths}
  getSourcePosition={(d) => d.start}
  getTargetPosition={(d) => d.end}
  getColor={(d) => d.color}
  getWidth={(d) => d.width}
  widthMinPixels={1}
  widthScale={20}
/>
```
```

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

### Install svelte-maplibre

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/README.md

Use npm to install the svelte-maplibre package.

```bash
npm install svelte-maplibre
```

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

### LineLayer Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Renders lines with customizable width and color. Assumes 'linePaths' data is available.

```svelte
<DeckGlLayer
  type={LineLayer}
  data={linePaths}
  getSourcePosition={(d) => d.start}
  getTargetPosition={(d) => d.end}
  getColor={(d) => d.color}
  getWidth={(d) => d.width}
  widthMinPixels={1}
  widthScale={20}
/>
```

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

### PolygonLayer Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Example of how to use the DeckGlLayer component with a PolygonLayer to render filled polygons.

```APIDOC
## PolygonLayer

### Description
Renders filled polygons.

### Example

```svelte
<DeckGlLayer
  type={PolygonLayer}
  data={polygons}
  getPolygon={(d) => d.coordinates}
  getFillColor={(d) => d.fillColor}
  getLineColor={[0, 0, 0]}
  getLineWidth={10}
  lineWidthMinPixels={1}
/>
```
```

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

### Install Optional Peer Dependencies

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/README.md

Install optional dependencies for advanced features like Deck.gl layers or TopoJSON sources.

```bash
npm install @deck.gl/core @deck.gl/layers @deck.gl/mapbox  # For DeckGlLayer
npm install topojson-client                                # For TopoJSON source
```

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

### ScatterplotLayer Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Example of how to use the DeckGlLayer component with a ScatterplotLayer to render points.

```APIDOC
## ScatterplotLayer

### Description
Renders points with customizable size and color.

### Example

```svelte
<script>
  import { DeckGlLayer } from 'svelte-maplibre';
  import { ScatterplotLayer } from '@deck.gl/layers';

  const data = [
    { position: [0, 0], size: 100, color: [255, 0, 0, 255] },
    { position: [1, 1], size: 150, color: [0, 255, 0, 255] }
  ];
</script>

<DeckGlLayer
  type={ScatterplotLayer}
  data={data}
  getPosition={(d) => d.position}
  getRadius={(d) => d.size}
  getColor={(d) => d.color}
  radiusScale={1}
  radiusMinPixels={2}
  radiusMaxPixels={30}
/>
```
```

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

### HexagonLayer Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Example of how to use the DeckGlLayer component with a HexagonLayer for aggregating points.

```APIDOC
## HexagonLayer

### Description
Aggregates points into hexagon bins with optional density coloring.

### Example

```svelte
<DeckGlLayer
  type={HexagonLayer}
  data={points}
  getPosition={(d) => d.position}
  radius={1000}
  colorRange={[
    [0, 0, 255],
    [0, 255, 0],
    [255, 255, 0],
    [255, 0, 0]
  ]}
  elevationRange={[0, 1000]}
/>
```
```

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

### MapLibre Component Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/maplibre-component.md

A practical example demonstrating how to use the MapLibre component in a Svelte application, including binding map properties and handling click events.

```APIDOC
## MapLibre Component Usage Example

### Description

This example shows how to integrate the MapLibre component into a Svelte application. It demonstrates binding the `map`, `center`, and `zoom` properties, setting the map style, and handling the `onclick` event.

### Usage

```svelte
<script>
  import { MapLibre } from 'svelte-maplibre';

  let map;
  let center = [0, 20];
  let zoom = 4;

  function handleClick(e) {
    console.log('Clicked at:', e.lngLat);
  }
</script>

<MapLibre
  bind:map
  bind:center
  bind:zoom
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class="map-container"
  standardControls
  hash
  onclick={handleClick}
>
  {#snippet children({ map, loaded })}
    {#if loaded}
      <!-- Add layers and sources here -->
    {/if}
  {/snippet}
</MapLibre>

<style>
  :global(.map-container) {
    width: 100%;
    height: 600px;
  }
</style>
```
```

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

### ScatterplotLayer Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Renders points with customizable size and color using ScatterplotLayer. Ensure '@deck.gl/layers' is imported.

```svelte
<script>
  import { DeckGlLayer } from 'svelte-maplibre';
  import { ScatterplotLayer } from '@deck.gl/layers';

  const data = [
    { position: [0, 0], size: 100, color: [255, 0, 0, 255] },
    { position: [1, 1], size: 150, color: [0, 255, 0, 255] }
  ];
</script>

<DeckGlLayer
  type={ScatterplotLayer}
  data={data}
  getPosition={(d) => d.position}
  getRadius={(d) => d.size}
  getColor={(d) => d.color}
  radiusScale={1}
  radiusMinPixels={2}
  radiusMaxPixels={30}
/>
```

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

### NavigationControl Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/control-components.md

Standard zoom and rotation controls for the map. This example shows how to configure its position and visibility of compass and zoom buttons.

```svelte
<NavigationControl
  position="top-right"
  showCompass={true}
  showZoom={true}
  visualizePitch={true}
/>
```

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

### PolygonLayer Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Renders filled polygons. Assumes 'polygons' data is available.

```svelte
<DeckGlLayer
  type={PolygonLayer}
  data={polygons}
  getPolygon={(d) => d.coordinates}
  getFillColor={(d) => d.fillColor}
  getLineColor={[0, 0, 0]}
  getLineWidth={10}
  lineWidthMinPixels={1}
/>
```

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

### BackgroundLayer Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/layer-components.md

Demonstrates how to use the BackgroundLayer component to set a background color and opacity for the map. Ensure the component is imported before use.

```svelte
<BackgroundLayer
  paint={{
    'background-color': '#87ceeb',
    'background-opacity': 1
  }}
/>
```

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

### GeoJsonLayer Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Example of how to use the DeckGlLayer component with a GeoJsonLayer to render GeoJSON features.

```APIDOC
## GeoJsonLayer

### Description
Renders GeoJSON features with automatic geometry handling.

### Example

```svelte
<script>
  import { GeoJsonLayer } from '@deck.gl/layers';

  const geoData = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [0, 0] },
        properties: { name: 'Point A', value: 100 }
      }
    ]
  };
</script>

<DeckGlLayer
  type={GeoJsonLayer}
  data={geoData}
  getFillColor={(f) => [f.properties.value * 2, 100, 200]}
  getLineColor={[255, 255, 255]}
  getLineWidth={2}
  pointRadiusMinPixels={4}
/>
```
```

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

### Fit Bounds Example with Padding

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/configuration.md

Example of fitting map bounds with specific padding and maximum zoom. Ensures the map view respects the defined padding around the bounds.

```svelte
<MapLibre
  bounds={[[min_lng, min_lat], [max_lng, max_lat]]}
  fitBoundsOptions={{
    padding: { top: 100, bottom: 100, left: 50, right: 50 },
    maxZoom: 15,
    duration: 1000
  }}
/>
```

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

### Manually Add Standard Controls

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/control-components.md

This code demonstrates the equivalent manual setup for adding NavigationControl, GeolocateControl, FullscreenControl, and ScaleControl individually with specified positions and options.

```svelte
<MapLibre style="...">
  <NavigationControl position="top-right" />
  <GeolocateControl position="top-right" fitBoundsOptions={{ maxZoom: 12 }} />
  <FullscreenControl position="top-right" />
  <ScaleControl position="top-right" />
</MapLibre>
```

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

### Using flush to prepare MapLibre configuration

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/data-utilities.md

This example shows how to use the `flush` utility to clean a configuration object before passing it to a MapLibre component. It ensures that only valid, defined properties are used, preventing potential errors.

```svelte
<script>
  import { flush } from 'svelte-maplibre/flush.ts';

  const config = flush({
    center: [0, 0],
    zoom: undefined,
    pitch: 0,
    bearing: null,
    minZoom: 5
  });
  
  // Result: { center: [0, 0], pitch: 0, minZoom: 5 }
  // undefined and null values removed
</script>

<MapLibre {...config} />
```

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

### HexagonLayer Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Aggregates points into hexagon bins with optional density coloring. Assumes 'points' data is available.

```svelte
<DeckGlLayer
  type={HexagonLayer}
  data={points}
  getPosition={(d) => d.position}
  radius={1000}
  colorRange={[
    [0, 0, 255],
    [0, 255, 0],
    [255, 255, 0],
    [255, 0, 0]
  ]}
  elevationRange={[0, 1000]}
/>
```

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

### GeolocateControl Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/control-components.md

A control to locate the user and center the map on their position. This example configures its position, fit bounds options, and user tracking behavior.

```svelte
<GeolocateControl
  position="top-right"
  fitBoundsOptions={{ maxZoom: 15 }}
  trackUserLocation={false}
/>
```

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

### GeoJsonLayer Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Renders GeoJSON features with automatic geometry handling. Requires '@deck.gl/layers' import.

```svelte
<script>
  import { GeoJsonLayer } from '@deck.gl/layers';

  const geoData = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [0, 0] },
        properties: { name: 'Point A', value: 100 }
      }
    ]
  };
</script>

<DeckGlLayer
  type={GeoJsonLayer}
  data={geoData}
  getFillColor={(f) => [f.properties.value * 2, 100, 200]}
  getLineColor={[255, 255, 255]}
  getLineWidth={2}
  pointRadiusMinPixels={4}
/>
```

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

### Using JoinedData Component for Feature State

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/data-utilities.md

This example demonstrates how to use the JoinedData component to apply external data to map features. It shows the setup of GeoJSON data and the associated data array, and how to use JoinedData with a FillLayer to style features based on their state.

```svelte
<script>
  import { GeoJSON, JoinedData, FillLayer } from 'svelte-maplibre';

  const geoData = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: 1,
        geometry: { type: 'Polygon', coordinates: [...] },
        properties: { name: 'Region A' }
      },
      {
        type: 'Feature',
        id: 2,
        geometry: { type: 'Polygon', coordinates: [...] },
        properties: { name: 'Region B' }
      }
    ]
  };

  let stats = [
    { id: 1, value: 100, color: '#ff0000' },
    { id: 2, value: 250, color: '#00ff00' }
  ];
</script>

<GeoJSON data={geoData}>
  <JoinedData data={stats} idCol="id" />

  <FillLayer
    paint={{
      'fill-color': ['feature-state', 'color'],
      'fill-opacity': 0.7
    }}
  />
</GeoJSON>
```

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

### CircleLayer Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/layer-components.md

Demonstrates how to use the CircleLayer component with interpolated radius and matched color based on feature properties. It also shows how to apply a filter and interactive properties.

```svelte
<CircleLayer
  paint={{
    'circle-radius': [
      'interpolate', ['linear'], ['zoom'],
      0, 2,
      20, 20
    ],
    'circle-color': [
      'match', ['get', 'type'],
      'type-a', '#ff0000',
      'type-b', '#00ff00',
      '#cccccc'
    ]
  }}
  filter={['==', ['get', 'active'], true]}
  interactive
  hoverCursor="pointer"
  onclick={handleClick}
/>
```

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

### Example: Clustering with Aggregations

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/configuration.md

Demonstrates how to enable clustering with custom aggregations for properties like total count, average value, and maximum value. This snippet also shows how to use these aggregated properties in paint expressions for circle layers.

```svelte
<GeoJSON
  data={data}
  cluster={{
    minPoints: 2,
    maxZoom: 14,
    radius: 50,
    properties: {
      total_count: ['sum', ['get', 'count']],
      avg_value: ['/', ['sum', ['get', 'value']], ['get', 'point_count']],
      max_value: ['max', ['get', 'value']]
    }
  }}
>
  <!-- Use cluster properties in paint expressions -->
  <CircleLayer
    paint={{
      'circle-radius': [
        'case',
        ['has', 'point_count'],
        ['step', ['get', 'point_count'], 8, 10, 12, 50, 16],
        6
      ],
      'circle-color': [
        'interpolate',
        ['linear'],
        ['get', 'total_count'],
        0, '#51bbd6',
        100, '#f1f075',
        750, '#f28cb1'
      ]
    }}
  />
</GeoJSON>
```

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

### getId Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/context-utilities.md

Demonstrates how to use the `getId` function to generate a unique source ID in a Svelte component.

```svelte
<script>
  import { getId } from 'svelte-maplibre/context.svelte.js';

  const sourceId = getId('custom-source');
</script>
```

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

### isDeckGlMouseEvent Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/context-utilities.md

Shows how to use the `isDeckGlMouseEvent` type guard within a Svelte component to handle different event types.

```svelte
<script>
  import { isDeckGlMouseEvent } from 'svelte-maplibre/context.svelte.js';

  function handleEvent(e) {
    if (isDeckGlMouseEvent(e)) {
      console.log('Deck.GL event:', e.object);
    }
  }
</script>
```

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

### Example Usage of CustomImageSpec with URL

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/types.md

Demonstrates how to define an array of custom images using the CustomImageSpec, specifying IDs, URLs, and optional metadata for each image.

```typescript
const images: CustomImageSpec[] = [
  {
    id: 'marker-icon',
    url: 'https://example.com/marker.png',
    options: { width: 32, height: 32, sdf: false }
  }
];
```

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

### VectorTileSource with PMTiles and LineLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/source-components.md

Example demonstrating how to use VectorTileSource with the PMTiles protocol for local vector tile files. This snippet shows how to render roads using a LineLayer.

```svelte
<VectorTileSource
  url="pmtiles:///path/to/file.pmtiles"
>
  <LineLayer sourceLayer="roads" paint={{...}} />
</VectorTileSource>
```

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

### ImageSource Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/source-components.md

Adds a static image source with a RasterLayer. Ensure the URL points to a valid georeferenced image and coordinates are provided in the correct order.

```svelte
<ImageSource
  url="https://example.com/historical-map.png"
  coordinates={
    [[-80.425, 46.437],
    [-71.516, 46.437],
    [-71.516, 37.936],
    [-80.425, 37.936]]
  }>
  <RasterLayer
    paint={{
      'raster-opacity': 0.85
    }}
  />
</ImageSource>
```

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

### Basic Circle Layer with Click Interaction

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/layer-components.md

This example demonstrates how to add a circle layer to the map using the `Layer` component. It configures the layer's appearance with paint properties and enables click events to log clicked features.

```svelte
<script>
  import { Layer, GeoJSON } from 'svelte-maplibre';
  
  let features = { type: 'FeatureCollection', features: [...] };
  
  function handleClick(e) {
    console.log('Clicked features:', e.features);
  }
</script>

<GeoJSON data={features}>
  <Layer
    type="circle"
    paint={{
      'circle-radius': 6,
      'circle-color': '#088',
      'circle-opacity': 0.8
    }}
    interactive
    onclick={handleClick}
  />
</GeoJSON>
```

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

### Component Nesting Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/README.md

Demonstrates the hierarchical structure of Svelte MapLibre components using Svelte's context system. This pattern allows child components to inherit context from their parents.

```svelte
<MapLibre style="...">
  <!-- Provides MapContext -->
  
  <GeoJSON data={...}>
    <!-- Provides source context -->
    
    <CircleLayer paint={{...}}>
      <!-- Inherits both map and source context -->
      
      <Popup>
        <!-- Inherits all contexts -->
      </Popup>
    </CircleLayer>
  </GeoJSON>
</MapLibre>
```

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

### Svelte MapLibre Manual Popup Control

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/marker-popup-components.md

This example shows how to manually control the Popup's visibility and position using a bindable 'open' property and 'lngLat'. The popup is set to open only when explicitly triggered by external logic.

```svelte
<script>
  let popupOpen = false;
  let popupPosition = [0, 0];
</script>

<Popup bind:open={popupOpen} lngLat={popupPosition} openOn="manual">
  {#snippet children({ close })}
    <div>
      <h3>Manual Popup</h3>
      <button onclick={close}>Close</button>
    </div>
  {/snippet}
</Popup>

<button onclick={() => {
  popupOpen = true;
  popupPosition = [10, 20];
}}>
  Open Popup
</button>
```

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

### Terrain Component Usage

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/source-components.md

Example of using the Terrain component with RasterDEMTileSource and HillshadeLayer. Ensure the RasterDEMTileSource is defined before the Terrain component.

```svelte
<RasterDEMTileSource
  id="dem"
  url="https://api.mapbox.com/raster/v1/..."
>
  <!-- Layer for dem would go here -->
</RasterDEMTileSource>

<Terrain source="dem" exaggeration={1.5} />

<HillshadeLayer
  source="dem"
  paint={{
    'hillshade-illumination-direction': 335,
    'hillshade-exaggeration': 0.3
  }}
/>
```

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

### MapEvents Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Demonstrates how to use the MapEvents component to handle map interactions like clicks and movements. Import MapLibre and MapEvents, define event handler functions, and pass them as props to the MapEvents component nested within MapLibre.

```svelte
<script>
  import { MapLibre, MapEvents } from 'svelte-maplibre';

  let isMoving = false;

  function handleMoveStart() {
    isMoving = true;
  }

  function handleMoveEnd(e) {
    isMoving = false;
    console.log('Map center:', e.target.getCenter());
  }

  function handleClick(e) {
    console.log('Clicked at:', e.lngLat);
  }
</script>

<MapLibre style="...">
  <MapEvents
    onclick={handleClick}
    onmovestart={handleMoveStart}
    onmoveend={handleMoveEnd}
  />

  {#if isMoving}
    <p>Map is moving...</p>
  {/if}
</MapLibre>
```

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

### MapLibre Component Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/maplibre-component.md

Demonstrates how to use the MapLibre component in a Svelte application, including binding map properties, handling click events, and using the children slot for conditional rendering after the map loads.

```typescript
{ 
  map: maplibregl.Map;              // The MapLibre instance
  loaded: boolean;                   // Whether the map has finished loading
  loadedImages: Set<string>;         // IDs of successfully loaded custom images
  allImagesLoaded: boolean;          // Whether all custom images are loaded
}
```

```svelte
<script>
  import { MapLibre } from 'svelte-maplibre';

  let map;
  let center = [0, 20];
  let zoom = 4;

  function handleClick(e) {
    console.log('Clicked at:', e.lngLat);
  }
</script>

<MapLibre
  bind:map
  bind:center
  bind:zoom
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class="map-container"
  standardControls
  hash
  onclick={handleClick}
>
  {#snippet children({ map, loaded })}
    {#if loaded}
      <!-- Add layers and sources here -->
    {/if}
  {/snippet}
</MapLibre>

<style>
  :global(.map-container) {
    width: 100%;
    height: 600px;
  }
</style>
```

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

### Integrating Deck.GL Scatterplot Layer with MapLibre

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/data-utilities.md

This example demonstrates how to use the DeckGlLayer component to render a scatterplot layer from Deck.GL within a MapLibre map. It shows how to pass layer type, data, and event handlers.

```svelte
<script>
  import { MapLibre, DeckGlLayer } from 'svelte-maplibre';
  import { ScatterplotLayer } from '@deck.gl/layers';

  const data = [
    { position: [0, 0], color: [255, 0, 0, 255], size: 100 },
    { position: [10, 10], color: [0, 255, 0, 255], size: 150 }
  ];

  function handleClick(e) {
    console.log('Clicked:', e.object);
  }
</script>

<MapLibre style="...">
  <DeckGlLayer
    type={ScatterplotLayer}
    data={data}
    getPosition={(d) => d.position}
    getColor={(d) => d.color}
    getRadius={(d) => d.size}
    interactive
    onclick={handleClick}
  />
</MapLibre>
```

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

### Custom Control Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/control-components.md

Use the Control component to add custom content to a specific position on the map. You can apply custom styling to the control container and its content.

```svelte
<Control position="top-left" class="custom-control">
  <div class="control-content">
    <p>Custom control content</p>
  </div>
</Control>

<style>
  :global(.custom-control) {
    background: white;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  }

  :global(.control-content) {
    margin: 0;
    font-size: 14px;
  }
</style>
```

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

### MapLibre API Equivalents for Feature State

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/data-utilities.md

These examples show the direct MapLibre API calls that are equivalent to the actions performed by the JoinedData component. They illustrate setting and removing feature state for specific features and properties.

```javascript
map.setFeatureState({ id: 1, source: sourceId }, { value: 100, color: '#ff0000' });
map.setFeatureState({ id: 2, source: sourceId }, { value: 250, color: '#00ff00' });
```

```javascript
map.removeFeatureState({ id: 1, source: sourceId }, 'value');
map.removeFeatureState({ id: 1, source: sourceId }, 'color');
```

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

### Bindable Props Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/README.md

Shows how to use Svelte's `bind:` directive for two-way data binding with MapLibre component properties like map instance, center, zoom, and loaded status.

```svelte
<MapLibre
  bind:map={mapInstance}
  bind:center={currentCenter}
  bind:zoom={currentZoom}
  bind:loaded={isMapReady}
/>
```

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

### ControlButton Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/control-components.md

A custom button styled as a MapLibre control, suitable for use within ControlGroup. It accepts a title for tooltips and an onclick handler.

```svelte
<ControlButton
  title="Reset view"
  onclick={() => {
    // Reset map view
  }}>
  ⊙
</ControlButton>
```

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

### Control Group Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/control-components.md

Group multiple controls together using the ControlGroup component. This is useful for organizing related controls that should appear in the same map position, stacked vertically.

```svelte
<ControlGroup position="top-left">
  <NavigationControl />
  <CustomControl />
</ControlGroup>
```

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

### Svelte MapLibre Popup with Hover Interaction

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/marker-popup-components.md

This example demonstrates how to use the Popup component nested within a GeoJSON source and CircleLayer. It opens on hover and displays feature properties. Ensure the Popup is nested within a layer component for automatic feature querying.

```svelte
<script>
  import { Popup, CircleLayer, GeoJSON } from 'svelte-maplibre';

  const data = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: 1,
        geometry: { type: 'Point', coordinates: [0, 0] },
        properties: { name: 'City', population: 1000000 }
      }
    ]
  };
</script>

<GeoJSON data={data}>
  <CircleLayer
    paint={{
      'circle-radius': 8,
      'circle-color': '#0066cc'
    }}
  >
    <Popup openOn="hover">
      {#snippet children({ data })}
        {#if data}
          <div class="popup-content">
            <strong>{data.properties.name}</strong><br />
            Population: {data.properties.population.toLocaleString()}
          </div>
        {/if}
      {/snippet}
    </Popup>
  </CircleLayer>
</GeoJSON>

<style>
  :global(.popup-content) {
    padding: 8px;
    font-size: 14px;
  }
</style>
```

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

### Usage of diffApplier for layer paint properties

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/data-utilities.md

This example demonstrates how to use `diffApplier` to monitor changes in paint properties of a MapLibre layer and apply those changes to the map. Ensure the `map` and `layer` objects are available in the scope.

```svelte
<script>
  import { diffApplier } from 'svelte-maplibre/compare.ts';

  const paintProps = $state({ 'circle-radius': 6, 'circle-color': '#088' });

  const applyPaint = diffApplier((key, value, lastValue) => {
    if (value !== lastValue) {
      console.log(`Paint property ${key} changed: ${lastValue} → ${value}`);
      if (map && layer) {
        map.setPaintProperty(layer, key, value);
      }
    }
  });

  $effect(() => {
    applyPaint(paintProps);
  });
</script>
```

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

### VectorTileSource with SymbolLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/source-components.md

Example of using VectorTileSource with a SymbolLayer to display point-of-interest labels. Ensure the 'poi_label' sourceLayer exists in your vector tiles.

```svelte
<VectorTileSource
  url="https://api.mapbox.com/data/v1/tilesets Συνεχίστε την ανάγνωση..."
  attribution="© Mapbox"
>
  <SymbolLayer
    sourceLayer="poi_label"
    layout={{
      'text-field': ['get', 'name'],
      'text-size': 12
    }}
  />
</VectorTileSource>
```

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

### Get Source Context ID

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/context-utilities.md

Retrieves the ID of the nearest parent source context. Returns undefined if not within a source context.

```typescript
function getSource(): Box<string> | undefined
```

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

### Get Layer Context ID

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/context-utilities.md

Retrieves the ID of the nearest parent layer context. Returns undefined if not within a layer context.

```typescript
function getLayer(): Box<string> | undefined
```

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

### Get Zoom Limits

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/context-utilities.md

Retrieves the effective zoom limits, considering nested ZoomRange contexts. Returns an object with minzoom and maxzoom properties.

```typescript
function getZoomLimits(): { minzoom: number; maxzoom: number }
```

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

### MapLibre Expression: Interpolated Color

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/README.md

Shows an 'interpolate' expression in MapLibre for smoothly transitioning between colors based on a data property, like 'population' in this example.

```typescript
['interpolate',
  ['linear'],
  ['get', 'population'],
  0, '#51bbd6',      // Low population: teal
  100000, '#f1f075', // Mid: yellow
  500000, '#f28cb1'  // High: pink
]
```

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

### Get LngLat Context

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/context-utilities.md

Retrieves the nearest parent LngLat context, typically used by the Marker component. Returns undefined if no LngLat context is found.

```typescript
function getLngLatContext(): Box<LngLatLike | undefined> | undefined
```

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

### Context Utilities

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/INDEX.txt

Documentation for the Context API and utility functions used for managing map state and interactions.

```APIDOC
## Context Utilities

### Description
This section details the Context API, comprising 18 functions and 4 classes, along with other utility functions. These are essential for advanced state management and interacting with the map's context.

### Endpoint
N/A (Utility functions and Context API)

### Functions
- **useMapInstance**: Hook to get the MapLibre map instance.
- **useMapState**: Hook to access and subscribe to map state changes.
- **setMapState**: Function to update the map state.

### Usage Example (useMapInstance)
```javascript
<script>
  import { useMapInstance } from 'svelte-maplibre';
  const map = useMapInstance();

  function flyToCenter() {
    map.flyTo({ center: [0, 0], zoom: 10 });
  }
</script>

<button on:click={flyToCenter}>Fly to Center</button>
```
```

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

### Add Standard Controls Automatically

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/control-components.md

Use the `standardControls` prop to automatically include NavigationControl, GeolocateControl, FullscreenControl, and ScaleControl. You can specify a position like 'top-right' or let it use the default.

```svelte
<MapLibre
  style="..."
  standardControls
  <!-- or specify position -->
  standardControls="top-right"
>
  <!-- Adds: NavigationControl, GeolocateControl, FullscreenControl, ScaleControl -->
</MapLibre>
```

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

### Vector Tile Source Configuration

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/configuration.md

Configuration for Vector Tile sources. Specify tile URLs, bounds, coordinate scheme, and zoom levels.

```typescript
interface VectorTileSourceOptions {
  url?: string;
  tiles?: string[];
  bounds?: [number, number, number, number];
  scheme?: 'xyz' | 'tms';
  promoteId?: string;
  minzoom?: number;
  maxzoom?: number;
  attribution?: string;
  volatile?: boolean;
}
```

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

### Marker and Popup Components

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/INDEX.txt

Documentation for components related to adding markers and popups to the map for user interaction.

```APIDOC
## Marker and Popup Components

### Description
This section details the Marker, DefaultMarker, MarkerLayer, and Popup components, which facilitate the display of interactive markers and associated popups on the map.

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

### Parameters
- **Marker** components typically accept `coordinates` and `options`.
- **Popup** components accept `content` and `options`.

### Usage Example
```svelte
<script>
  import { MapLibreMap, Marker, Popup } from 'svelte-maplibre';
  let showPopup = false;
</script>

<MapLibreMap>
  <Marker coordinates={[ -74.0060, 40.7128 ]}>
    <Popup bind:visible={showPopup}>
      Hello, New York!
    </Popup>
  </Marker>
</MapLibreMap>
```
```

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

### TerrainControl Usage with Map Setup

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/control-components.md

Integrate the TerrainControl to toggle terrain layers on and off. This requires a Terrain component and a RasterDEMTileSource, with the 'source' prop linking the control to the DEM source ID.

```svelte
<script>
  import { MapLibre, RasterDEMTileSource, Terrain, TerrainControl } from 'svelte-maplibre';
</script>

<MapLibre style="...">
  <RasterDEMTileSource id="dem" url="..." />
  <Terrain source="dem" exaggeration={1.5} />
  <TerrainControl source="dem" position="top-right" />
</MapLibre>
```

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

### Add API Key and Token to Map Requests

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/configuration.md

Example of a Svelte component using `transformRequest` to append an API key to the URL and set an Authorization header for all map resource requests.

```svelte
<MapLibre
  style='...' 
  transformRequest={(url, type) => ({
    url: `${url}?key=${API_KEY}`,
    headers: { 'Authorization': `Bearer ${TOKEN}` }
  })}
/>
```

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

### Raster Tile Source Configuration

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/configuration.md

Configuration for Raster Tile sources. Supports tile URLs, scheme, zoom levels, and tile size.

```typescript
interface RasterTileSourceOptions {
  url?: string;
  tiles?: string[];
  scheme?: 'xyz' | 'tms';
  bounds?: [number, number, number, number];
  minzoom?: number;
  maxzoom?: number;
  tileSize?: 256 | 512;
  attribution?: string;
  volatile?: boolean;
}
```

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

### MapLibre Expression: Conditional Color

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/README.md

An example of the MapLibre expression language using a 'case' statement to conditionally set a color based on a feature state property. Useful for interactive highlighting.

```typescript
['case',
  ['boolean', ['feature-state', 'hover'], false],
  '#ff0000',  // Red when hovered
  '#0000ff'   // Blue otherwise
]
```

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

### Import RasterTileSource

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/source-components.md

Import the RasterTileSource component from the svelte-maplibre library.

```javascript
import { RasterTileSource } from 'svelte-maplibre'
```

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

### Import RasterDEMTileSource

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/source-components.md

Import the RasterDEMTileSource component from the svelte-maplibre library.

```javascript
import { RasterDEMTileSource } from 'svelte-maplibre'
```

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

### Get Map Context

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/context-utilities.md

Retrieves the current MapContext, which includes the map instance, loading status, zoom levels, and layer information. Use this to access map properties and state within your Svelte components.

```typescript
function getMapContext(): MapContext
```

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

### Picking and Interaction

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Information about picking and interaction provided by Deck.GL layers.

```APIDOC
## Picking and Interaction

Deck.GL layers provide picking information:

```typescript
interface PickingInfo<DATA> {
  index: number;           // Index in data array (-1 if no pick)
  object: DATA | null;     // The hovered/clicked object
  picked: boolean;         // Is something picked
  x: number;               // Screen X coordinate
  y: number;               // Screen Y coordinate
  pixelRatio: number;      // Device pixel ratio
  coordinate: [number, number] | null;  // Lon/lat of the object
}
```
```

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

### Source Components

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/INDEX.txt

Documentation for all 7 types of source components, enabling the addition of various data sources to the map.

```APIDOC
## Source Components

### Description
This section covers the 7 types of source components available for integrating data into svelte-maplibre maps. Supported sources include GeoJSON, VectorTileSource, RasterTileSource, RasterDEMTileSource, ImageSource, TopoJSON, and Terrain.

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

### Parameters
Each source component requires at least an `id` and a `source` property defining the data source URL or data.

### Usage Example (GeoJSONSource)
```svelte
<script>
  import { MapLibreMap, GeoJSONSource } from 'svelte-maplibre';
  let geojsonData = { type: 'FeatureCollection', features: [] };
</script>

<MapLibreMap>
  <GeoJSONSource id="my-geojson-source" data={geojsonData} />
</MapLibreMap>
```
```

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

### Control Components

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/INDEX.txt

Documentation for the 9+ built-in control components, such as NavigationControl, GeolocateControl, and ScaleControl.

```APIDOC
## Control Components

### Description
This section covers the various control components available, including NavigationControl, GeolocateControl, FullscreenControl, ScaleControl, TerrainControl, AttributionControl, Control, ControlGroup, and ControlButton. These components add standard map UI elements.

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

### Parameters
Each control component may have specific `options` for customization.

### Usage Example (NavigationControl)
```svelte
<script>
  import { MapLibreMap, NavigationControl } from 'svelte-maplibre';
</script>

<MapLibreMap>
  <NavigationControl position="top-right" />
</MapLibreMap>
```
```

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

### Source Utilities

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/EXPORTS.md

Utilities for managing data sources in a MapLibre GL map.

```APIDOC
## Source Utilities

### Description
Functions for adding and removing data sources from the map.

### Functions
- **addSource()**: Add source to map.
- **removeSource()**: Remove source from map.
```

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

### Svelte MapLibre Package Exports Configuration

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/EXPORTS.md

This JSON defines the entry points for the svelte-maplibre package, specifying how different modules and assets can be imported.

```json
{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "svelte": "./dist/index.js",
      "default": "./dist/index.js"
    },
    "./*.css": {
      "default": "./dist/*.css"
    },
    "./*.svelte": {
      "types": "./dist/*.d.ts",
      "svelte": "./dist/*.svelte",
      "default": "./dist/*.svelte"
    },
    "./context.svelte.js": {
      "types": "./dist/context.svelte.d.ts",
      "default": "./dist/context.svelte.js"
    },
    "./expressions.js": {
      "types": "./dist/expressions.d.ts",
      "default": "./dist/expressions.js"
    },
    "./filters.js": {
      "types": "./dist/filters.d.ts",
      "default": "./dist/filters.js"
    },
    "./source.js": {
      "types": "./dist/source.d.ts",
      "default": "./dist/source.js"
    },
    "./types.js": {
      "types": "./dist/types.d.ts",
      "default": "./dist/types.js"
    }
  }
}
```

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

### Basic Svelte MapLibre Component

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/README.md

A simple Svelte component demonstrating how to initialize a MapLibre map with a GeoJSON source and a CircleLayer.

```svelte
<script>
  import { MapLibre, GeoJSON, CircleLayer } from 'svelte-maplibre';

  const data = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [0, 0] },
        properties: { name: 'Origin' }
      }
    ]
  };
</script>

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  center={[0, 0]}
  zoom={2}
  standardControls
>
  <GeoJSON data={data}>
    <CircleLayer paint={{ 'circle-radius': 8, 'circle-color': '#088' }} />
  </GeoJSON>
</MapLibre>

<style>
  :global(body) {
    margin: 0;
  }
  :global(main) {
    width: 100%;
    height: 100vh;
  }
</style>
```

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

### Image Source Configuration

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/configuration.md

Configuration for Image sources. Requires a URL and corner coordinates to define the image's geographic extent.

```typescript
interface ImageSourceOptions {
  url: string;
  coordinates: [[number, number], [number, number], [number, number], [number, number]];
}
```

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

### MapEvents and Deck.GL Integration

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/INDEX.txt

Documentation for MapEvents and Deck.GL integration utilities, enabling advanced map interactions and visualization.

```APIDOC
## MapEvents and Deck.GL Integration

### Description
This section provides documentation for `MapEvents` and utilities for integrating with Deck.GL. It covers event handling and advanced rendering capabilities.

### Endpoint
N/A (Utility functions and integration components)

### Functions/Components
- **MapEvents**: A component or utility for managing map event listeners.
- **DeckGlLayer**: A component for rendering Deck.GL layers within svelte-maplibre.

### Usage Example (DeckGlLayer)
```svelte
<script>
  import { MapLibreMap, DeckGlLayer } from 'svelte-maplibre';
  let deckGlData = [
    { position: [-74.0060, 40.7128], color: [255, 0, 0, 180], size: 100 }
  ];
  let deckGlLayers = [
    new ScatterplotLayer({
      id: 'my-scatterplot',
      data: deckGlData,
      getPosition: d => d.position,
      getFillColor: d => d.color,
      getRadius: d => d.size,
    })
  ];
</script>

<MapLibreMap>
  <DeckGlLayer layers={deckGlLayers} />
</MapLibreMap>
```
```

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

### BackgroundLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/layer-components.md

Renders a solid background color across the entire map. No source is required. It accepts 'paint' and 'layout' properties.

```APIDOC
## BackgroundLayer

### Description

Renders a solid background color across the entire map. No source required.

### Props

#### Paint Properties
- **`background-color`** (string) - Required - The background color of the map.
- **`background-pattern`** (string) - Optional - A pattern to use for the background.
- **`background-opacity`** (number) - Optional - The opacity of the background color.

#### Layout Properties
- **`visibility`** (string) - Optional - The visibility of the background layer.

### Usage Example

```svelte
<BackgroundLayer
  paint={{
    'background-color': '#87ceeb',
    'background-opacity': 1
  }}
/>
```
```

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

### Interactive Scatterplot with Deck.GL Layer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Demonstrates an interactive scatterplot using Deck.gl's ScatterplotLayer within a svelte-maplibre MapLibre component. It includes handling hover and click events to display tooltips.

```svelte
<script>
  import { MapLibre, DeckGlLayer, Popup } from 'svelte-maplibre';
  import { ScatterplotLayer } from '@deck.gl/layers';

  const data = [
    { position: [0, 0], name: 'Point A', value: 100 },
    { position: [10, 10], name: 'Point B', value: 250 }
  ];

  let hovered = null;
  let selectedObject = null;

  function handleClick(e) {
    selectedObject = e.object;
  }
</script>

<MapLibre style="...">
  <DeckGlLayer
    type={ScatterplotLayer}
    data={data}
    getPosition={(d) => d.position}
    getRadius={(d) => selectedObject === d ? 200 : 100}
    getColor={(d) => hovered === d ? [255, 200, 0] : [0, 100, 255]}
    radiusScale={1}
    interactive
    bind:hovered
    onclick={handleClick}
  />

  {#if selectedObject}
    <Popup lngLat={selectedObject.position} openOn="manual" bind:open>
      {#snippet children({ close })}
        <div>
          <h4>{selectedObject.name}</h4>
          <p>Value: {selectedObject.value}</p>
          <button onclick={close}>Close</button>
        </div>
      {/snippet}
    </Popup>
  {/if}
</MapLibre>
```

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

### Combining MapLibre and Deck.GL Layers

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/api-reference/mapevents-deckgl.md

Shows how to integrate native MapLibre layers with Deck.gl layers within the same MapLibre component. This allows for a mixed rendering environment.

```svelte
<MapLibre style="...">
  <!-- Native MapLibre layer -->
  <GeoJSON data={basemap}>
    <FillLayer paint={{...}} />
  </GeoJSON>

  <!-- Deck.GL layer overlaid -->
  <DeckGlLayer
    type={ScatterplotLayer}
    data={points}
    getPosition={(d) => d.position}
    getColor={(d) => d.color}
  />

  <!-- Another native MapLibre layer -->
  <VectorTileSource url="...">
    <LineLayer sourceLayer="roads" paint={{...}} />
  </VectorTileSource>
</MapLibre>
```