### Install svelte-maplibre

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

Command to install the library via npm.

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

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

### Implement Complete Control Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/08-CONTROL-COMPONENTS.md

A full example demonstrating standard controls, custom control groups, and terrain toggling.

```svelte
<script>
  import {
    MapLibre,
    NavigationControl,
    GeolocateControl,
    FullscreenControl,
    ScaleControl,
    ControlGroup,
    ControlButton,
    TerrainControl
  } from 'svelte-maplibre';
  
  let map;
  
  function resetNorth() {
    map?.easeTo({ bearing: 0, duration: 1000 });
  }
  
  function centerMap() {
    map?.easeTo({ center: [0, 0], zoom: 10 });
  }
</script>

<MapLibre
  bind:map
  center={[0, 0]}
  zoom={10}
  style="..."
>
  <!-- Standard controls -->
  <NavigationControl position="top-left" />
  <GeolocateControl position="top-left" />
  <FullscreenControl position="top-right" />
  <ScaleControl maxWidth={200} />
  <TerrainControl source="dem" position="top-right" />
  
  <!-- Custom control group -->
  <ControlGroup position="bottom-right">
    <ControlButton onclick={resetNorth}>↑</ControlButton>
    <ControlButton onclick={centerMap}>⊕</ControlButton>
  </ControlGroup>
</MapLibre>

<style>
  :global(.map) {
    height: 100vh;
  }
</style>
```

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

### Implement BackgroundLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Usage example for rendering the map background.

```svelte
<BackgroundLayer paint={{ 'background-color': '#fff' }} />
```

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

### Implement LineLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Usage example for rendering lines.

```svelte
<LineLayer
  paint={{
    'line-color': '#000',
    'line-width': 2,
    'line-dasharray': [2, 2]
  }}
  layout={{
    'line-join': 'round',
    'line-cap': 'round'
  }}
/>
```

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

### FullscreenControl Usage

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/08-CONTROL-COMPONENTS.md

Example of implementing the FullscreenControl component.

```svelte
<FullscreenControl position="top-right" />
```

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

### Implement HeatmapLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Usage example for rendering a heatmap from points.

```svelte
<HeatmapLayer
  paint={{
    'heatmap-weight': ['interpolate', ['linear'], ['get', 'magnitude'], 0, 0, 6, 1],
    'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
    'heatmap-color': [
      'interpolate',
      ['linear'],
      ['heatmap-density'],
      0, 'rgba(0, 0, 255, 0)',
      0.1, '#0000FF',
      0.5, '#00FF00',
      0.7, '#FFFF00',
      1, '#FF0000'
    ],
    'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
    'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0]
  }}
/>
```

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

### Implement SymbolLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Usage example for rendering text labels and icons.

```svelte
<SymbolLayer
  layout={{
    'text-field': ['get', 'name'],
    'text-font': ['Open Sans Regular'],
    'text-size': 12
  }}
  paint={{
    'text-color': '#000'
  }}
/>
```

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

### TopoJSON Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/05-SOURCE-COMPONENTS.md

Example implementation of a TopoJSON component with a nested FillLayer.

```svelte
<TopoJSON
  url="https://example.com/data.json"
  layer="countries"
>
  <FillLayer paint={{ 'fill-color': '#088' }} />
</TopoJSON>
```

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

### ImageSource Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/05-SOURCE-COMPONENTS.md

Example implementation of an ImageSource component with a nested RasterLayer.

```svelte
<ImageSource
  url="https://example.com/overlay.png"
  coordinates={[
    [-80.425, 46.437],  // NW
    [-71.516, 46.437],  // NE
    [-71.516, 37.936],  // SE
    [-80.425, 37.936]   // SW
  ]}
>
  <RasterLayer paint={{ 'raster-opacity': 0.5 }} />
</ImageSource>
```

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

### Implement CircleLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Usage example for rendering circles at feature points.

```svelte
<CircleLayer
  paint={{
    'circle-radius': 5,
    'circle-color': '#FF0000',
    'circle-opacity': 0.8
  }}
  layout={{
    'circle-sort-key': ['get', 'priority']
  }}
/>
```

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

### ControlButton Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/08-CONTROL-COMPONENTS.md

Demonstrates how to use ControlButton within a Control component.

```svelte
<Control>
  <ControlButton
    onclick={() => map.easeTo({ bearing: 0 })}
    class="icon-rotate"
  >
    ⟲
  </ControlButton>
</Control>
```

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

### Implement DeckGlAccessor examples

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

Demonstration of using DeckGlAccessor with both a function and a constant value.

```typescript
const colorAccessor: DeckGlAccessor<Feature, [r, g, b]> = feature => {
  return feature.properties?.color ?? [255, 0, 0];
};

// Or constant:
const constantColor: DeckGlAccessor<Feature, [r, g, b]> = [0, 255, 0];
```

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

### Implement FillExtrusionLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Usage example for rendering 3D extruded polygons.

```svelte
<FillExtrusionLayer
  paint={{
    'fill-extrusion-color': '#088',
    'fill-extrusion-height': ['get', 'height'],
    'fill-extrusion-base': ['get', 'min_height'],
    'fill-extrusion-opacity': 0.6
  }}
/>
```

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

### Implement FillLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Usage example for rendering filled polygons with an onclick handler.

```svelte
<FillLayer
  paint={{
    'fill-color': '#088',
    'fill-opacity': 0.5
  }}
  onclick={(info) => {
    console.log('Clicked polygon:', info.features[0].properties);
  }}
/>
```

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

### ScaleControl Usage

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/08-CONTROL-COMPONENTS.md

Example of implementing the ScaleControl component with custom width and units.

```svelte
<ScaleControl maxWidth={200} unit="metric" />
```

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

### Initialize MapLibre component in Svelte

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

Example of setting up the MapLibre component within a Svelte file, including worker configuration in the module script.

```svelte
<script module>
  import * as maplibregl from 'maplibre-gl';
  import maplibreWorkerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
  maplibregl.setWorkerUrl(maplibreWorkerUrl);
</script>

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

<MapLibre
  center={[50, 20]}
  zoom={7}
  class="map"
  standardControls
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
/>

<style>
  :global(.map) {
    height: 500px;
  }
</style>
```

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

### Initialize basic MapLibre map

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/04-MAPLIBRE-COMPONENT.md

Shows the standard setup for a MapLibre component, including worker URL configuration and CSS sizing.

```svelte
<script>
  import * as maplibregl from 'maplibre-gl';
  import maplibreWorkerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
  import { MapLibre } from 'svelte-maplibre';
  
  maplibregl.setWorkerUrl(maplibreWorkerUrl);
</script>

<MapLibre
  center={[-122.4194, 37.7749]}
  zoom={12}
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class="map"
/>

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

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

### Use MapEvents

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/08-CONTROL-COMPONENTS.md

Example of subscribing to map events using the MapEvents component.

```svelte
<MapEvents
  onload={(map) => console.log('Map ready')}
  onclick={(e) => console.log('Click:', e.lngLat)}
/>
```

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

### ControlGroup Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/08-CONTROL-COMPONENTS.md

Demonstrates grouping multiple ControlButton components within a ControlGroup.

```svelte
<ControlGroup position="top-left">
  <ControlButton onclick={() => map.zoomIn()}>+</ControlButton>
  <ControlButton onclick={() => map.zoomOut()}>−</ControlButton>
  <ControlButton onclick={() => map.easeTo({ bearing: 0 })}>↑</ControlButton>
</ControlGroup>
```

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

### VectorTileSource Usage Example

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/05-SOURCE-COMPONENTS.md

Standard implementation of VectorTileSource with nested layer components.

```svelte
<VectorTileSource
  url="https://basemaps.cartocdn.com/v1/vector/streets-v11/tilejson.json"
>
  <LineLayer sourceLayer="road" paint={{ 'line-color': '#333' }} />
  <SymbolLayer sourceLayer="label" layout={{ 'text-field': ['get', 'name'] }} />
</VectorTileSource>
```

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

### Implement DeckGlLayer Component

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/07-FEATURE-COMPONENTS.md

Example demonstrating the integration of a Deck.gl ScatterplotLayer into a Svelte MapLibre map.

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

<DeckGlLayer
  type={ScatterplotLayer}
  data={points}
  getPosition={(d) => d.coordinates}
  getRadius={(d) => d.radius}
  getFillColor={(d) => d.color}
  getLineColor={(d) => [0, 0, 0]}
  onclick={(info) => console.log('Clicked:', info.object)}
/>
```

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

### PMTiles Protocol Usage

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/05-SOURCE-COMPONENTS.md

Example of using the VectorTileSource component with a PMTiles URL.

```svelte
<VectorTileSource url="pmtiles:///path/to/file.pmtiles">
  <LineLayer />
</VectorTileSource>
```

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

### Control Component Usage

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/08-CONTROL-COMPONENTS.md

Examples of implementing custom controls using the Control component with different positioning and styling options.

```svelte
<Control position="top-left">
  <button>Custom Control</button>
</Control>

<Control defaultStyling position="bottom-left" class="custom-control">
  <div>
    <!-- Custom control content -->
  </div>
</Control>
```

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

### Implement JoinedData Component

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/07-FEATURE-COMPONENTS.md

Example showing how to use JoinedData to link tabular data to map features for data-driven styling.

```svelte
<script>
  const features = [
    { type: 'Feature', id: 'city-1', geometry: {...}, properties: {...} }
  ];
  
  const data = [
    { id: 'city-1', population: 1000000, color: '#FF0000' },
    { id: 'city-2', population: 500000, color: '#00FF00' }
  ];
</script>

<GeoJSON data={features}>
  <CircleLayer
    paint={{
      'circle-radius': ['/', ['get', 'population'], 'feature-state', 100000],
      'circle-color': ['feature-state', 'color']
    }}
  />
  <JoinedData {data} idCol="id" />
</GeoJSON>
```

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

### Enable Hover State Management

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Example of using manageHoverState to track hovered features and update paint properties based on feature state.

```svelte
<CircleLayer
  manageHoverState
  bind:hovered={hoveredFeature}
  paint={{
    'circle-color': [
      'case',
      ['boolean', ['feature-state', 'hover'], false],
      '#FF0000',
      '#0000FF'
    ]
  }}
/>
```

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

### Implement Terrain Component

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/07-FEATURE-COMPONENTS.md

Example usage of the Terrain component nested within a RasterDEMTileSource.

```svelte
<RasterDEMTileSource id="dem" url="...">
  <Terrain source="dem" exaggeration={1.5} />
</RasterDEMTileSource>
```

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

### AttributionControl Usage

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/08-CONTROL-COMPONENTS.md

Example of implementing the AttributionControl component when the default attribution is disabled.

```svelte
<MapLibre attributionControl={false}>
  <AttributionControl position="bottom-right" />
</MapLibre>
```

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

### Implement ZoomRange Component

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/07-FEATURE-COMPONENTS.md

Example usage of the ZoomRange component to constrain nested layers.

```svelte
<ZoomRange minzoom={5} maxzoom={15}>
  <!-- Nested layers inherit minzoom=5, maxzoom=15 -->
  <GeoJSON {data}>
    <CircleLayer />
  </GeoJSON>
</ZoomRange>
```

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

### Configure Advanced GeoJSON Clustering

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/05-SOURCE-COMPONENTS.md

Example of configuring cluster properties and aggregations within the GeoJSON component.

```svelte
<GeoJSON
  {data}
  cluster={{
    radius: 50,
    minPoints: 2,
    maxZoom: 15,
    properties: {
      sum: ['get', 'value'],
      avg: ['/', ['get', 'sum'], ['get', 'point_count']]
    }
  }}
>
  <CircleLayer
    paint={{
      'circle-radius': [
        'case',
        ['has', 'point_count'],
        ['get', 'point_count'],
        5
      ]
    }}
  />
</GeoJSON>
```

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

### MarkerLayer Usage

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/07-FEATURE-COMPONENTS.md

Example of rendering markers from GeoJSON features using the MarkerLayer component.

```svelte
<script>
  const features = [
    { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] }, properties: {} }
  ];
</script>

<MarkerLayer {features}>
  <svelte:fragment let:marker let:feature let:clickInfo>
    <Marker lngLat={feature.geometry.coordinates} {onclick}>
      <DefaultMarker />
    </Marker>
  </svelte:fragment>
</MarkerLayer>
```

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

### Handle layer click events in Svelte

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

Example usage of LayerClickInfo within a Svelte component to process click events on a CircleLayer.

```svelte
<script>
  import { CircleLayer } from 'svelte-maplibre';
  
  function handleLayerClick(info) {
    console.log(`Clicked on ${info.features.length} features`);
    console.log(`In layer ${info.layer} from source ${info.source}`);
    
    if (info.clusterId) {
      console.log(`This is a cluster with ID ${info.clusterId}`);
    }
  }
</script>

<CircleLayer onclick={handleLayerClick} {paint} />
```

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

### zoomTransition(start, startValue, end, endValue)

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

Creates a linear interpolation expression that scales property values based on the map zoom level.

```APIDOC
## zoomTransition(start: number, startValue: number | ExpressionSpecification, end: number, endValue: number | ExpressionSpecification)

### Description
Create a linear interpolation expression that changes with map zoom level. Useful for scaling properties smoothly as users zoom.

### Parameters
- **start** (number) - Required - Start zoom level
- **startValue** (number | ExpressionSpecification) - Required - Value at start zoom
- **end** (number) - Required - End zoom level
- **endValue** (number | ExpressionSpecification) - Required - Value at end zoom

### Returns
MapLibre interpolation expression

### Example
```svelte
<script>
  import { CircleLayer, zoomTransition } from 'svelte-maplibre';
  
  // Circles grow from 5px at zoom 0 to 20px at zoom 20
  const radiusExpr = zoomTransition(0, 5, 20, 20);
</script>

<CircleLayer paint={{ 'circle-radius': radiusExpr }} />
```
```

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

### Library Entry Points Configuration

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/00-PROJECT-OVERVIEW.md

Displays the package exports configuration for the library, including the main entry point and various submodules.

```text
Main export: ./dist/index.js (+ types)
Submodules:
  - ./context.svelte.js - Context management utilities
  - ./expressions.js - MapLibre expression helpers
  - ./filters.js - Filter and comparison utilities
  - ./source.js - Source management utilities
  - ./types.js - Type definitions and utilities
  - ./*.svelte - Individual Svelte components
  - ./*.css - Stylesheets for components
```

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

### Enable standard controls and hash

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/04-MAPLIBRE-COMPONENT.md

Configures the map with built-in controls and URL hash synchronization.

```svelte
<MapLibre
  center={[0, 0]}
  zoom={2}
  hash
  standardControls
  style="..."
/>
```

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

### updatedDeckGlContext()

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/01-CONTEXT-API.md

Initializes the Deck.gl layer context.

```APIDOC
## updatedDeckGlContext()

### Description
Initialize Deck.gl layer context.

### Returns
- **Object** - Contains `layer` (Box<string | undefined>) and `layerEvent` (Box<LayerEvent | undefined>).
```

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

### Render Basic Map

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/09-QUICK-START-PATTERNS.md

Initializes a map instance with a specified style, center, and zoom level.

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

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  center={[-122.4194, 37.7749]}
  zoom={10}
  class="map"
/>

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

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

### updatedMarkerContext()

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/01-CONTEXT-API.md

Initializes marker and event contexts, setting the marker as a popup target.

```APIDOC
## updatedMarkerContext()

### Description
Initialize marker and event contexts. Sets marker as popup target.

### Returns
- **Object** - Contains `marker` (Box<Marker | undefined>) and `layerEvent` (Box<LayerEvent | undefined>).
```

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

### updatedLayerContext(interactive)

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/01-CONTEXT-API.md

Initializes layer and event contexts, optionally setting up popup targeting if interactive is enabled.

```APIDOC
## updatedLayerContext(interactive)

### Description
Initialize layer and event contexts. If `interactive` is true, also sets up popup targeting.

### Parameters
- **interactive** (boolean) - Optional - Default: true - Whether this layer should handle mouse events.

### Returns
- **Object** - Contains `layer` (Box<string | undefined>) and `layerEvent` (Box<LayerEvent | undefined>).
```

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

### Get Viewport Hash in TypeScript

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

Generates a URL hash string representing the current map zoom, center, bearing, and pitch.

```typescript
import { getViewportHash } from 'svelte-maplibre';

const hash = getViewportHash(map);
// Result: "#12/37.7749/-122.4194" or "#12/37.7749/-122.4194/45/30"
```

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

### Initialize Source Context

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/01-CONTEXT-API.md

Initializes source and cluster contexts for use by source components.

```typescript
function updatedSourceContext(): {
  source: Box<string | undefined>;
  cluster: Box<ClusterOptions | undefined>;
}
```

```typescript
const { source, cluster } = updatedSourceContext();
source.value = 'my-source-id';
cluster.value = { radius: 50 };
```

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

### Basic Marker Usage

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/07-FEATURE-COMPONENTS.md

Minimal implementation of a marker at specified coordinates.

```svelte
<Marker lngLat={[0, 0]} />
```

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

### Handle Map Lifecycle Events

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/04-MAPLIBRE-COMPONENT.md

Use onload to perform actions once the map is ready, or onerror to catch runtime issues.

```svelte
<MapLibre
  onload={(map) => {
    console.log('Map ready');
    map.setFeatureState({ source: 'my-source', id: 1 }, { selected: true });
  }}
/>
```

```svelte
<MapLibre
  onerror={(error) => {
    console.error('Map error:', error);
  }}
/>
```

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

### DefaultMarker Usage

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/07-FEATURE-COMPONENTS.md

Basic implementation of a pre-styled blue pin marker.

```svelte
<DefaultMarker lngLat={[0, 0]} scale={0.8} />
```

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

### Using isDeckGlMouseEvent type guard

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/01-CONTEXT-API.md

Demonstrates how to use the type guard to access Deck.gl specific properties like object.

```typescript
if (isDeckGlMouseEvent(event)) {
  console.log('Deck.gl picking info:', event.object);
} else {
  console.log('Map layer event');
}
```

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

### Documentation Content Checklist

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

A list of standard elements included in each major documentation file for the project.

```text
✓ Function/component signatures with types
✓ Parameter tables (name, type, default, description)
✓ Return type documentation
✓ Usage examples (real code)
✓ Event documentation
✓ Lifecycle information
✓ Common patterns
✓ Cross-references
✓ Source file locations
```

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

### Create Responsive Map

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/09-QUICK-START-PATTERNS.md

Wraps the MapLibre component in a container to control dimensions via CSS.

```svelte
<script>
  let container;
</script>

<div bind:this={container} class="map-container">
  <MapLibre
    style="..."
    center={[0, 0]}
    zoom={2}
  />
</div>

<style>
  .map-container {
    width: 100%;
    height: 100vh;
  }
</style>
```

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

### Implement Manual Popup Control

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/07-FEATURE-COMPONENTS.md

Uses the bind:open directive to programmatically control the visibility of a popup.

```svelte
<script>
  let popupOpen = false;
</script>

<button onclick={() => { popupOpen = true; }}>
  Open Popup
</button>

<Popup bind:open={popupOpen} lngLat={[0, 0]}>
  <p>Content</p>
</Popup>
```

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

### Initialize Marker Context

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/01-CONTEXT-API.md

Initializes marker and event contexts, setting the marker as a popup target.

```typescript
function updatedMarkerContext(): {
  marker: Box<Marker | undefined>;
  layerEvent: Box<LayerEvent | undefined>;
}
```

```typescript
const { marker, layerEvent } = updatedMarkerContext();
// Now nested Popup components will attach to this marker
```

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

### Enable URL Hash Navigation

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/09-QUICK-START-PATTERNS.md

Synchronizes the map view state with the URL hash to allow bookmarking of specific map positions.

```svelte
<script>
  import { MapLibre } from 'svelte-maplibre';
  import { replaceState } from '$app/navigation';
  import { page } from '$app/stores';
</script>

<MapLibre
  hash
  updateHash={(url) => {
    replaceState(url.href, $page.state);
  }}
  style="..."
/>
```

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

### BackgroundLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Renders the map background.

```APIDOC
## BackgroundLayer

### Description
Renders the map background (cannot be nested in a source, usually placed at the end).

### Import
`import { BackgroundLayer } from 'svelte-maplibre';`

### Props
- **paint** (BackgroundLayerSpecification['paint']) - Required
- **id** (any) - Optional
- **children** (Snippet) - Optional

### Example
```svelte
<BackgroundLayer paint={{ 'background-color': '#fff' }} />
```
```

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

### Display the Svelte-MapLibre component hierarchy

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

Visual representation of the library's component structure, including sources, layers, features, and controls.

```text
MapLibre Component
├─ MapLibre (root)
├─ Sources
│  ├─ GeoJSON
│  ├─ VectorTileSource
│  ├─ RasterTileSource
│  ├─ RasterDEMTileSource
│  ├─ ImageSource
│  └─ TopoJSON
├─ Layers
│  ├─ Layer (generic)
│  ├─ CircleLayer
│  ├─ LineLayer
│  ├─ FillLayer
│  ├─ SymbolLayer
│  ├─ BackgroundLayer
│  ├─ RasterLayer
│  ├─ HeatmapLayer
│  ├─ HillshadeLayer
│  └─ FillExtrusionLayer
├─ Features
│  ├─ Marker / DefaultMarker
│  ├─ MarkerLayer
│  ├─ Popup
│  ├─ DeckGlLayer
│  ├─ Terrain
│  ├─ ZoomRange
│  └─ JoinedData
└─ Controls
   ├─ Control / ControlGroup / ControlButton
   ├─ NavigationControl
   ├─ GeolocateControl
   ├─ FullscreenControl
   ├─ ScaleControl
   ├─ AttributionControl
   ├─ TerrainControl
   └─ MapEvents
```

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

### Implementing Interactive Layers with Events

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Enable interactivity and hover state management using the interactive and manageHoverState props, combined with event handlers.

```svelte
<script>
  let hoveredFeature = undefined;
  let selectedId = null;
  
  function handleClick(info) {
    selectedId = info.features[0].id;
    console.log('Selected:', info.features[0].properties);
  }
  
  function handleHover(info) {
    hoveredFeature = info.features[0];
  }
</script>

<CircleLayer
  interactive
  manageHoverState
  bind:hovered={hoveredFeature}
  paint={{
    'circle-radius': 5,
    'circle-color': [
      'case',
      ['boolean', ['feature-state', 'hover'], false],
      '#FF0000',
      selectedId ? ['case', ['==', ['id'], selectedId], '#FFFF00', '#0000FF'] : '#0000FF'
    ]
  }}
  onclick={handleClick}
  onmouseenter={handleHover}
/>
```

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

### Handle Mouse Events

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/04-MAPLIBRE-COMPONENT.md

Capture mouse interactions on the map background using event handlers like onclick.

```svelte
<MapLibre
  onclick={(e) => {
    console.log('Clicked at:', e.lngLat);
  }}
/>
```

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

### Implement Source-Layer Hierarchy

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/00-PROJECT-OVERVIEW.md

Nest layer components within a source component to automatically register and apply source IDs via context.

```svelte
<MapLibre {style}>
  <GeoJSON {data}>
    <CircleLayer {paint} />
    <SymbolLayer {layout} />
  </GeoJSON>
</MapLibre>
```

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

### Implement Hover Popup

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/07-FEATURE-COMPONENTS.md

Configures a popup to trigger automatically on hover over a layer.

```svelte
<CircleLayer>
  <Popup openOn="hover">
    <p>Hover info</p>
  </Popup>
</CircleLayer>
```

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

### LineLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Renders lines.

```APIDOC
## LineLayer

### Description
Renders lines.

### Import
`import { LineLayer } from 'svelte-maplibre';`

### Props
- **paint** (LineLayerSpecification['paint']) - Required
- **layout** (LineLayerSpecification['layout']) - Optional

### Example
```svelte
<LineLayer
  paint={{
    'line-color': '#000',
    'line-width': 2,
    'line-dasharray': [2, 2]
  }}
  layout={{
    'line-join': 'round',
    'line-cap': 'round'
  }}
/>
```
```

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

### Use TerrainControl

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/08-CONTROL-COMPONENTS.md

Basic implementation of the TerrainControl component.

```svelte
<TerrainControl position="top-left" source="dem" />
```

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

### Implement GeoJSON Source with Clustering

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/05-SOURCE-COMPONENTS.md

Basic usage of the GeoJSON component within a MapLibre map, demonstrating point clustering and layer styling.

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

<MapLibre {style} zoom={10} center={[0, 0]}>
  <GeoJSON data={featureCollection} cluster={{ radius: 50 }}>
    <CircleLayer
      paint={{
        'circle-radius': ['case', ['has', 'point_count'], 15, 5],
        'circle-color': ['case', ['has', 'point_count'], '#FF0000', '#0000FF']
      }}
    />
  </GeoJSON>
</MapLibre>
```

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

### boundsEqual(param: LngLatBoundsLike, mapBounds: LngLatBounds | undefined)

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

Compares two bounds for equality with floating-point tolerance.

```APIDOC
## boundsEqual(param: LngLatBoundsLike, mapBounds: LngLatBounds | undefined)

### Description
Compare two bounds for equality with floating-point tolerance.

### Parameters
- **param** (LngLatBoundsLike) - New bounds to compare
- **mapBounds** (LngLatBounds | undefined) - Current map bounds

### Returns
Object with `equal` flag and normalized bounds

### Example
```typescript
import { boundsEqual } from 'svelte-maplibre';
import { LngLatBounds } from 'maplibre-gl';

const bounds = [[-74, 40], [-73, 41]];
const mapBounds = new LngLatBounds([-74, 40], [-73, 41]);

const { equal } = boundsEqual(bounds, mapBounds);
console.log(equal); // true
```
```

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

### Configure MapLibre worker for Vite

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

Import the worker URL and set it using maplibregl.setWorkerUrl before initializing the map.

```javascript
import * as maplibregl from 'maplibre-gl';
import maplibreWorkerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';

maplibregl.setWorkerUrl(maplibreWorkerUrl);
```

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

### updatedSourceContext()

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/01-CONTEXT-API.md

Initializes source and cluster contexts for use by source components to make their ID and cluster options available to nested layers.

```APIDOC
## updatedSourceContext()

### Description
Initializes source and cluster contexts. Used by source components (GeoJSON, VectorTileSource, etc.) to make their ID and cluster options available to nested layers.

### Returns
- **Object** - Contains `source` (Box<string | undefined>) and `cluster` (Box<ClusterOptions | undefined>).
```

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

### Implement Popup with Marker

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/07-FEATURE-COMPONENTS.md

Attaches a popup to a Marker component.

```svelte
<Marker lngLat={[0, 0]} onclick={() => { /* open */ }}>
  <Popup>
    <p>Marker popup</p>
  </Popup>
</Marker>
```

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

### Layer Interaction and Hover State Management

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/09-QUICK-START-PATTERNS.md

Implements hover and selection states using feature-state and component bindings.

```svelte
<script>
  import { CircleLayer } from 'svelte-maplibre';
  import { hoverStateFilter } from 'svelte-maplibre';
  
  let selectedId = null;
  let hoveredFeature = null;
  
  function handleClick(info) {
    selectedId = info.features[0].id;
  }
</script>

<CircleLayer
  interactive
  manageHoverState
  bind:hovered={hoveredFeature}
  filter={['!=', ['id'], 0]}
  paint={{
    'circle-radius': 5,
    'circle-color': [
      'case',
      ['boolean', ['feature-state', 'hover'], false],
      '#FFD700',  // Hover color
      selectedId ? [
        'case',
        ['==', ['id'], selectedId],
        '#FF0000',  // Selected color
        '#0000FF'   // Default color
      ] : '#0000FF'
    ]
  }}
  onclick={handleClick}
/>

{#if hoveredFeature}
  <p>Hovering: {hoveredFeature.properties?.name}</p>
{/if}
```

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

### Configure ClusterOptions

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

Configuration interface for GeoJSON source clustering.

```typescript
interface ClusterOptions {
  minPoints?: number;           // @default 2
  maxZoom?: number;
  radius?: number;              // @default 50
  properties?: Record<string, ExpressionSpecification>;
}
```

```svelte
<script>
  import { GeoJSON } from 'svelte-maplibre';
  
  const cluster = {
    minPoints: 3,
    radius: 60,
    maxZoom: 14,
    properties: {
      sum: ['get', 'value'],
      avg: ['/', ['get', 'sum'], ['get', 'point_count']]
    }
  };
</script>

<GeoJSON {data} cluster={cluster}>
  <!-- layers here -->
</GeoJSON>
```

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

### Initialize Layer Context

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/01-CONTEXT-API.md

Initializes layer and event contexts, with an optional interactive flag for mouse event handling.

```typescript
function updatedLayerContext(interactive?: boolean): {
  layer: Box<string | undefined>;
  layerEvent: Box<LayerEvent | undefined>;
}
```

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

### Using the Generic Layer Component

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Utilize the base Layer component for layer types that do not have dedicated specialized components.

```svelte
<script>
  import { Layer } from 'svelte-maplibre';
  import type { LayerSpecification } from 'maplibre-gl';
  
  const customLayer: LayerSpecification = {
    type: 'circle',
    paint: { 'circle-radius': 5 }
  };
</script>

<Layer type="circle" paint={{ 'circle-radius': 5 }} />
```

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

### Implement RasterTileSource

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/05-SOURCE-COMPONENTS.md

Basic usage of the RasterTileSource component with a nested RasterLayer.

```svelte
<RasterTileSource
  url="https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
>
  <RasterLayer />
</RasterTileSource>
```

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

### SymbolLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Renders text labels and icons.

```APIDOC
## SymbolLayer

### Description
Renders text labels and icons.

### Import
`import { SymbolLayer } from 'svelte-maplibre';`

### Props
- **layout** (SymbolLayerSpecification['layout']) - Required
- **paint** (SymbolLayerSpecification['paint']) - Optional

### Example
```svelte
<SymbolLayer
  layout={{
    'text-field': ['get', 'name'],
    'text-font': ['Open Sans Regular'],
    'text-size': 12
  }}
  paint={{
    'text-color': '#000'
  }}
/>
```
```

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

### HeatmapLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Renders a heatmap from points.

```APIDOC
## HeatmapLayer

### Description
Renders a heatmap from points.

### Import
`import { HeatmapLayer } from 'svelte-maplibre';`

### Props
- **paint** (HeatmapLayerSpecification['paint']) - Required

### Example
```svelte
<HeatmapLayer
  paint={{
    'heatmap-weight': ['interpolate', ['linear'], ['get', 'magnitude'], 0, 0, 6, 1],
    'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
    'heatmap-color': [
      'interpolate',
      ['linear'],
      ['heatmap-density'],
      0, 'rgba(0, 0, 255, 0)',
      0.1, '#0000FF',
      0.5, '#00FF00',
      0.7, '#FFFF00',
      1, '#FF0000'
    ],
    'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20],
    'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 7, 1, 9, 0]
  }}
/>
```
```

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

### Implement GeoJSON Clustering

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/09-QUICK-START-PATTERNS.md

Configures point clustering for GeoJSON data using the cluster prop and conditional paint properties for styling clusters versus individual points.

```svelte
<script>
  import { MapLibre, GeoJSON, CircleLayer } from 'svelte-maplibre';
  
  const data = { /* GeoJSON with many points */ };
  const cluster = {
    radius: 50,
    minPoints: 2,
    maxZoom: 14,
    properties: {
      sum: ['get', 'value']
    }
  };
</script>

<MapLibre style="...">
  <GeoJSON {data} {cluster}>
    <CircleLayer
      paint={{
        'circle-radius': [
          'case',
          ['has', 'point_count'],
          ['step', ['get', 'point_count'], 15, 10, 20, 30, 25],
          5
        ],
        'circle-color': [
          'case',
          ['has', 'point_count'],
          '#FF0000',  // Cluster color
          '#0000FF'   // Point color
        ]
      }}
    />
  </GeoJSON>
</MapLibre>
```

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

### Wait for Images to Load

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/09-QUICK-START-PATTERNS.md

Use the allImagesLoaded slot prop to ensure images are ready before rendering dependent layers.

```svelte
<MapLibre style="..." let:allImagesLoaded>
  {#if allImagesLoaded}
    <!-- Render layers that use images -->
  {/if}
</MapLibre>
```

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

### Implement RasterDEMTileSource

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/05-SOURCE-COMPONENTS.md

Usage of the RasterDEMTileSource component paired with a Terrain component for 3D visualization.

```svelte
<RasterDEMTileSource
  url="https://example.com/dem/{z}/{x}/{y}.png?encoding=mapbox"
>
  <Terrain exaggeration={1.5} />
</RasterDEMTileSource>
```

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

### Add a map source with lifecycle handling

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

Adds a source to the map, waiting for any pending removals of the same ID to complete first. The okToAdd callback should be used to verify the component is still mounted.

```typescript
function addSource(
  map: Map,
  sourceId: string,
  source: SourceSpecification,
  okToAdd: (sourceId: string) => boolean,
  cb: () => void
): void
```

```typescript
import { addSource } from 'svelte-maplibre';
import { GeoJSON } from 'geojson';

const geojsonSource = {
  type: 'geojson',
  data: featureCollection
};

addSource(
  map,
  'my-source',
  geojsonSource,
  (id) => id === 'my-source',  // Don't add if source ID changed
  () => {
    console.log('Source added');
  }
);
```

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

### Compare bounds with boundsEqual

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

Compares two bounds for equality using floating-point tolerance. Requires importing LngLatBounds from maplibre-gl.

```typescript
function boundsEqual(
  param: LngLatBoundsLike,
  mapBounds: LngLatBounds | undefined
): { equal: boolean; bounds: LngLatBounds }
```

```typescript
import { boundsEqual } from 'svelte-maplibre';
import { LngLatBounds } from 'maplibre-gl';

const bounds = [[-74, 40], [-73, 41]];
const mapBounds = new LngLatBounds([-74, 40], [-73, 41]);

const { equal } = boundsEqual(bounds, mapBounds);
console.log(equal); // true
```

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

### Render Markers with Popups

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/09-QUICK-START-PATTERNS.md

Displays multiple markers on a map using an each block, with associated popups for displaying location details.

```svelte
<script>
  import { MapLibre, Marker, DefaultMarker, Popup } from 'svelte-maplibre';
  
  const locations = [
    { id: 1, lngLat: [0, 0], name: 'Point A' },
    { id: 2, lngLat: [10, 10], name: 'Point B' }
  ];
</script>

<MapLibre style="...">
  {#each locations as location (location.id)}
    <Marker lngLat={location.lngLat}>
      <DefaultMarker />
      <Popup>
        <p>{location.name}</p>
      </Popup>
    </Marker>
  {/each}
</MapLibre>
```

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

### Use flush to clean objects

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

Demonstrates removing null and undefined properties from an object configuration.

```typescript
import { flush } from 'svelte-maplibre';

const options = {
  center: [0, 0],
  zoom: undefined,
  pitch: 45,
  bearing: null,
  interactive: true
};

const clean = flush(options);
// Result: { center: [0, 0], pitch: 45, interactive: true }
```

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

### Render Vector Tiles

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/09-QUICK-START-PATTERNS.md

Displays vector data sources with specific layers for lines and symbols.

```svelte
<script>
  import { MapLibre, VectorTileSource, LineLayer, SymbolLayer } from 'svelte-maplibre';
</script>

<MapLibre style="...">
  <VectorTileSource url="https://tileserver.com/data.json">
    <LineLayer sourceLayer="roads" paint={{ 'line-color': '#333' }} />
    <SymbolLayer sourceLayer="labels" layout={{ 'text-field': ['get', 'name'] }} />
  </VectorTileSource>
</MapLibre>
```

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

### Implement Data-Driven Styling with CircleLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/09-QUICK-START-PATTERNS.md

Uses MapLibre expressions to dynamically style circle layers based on feature properties like magnitude and temperature.

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

<CircleLayer
  paint={{
    'circle-radius': ['interpolate', ['linear'], ['get', 'magnitude'], 0, 2, 10, 20],
    'circle-color': [
      'interpolate',
      ['linear'],
      ['get', 'temperature'],
      0, '#0000FF',    // Cool
      50, '#00FF00',   // Warm
      100, '#FF0000'   // Hot
    ],
    'circle-opacity': ['/', ['get', 'confidence'], 100]
  }}
/>
```

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

### convertBoundsToUserFormat(bounds: LngLatBounds, param: LngLatBoundsLike | undefined)

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

Converts bounds back to the format used by the user, preserving the input format.

```APIDOC
## convertBoundsToUserFormat(bounds: LngLatBounds, param: LngLatBoundsLike | undefined)

### Description
Convert bounds back to the format used by the user (preserves input format).

### Parameters
- **bounds** (LngLatBounds) - Internal bounds object
- **param** (LngLatBoundsLike) - Original bounds format from user

### Returns
Bounds in the same format as `param` input

### Example
```typescript
// If user passed [[lng, lat], [lng, lat]], returns same format
const result1 = convertBoundsToUserFormat(bounds, [[0, 0], [10, 10]]);
// result1 → [[0, 0], [10, 10]]

// If user passed [lng, lat, lng, lat], returns same format
const result2 = convertBoundsToUserFormat(bounds, [0, 0, 10, 10]);
// result2 → [0, 0, 10, 10]
```
```

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

### getId(prefix: string): string

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/01-CONTEXT-API.md

Generates a unique ID string with a specified prefix, useful for identifying map layers or sources.

```APIDOC
## getId(prefix: string)

### Description
Generates a unique ID with the given prefix. Uses the current timestamp to avoid ID reuse during hot module replacement.

### Parameters
- **prefix** (string) - Required - Prefix for the generated ID (e.g., 'layer', 'source')

### Returns
- **string** - Unique string ID in format `{prefix}-{incrementing number}`
```

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

### addSource(map, sourceId, source, okToAdd, cb)

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

Adds a source to the map with lifecycle handling, ensuring that if a source with the same ID is being removed, the new one is added only after removal completes.

```APIDOC
## addSource(map, sourceId, source, okToAdd, cb)

### Description
Adds a source to the map with proper handling of source replacement. If a source with the same ID is being removed, it waits for the removal to complete before adding the new one.

### Parameters
- **map** (Map) - Required - MapLibre map instance
- **sourceId** (string) - Required - Unique source identifier
- **source** (SourceSpecification) - Required - Source configuration object
- **okToAdd** (function) - Required - Callback to check if source should be added (prevents adding if component unmounted)
- **cb** (function) - Required - Callback invoked after source is added

### Returns
- **void**
```

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

### Initialize Zoom Range Context

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/01-CONTEXT-API.md

Creates a new zoom range context that inherits unspecified limits from parent contexts.

```typescript
function updatedZoomRangeContext(
  minzoom: number | undefined,
  maxzoom: number | undefined
): {
  originalMinZoom: number;
  originalMaxZoom: number;
  minzoom: number;
  maxzoom: number;
}
```

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

### Load custom images and layers

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/04-MAPLIBRE-COMPONENT.md

Registers custom images with the map and waits for them to load before rendering dependent layers.

```svelte
<MapLibre
  {style}
  images={[
    { id: 'my-icon', url: '/icon.png' }
  ]}
  let:allImagesLoaded
>
  {#if allImagesLoaded}
    <GeoJSON {data}>
      <SymbolLayer layout={{ 'icon-image': 'my-icon' }} />
    </GeoJSON>
  {/if}
</MapLibre>
```

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

### flush(obj)

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

Removes all null and undefined values from an object to create clean configuration objects.

```APIDOC
## flush(obj)

### Description
Removes all undefined and null values from an object. This is used to create clean configuration objects for MapLibre APIs that do not accept undefined values.

### Parameters
- **obj** (Record<string, unknown>) - Required - The object to filter.

### Returns
- **Object** - A new object with all null and undefined values removed.

### Example
```typescript
import { flush } from 'svelte-maplibre';

const options = { center: [0, 0], zoom: undefined, pitch: 45 };
const clean = flush(options);
// Result: { center: [0, 0], pitch: 45 }
```
```

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

### FillLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Renders filled polygons.

```APIDOC
## FillLayer

### Description
Renders filled polygons.

### Import
`import { FillLayer } from 'svelte-maplibre';`

### Props
- **paint** (FillLayerSpecification['paint']) - Required
- **layout** (FillLayerSpecification['layout']) - Optional

### Example
```svelte
<FillLayer
  paint={{
    'fill-color': '#088',
    'fill-opacity': 0.5
  }}
  onclick={(info) => {
    console.log('Clicked polygon:', info.features[0].properties);
  }}
/>
```
```

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

### RasterLayer

Source: https://github.com/dimfeld/svelte-maplibre/blob/master/_autodocs/06-LAYER-COMPONENTS.md

Renders raster tiles.

```APIDOC
## RasterLayer

### Description
Renders raster tiles.

### Import
`import { RasterLayer } from 'svelte-maplibre';`

### Props
- **paint** (RasterLayerSpecification['paint']) - Optional
```