### Install Sveaflet using npm

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/pages/quick-start.md

This command installs the Sveaflet library and adds it as a dependency to your project. Ensure you have Node.js and npm installed.

```bash
npm install sveaflet --save
```

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

### Setup Sveaflet Icon Component

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Icon.md

Demonstrates the basic setup for using the Icon component in Sveaflet by importing it. This is a prerequisite for utilizing any icon functionalities.

```svelte
<script>
	import { Icon } from 'sveaflet';
</script>
```

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

### Sveaflet Event Handling with Direct Props (v0.1.0+)

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/pages/quick-start.md

Demonstrates event handling in Sveaflet using direct event listener props (e.g., `onclick`) available from version 0.1.0 onwards. This simplifies event attachment compared to using Leaflet's `.on()` method. The example shows handling map clicks to display a popup.

```svelte
<script>
	import { Map, TileLayer, Marker, Popup } from 'sveaflet';

	let map;
	let popup;
	let popupLatLng = $state([51.513, -0.09]);
	let popupContent = $state('I am a standalone popup.');

	function onMapClick(e) {
		popupLatLng = e.latlng;
		popupContent = 'You clicked the map at ' + e.latlng.toString();
		if (popup) {
			popup.openOn(map);
		}
	}
</script>

<div style="width: 100%;height:500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }} onclick={onMapClick}>
		<TileLayer
			url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
			options={{
				maxZoom: 19,
				attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
			}}
		/>
		<Popup latLng={popupLatLng} options={{ content: popupContent }} />
	</Map>
</div>
```

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

### Sveaflet with TypeScript and Popup

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/pages/quick-start.md

Shows how to use Sveaflet with TypeScript, including binding to component instances to control their state, such as opening a popup programmatically. This example is designed for client-side rendering and hides the output.

```svelte
<script lang="ts">
	import { Map, TileLayer, Marker, Popup } from 'sveaflet';

	let marker: Marker;

	if (marker) {
		marker.openPopup();
	}
</script>

<div style="width:100%;height:500px;">
	<Map
		options={{
			center: [51.505, -0.09],
			zoom: 13
		}}
	>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<Marker latLng={[51.505, -0.09]} bind:instance={marker}>
			<Popup
				options={{
					content: 'Hello Sveaflet.'
				}}
			></Popup>
		</Marker>
	</Map>
</div>
```

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

### Setup Tooltip Component

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Tooltip.md

Imports the Tooltip component from Sveaflet for use in Svelte applications. This is the basic setup required before using tooltips.

```svelte
<script>
	import { Tooltip } from 'sveaflet';
</script>
```

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

### Initialize Leaflet Map with Interactive Elements in Sveaflet (Svelte)

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/examples/sveaflet-quick-start-guide.md

This code snippet demonstrates how to set up a basic Leaflet map using Sveaflet components in a Svelte application. It imports necessary components from 'sveaflet', initializes a map with tile layers, adds markers, circles, polygons, and popups, and handles click events to update popup content. Dependencies include Leaflet and Sveaflet; inputs are configuration options for map center, zoom, and element properties; outputs include an interactive map displayed in a div. Limitations include client-side rendering as indicated by 'csr', and it assumes basic knowledge of Svelte reactivity.

```svelte
<script>
	import { Map, TileLayer, Marker, Circle, Polygon, Popup } from 'sveaflet';

	let map;
	let popup;
	$: popupLatLng = [51.513, -0.09];
	$: popupContent = 'I am a standalone popup.';

	$: if (map) {
		map.on('click', onMapClick);
	}

	function onMapClick(e) {
		popupLatLng = e.latlng;
		popupContent = 'You clicked the map at ' + e.latlng.toString();
		if (popup) {
			popup.openOn(map);
		}
	}
</script>

<div style="width: 100%;height:500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }} bind:instance={map}>
		<TileLayer
			url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
			options={{
				maxZoom: 19,
				attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
			}}
		/>
		<Popup latLng={popupLatLng} options={{ content: popupContent }} />

		<Circle
			latLng={[51.508, -0.11]}
			options={{
				color: 'red',
				fillColor: '#f03',
				fillOpacity: 0.5,
				radius: 500
			}}
		>
			<Popup options={{ content: 'I am a circle.' }} />
		</Circle>
		<Marker latLng={[51.5, -0.09]}>
			<Popup options={{ content: '<b>Hello world!</b><br>I am a popup.' }} />
		</Marker>
		<Polygon
			latLngs={[
				[51.509, -0.08],
				[51.503, -0.06],
				[51.51, -0.047]
			]}
		>
			<Popup options={{ content: 'I am a polygon.' }} />
		</Polygon>
	</Map>
</div>
```

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

### Setup Sveaflet Map Component

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/pages/introduction.md

Demonstrates the basic setup of a Sveaflet map component. It initializes a map with center coordinates and zoom level, adds an OpenStreetMap tile layer, and places a marker at a specific latitude and longitude. This requires the 'sveaflet' library. The map is contained within a div with a fixed height.

```svelte
<script>
	import { Map, TileLayer, Marker, Popup } from 'sveaflet';
</script>

<div style="width:100%;height:500px;">
	<Map
		options={{
			center: [51.505, -0.09],
			zoom: 13
		}}
	>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<Marker latLng={[51.505, -0.09]} />
	</Map>
</div>
```

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

### Setup Polyline Component

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Polyline.md

Basic setup for importing and using the Polyline component. This snippet sets up the necessary imports without rendering output.

```svelte
<script>
	import { Polyline } from 'sveaflet';
</script>
```

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

### Setup Sveaflet Map

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Map.md

This snippet demonstrates the basic setup of the Sveaflet Map component. It imports the Map component from the 'sveaflet' library and renders it within a Svelte component.

```svelte
<script>
	import { Map } from 'sveaflet';
</script>
```

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

### Setup SVGOverlay in Sveaflet

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/SVGOverlay.md

This snippet demonstrates the basic setup for using the SVGOverlay component in a Sveaflet application. It imports the necessary SVGOverlay component from the 'sveaflet' library.

```svelte
<script>
	import { SVGOverlay } from 'sveaflet';
</script>
```

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

### Svelte Popup Example

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Popup.md

Demonstrates the basic setup and usage of the Sveaflet Popup component in a Svelte application. It utilizes the Map and TileLayer components to display a popup at a specific location.

```svelte
<script>
	import { Popup } from 'sveaflet';
</script>
```

```svelte
<div style="width: 100%;height: 500px;">
	<Map options="{{ center: [51.505, -0.09], zoom: 13 }}">
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<Popup
			latLng="[51.5, -0.09]"
			options="{
				content: 'Popup Content.'
			}}"
		/>
	</Map>
</div>
```

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

### Setup DivIcon in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/DivIcon.md

Basic setup for importing the DivIcon component in a Svelte project. This snippet shows the minimal import required to use DivIcon.

```svelte
<script>
	import { DivIcon } from 'sveaflet';
</script>
```

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

### Basic Setup for ImageOverlay in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/ImageOverlay.md

This snippet demonstrates the initial import required for using the ImageOverlay component in a Svelte application with Sveaflet. It serves as a prerequisite for rendering image overlays on maps. No inputs or outputs are directly handled here; it focuses on module dependencies.

```svelte
<script>
	import { ImageOverlay } from 'sveaflet';
</script>
```

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

### Setup Circle Component - Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Circle.md

Basic setup for importing the Circle component from Sveaflet in a Svelte project. This is the minimal required import to use the component.

```svelte
<script>
	import { Circle } from 'sveaflet';
</script>
```

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

### VideoOverlay with Options in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/VideoOverlay.md

Example demonstrating how to use VideoOverlay with additional options like opacity, autoplay, and looping. Includes a toggle to dynamically adjust opacity.

```svelte
<script>
	import { Map, TileLayer, VideoOverlay } from 'sveaflet';
	import { Label, Toggle } from 'flowbite-svelte';

	let enableOpacity = $state(true);
</script>

<div class="flex items-center gap-4 mb-4">
	<Label>Enable Opacity:</Label>
	<Toggle bind:checked={enableOpacity} />
</div>

<div style="width: 100%; height: 500px; ">
	<Map options={{ center: [40.799311, -74.33], zoom: 10 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<VideoOverlay
			url="https://www.mapbox.com/bites/00188/patricia_nasa.mp4"
			bounds={[
				[40.799311, -74.118464],
				[40.68202047785919, -74.33]
			]}
			options={{
				muted: true,
				autoplay: true,
				loop: true,
				opacity: enableOpacity ? 0.5 : 1
			}}
		></VideoOverlay>
	</Map>
</div>
```

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

### VideoOverlay with Slot Content in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/VideoOverlay.md

Example showing how to use VideoOverlay with slot content to provide multiple video sources. Includes options for interactivity and controls.

```svelte
<script>
	import { Map, TileLayer, VideoOverlay } from 'sveaflet';
</script>

<div style="width: 100%; height: 500px; ">
	<Map options={{ center: [40.799311, -74.33], zoom: 10 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<VideoOverlay
			bounds={[
				[40.799311, -74.118464],
				[40.68202047785919, -74.33]
			]}
			options={{
				muted: true,
				autoplay: true,
				loop: true,
				interactive: true
			}}
			width={500}
			controls={true}
		>
			<source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm" />
			<source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4" />
		</VideoOverlay>
	</Map>
</div>
```

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

### Setting up ControlAttribution Import in Sveaflet

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/ControlAttribution.md

This snippet demonstrates the basic import of the ControlAttribution component from Sveaflet. It requires no additional dependencies beyond the Sveaflet library. No inputs or outputs are specified here; it's purely for setup purposes. Limitations include the need for a Svelte environment.

```svelte
<script>
	import { ControlAttribution } from 'sveaflet';
</script>
```

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

### Setup TileLayerWMS Import - Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/TileLayerWMS.md

Basic import setup for TileLayerWMS component from Sveaflet library. Required to access the WMS tile layer functionality. This import statement enables the use of TileLayerWMS component in Svelte applications.

```svelte
<script>
	import { TileLayerWMS } from 'sveaflet';
</script>
```

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

### Sveaflet: Control Layers with Base and Overlay Groups

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/examples/layer-groups-and-layers-control.md

This example showcases how to use Sveaflet's ControlLayers to manage different types of map layers, including base tile layers and overlay layer groups with markers and popups. It requires the sveaflet library and basic HTML structure for map rendering.

```svelte
<script>
	import { Map, ControlLayers, TileLayer, LayerGroup, Marker, Popup } from 'sveaflet';
</script>

<div style="width: 100%;height:500px">
	<Map
		options={{
			center: [39.73, -104.99],
			zoom: 10
		}}>
		<ControlLayers>
			<TileLayer
				layerType="base"
				name="OpenStreetMap"
        url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
				options={{
					maxZoom: 19,
					attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
				}}
				checked={true}
			/>
			<TileLayer
				layerType="base"
				name="OpenStreetMap.HOT"
        url={'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'}
				options={{
					maxZoom: 19,
					attribution:
						'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>'
				}}
			/>
			<TileLayer
				layerType="base"
				name="OpenTopoMap"
        url={'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'}
				options={{
					maxZoom: 19,
					attribution:
						'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
				}}
			/>

			<LayerGroup checked={true} name="Cities" layerType="overlay">
				<Marker latLng={[39.61, -105.02]}>
					<Popup options={{ content: 'This is Littleton, CO.' }} />
				</Marker>
				<Marker latLng={[39.74, -104.99]}>
					<Popup options={{ content: 'This is Denver, CO.' }} />
				</Marker>
				<Marker latLng={[39.73, -104.8]}>
					<Popup options={{ content: 'This is Aurora, CO.' }} />
				</Marker>
				<Marker latLng={[39.77, -105.23]}>
					<Popup options={{ content: 'This is Golden, CO.' }} />
				</Marker>
			</LayerGroup>
			<LayerGroup name="Parks" layerType="overlay">
				<Marker latLng={[39.75, -105.09]}>
					<Popup options={{ content: 'This is Crown Hill Park.' }} />
				</Marker>
				<Marker latLng={[39.68, -105.0]}>
					<Popup options={{ content: 'This is Ruby Hill Park.' }} />
				</Marker>
			</LayerGroup>
		</ControlLayers>
	</Map>
</div>

```

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

### Default VideoOverlay Usage in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/VideoOverlay.md

Example of a basic VideoOverlay implementation with a map, tile layer, and video overlay. The video is displayed over specified bounds with default options.

```svelte
<script>
	import { Map, TileLayer, VideoOverlay } from 'sveaflet';
</script>

<div style="width: 100%; height: 500px; ">
	<Map options={{ center: [40.799311, -74.33], zoom: 10 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<VideoOverlay
			url="https://www.mapbox.com/bites/00188/patricia_nasa.mp4"
			bounds={[
				[40.799311, -74.118464],
				[40.68202047785919, -74.33]
			]}
		/>
	</Map>
</div>
```

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

### Basic Setup for Rectangle in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Rectangle.md

This snippet demonstrates the initial import of the Rectangle component from Sveaflet. It is used as a foundational step before integrating into a map. No map rendering occurs here; dependencies include Sveaflet library. Input is the import statement; output is the component availability.

```svelte
<script>
	import { Rectangle } from 'sveaflet';
</script>
```

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

### Setting up TileLayer Import in Sveaflet

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/TileLayer.md

This snippet demonstrates the basic import of the TileLayer component from Sveaflet for use in Svelte applications. It requires the Sveaflet library installed and focuses on the script section without rendering output. No additional dependencies beyond Sveaflet are needed; it prepares the component for mapping functionalities but does not handle actual rendering.

```svelte
<script>
	import { TileLayer } from 'sveaflet';
</script>
```

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

### Sveaflet Event Handling with Leaflet's .on()

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/pages/quick-start.md

Illustrates how to handle map click events using Leaflet's standard event listener API (`.on()`) within a Sveaflet application. This approach is used for versions prior to 0.1.0 where direct event props were not available. It binds to the map instance to attach the listener.

```svelte
<script>
	import { Map, TileLayer, Marker, Popup } from 'sveaflet';

	let map;
	let popup;
	$: popupLatLng = [51.513, -0.09];
	$: popupContent = 'I am a standalone popup.';

	$: if (map) {
		map.on('click', onMapClick);
	}

	function onMapClick(e) {
		popupLatLng = e.latlng;
		popupContent = 'You clicked the map at ' + e.latlng.toString();
		if (popup) {
			popup.openOn(map);
		}
	}
</script>

<div style="width: 100%;height:500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }} bind:instance={map}>
		<TileLayer
			url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
			options={{
				maxZoom: 19,
				attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
			}}
		/>
		<Popup latLng={popupLatLng} options={{ content: popupContent }} />
	</Map>
</div>
```

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

### Custom DivIcon with Options in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/DivIcon.md

Example of customizing the DivIcon with options, including className for styling. This snippet shows how to apply custom styles to the DivIcon.

```svelte
<script>
	import { onMount } from 'svelte';
	import { Map, TileLayer, Marker, DivIcon } from 'sveaflet';
	import { Radio } from 'flowbite-svelte';
</script>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<Marker latLng={[51.5, -0.09]}>
			<DivIcon
				options={{
					className: 'red-icon'
				}}
			></DivIcon>
		</Marker>
	</Map>
</div>

<style>
	:global(.red-icon) {
		width: 50px !important;
		height: 50px !important;
		background: red;
	}
</style>
```

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

### Importing ControlLayers in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/ControlLayers.md

This snippet demonstrates the basic import of the ControlLayers component from the Sveaflet library. It requires no additional dependencies beyond Sveaflet installation. No specific inputs or outputs; used as a prerequisite for using the component in Svelte applications.

```svelte
<script>
	import { ControlLayers } from 'sveaflet';
</script>
```

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

### Setup Marker Component in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Marker.md

This code snippet demonstrates how to import and set up the Marker component from the sveaflet library in a Svelte application. It requires the sveaflet package as a dependency. The input is none, and it outputs a prepared component for use in maps. Limitation: Assumes Svelte environment with CSR support.

```svelte
<script>
	import { Marker } from 'sveaflet';
</script>

```

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

### Create Polygon with Options in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Polygon.md

This example shows how to configure a Polygon with options such as color. The options are controlled via a radio button, allowing changing the color of the polygon dynamically.

```svelte
<script>
	import { Map, TileLayer, Polygon } from 'sveaflet';
	import { Radio } from 'flowbite-svelte';

	let color = $state('red');
</script>

<div class="flex items-center gap-4 mb-4">
	<Radio bind:group={color} value="red">Red</Radio>
	<Radio bind:group={color} value="green">Green</Radio>
	<Radio bind:group={color} value="blue">Blue</Radio>
</div>

<div style="width: 100%;height: 500px;">
	<Map options="{{ center: [51.503, -0.06], zoom: 13 }}">
		<TileLayer url='https://tile.openstreetmap.org/{z}/{x}/{y}.png' />
		<Polygon
			latLngs="[51.509, -0.08], [51.503, -0.06], [51.51, -0.047]"
			options="{{ color }}"
		/>
	</Map>
</div>
```

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

### Default SVGOverlay Implementation in Sveaflet

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/SVGOverlay.md

This example shows a default implementation of the SVGOverlay component within a Sveaflet map. It includes a TileLayer for the base map and an SVGOverlay with basic rectangular shapes defined within its bounds and viewBox.

```svelte
<script>
	import { Map, TileLayer, SVGOverlay } from 'sveaflet';
</script>

<div style="width: 100%; height: 500px; ">
	<Map options={{ center: [32, -130], zoom: 4 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<SVGOverlay
			bounds={[
				[32, -130],
				[13, -100]
			]}
			viewBox="0 0 200 200">
			<rect width="200" height="200" />
			<rect x="75" y="23" width="50" height="50" style="fill:red" />
			<rect x="75" y="123" width="50" height="50" style="fill:#0013ff" />
		</SVGOverlay>
	</Map>
</div>
```

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

### Default ImageOverlay Usage in Svelte with Sveaflet

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/ImageOverlay.md

This example shows how to create a map with a tile layer and overlay a single image using ImageOverlay, specifying URL and bounds. It requires Sveaflet imports and a container div for rendering. The bounds define the geographic area; the image is displayed at full opacity by default, with no additional options.

```svelte
<script>
	import { Map, TileLayer, ImageOverlay } from 'sveaflet';
</script>

<div style="width: 100%; height: 500px;">
	<Map options={{ center: [40.799311, -74.33], zoom: 10 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<ImageOverlay
			url="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
			bounds={[
				[40.799311, -74.118464],
				[40.68202047785919, -74.33]
			]}
		/>
	</Map>
</div>
```

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

### Default Circle Usage - Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Circle.md

Example of creating a default circle on a map with basic configuration. Includes Map and TileLayer setup for context.

```svelte
<script>
	import { Map, TileLayer, Circle } from 'sveaflet';
</script>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<Circle latLng={[51.508, -0.11]} />
	</Map>
</div>
```

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

### Default DivIcon Usage in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/DivIcon.md

Example of using the default DivIcon component within a Map and Marker setup. This snippet demonstrates the basic integration with Leaflet's Map and TileLayer.

```svelte
<script>
	import { Map, TileLayer, Marker, DivIcon } from 'sveaflet';
</script>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<Marker latLng={[51.5, -0.09]}>
			<DivIcon />
		</Marker>
	</Map>
</div>
```

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

### Hiding Default Zoom and Adding Custom ControlZoom in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/ControlZoom.md

This example disables the built-in map zoom control via options and manually adds a custom ControlZoom component. It uses the same map setup with TileLayer for visualization. Purpose is to override defaults; inputs are map options like zoomControl: false, outputs provide manual zoom functionality without built-in controls.

```svelte
<script>
	import { Map, TileLayer, ControlZoom } from 'sveaflet';
</script>

<div style="width: 100%;height:500px">
	<Map options={{ center: [51.505, -0.09], zoom: 13, zoomControl: false }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<ControlZoom />
	</Map>
</div>
```

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

### Sveaflet: LayerGroup with Multiple Interactive Shapes and Popups

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/examples/layer-groups-and-layers-control.md

This Sveaflet example demonstrates grouping various interactive map shapes (Marker, Circle, CircleMarker, Polygon, Polyline, Rectangle) within a LayerGroup. It includes functionality to programmatically open popups associated with these shapes using Svelte's reactive features and event handling. Dependencies include sveaflet, svelte, and flowbite-svelte for UI components.

```svelte
<script>
	import { tick } from 'svelte';
	import {
		Map,
		TileLayer,
		LayerGroup,
		Popup,
		Marker,
		Circle,
		CircleMarker,
		Polygon,
		Polyline,
		Rectangle
	} from 'sveaflet';
	import { Button, Label } from 'flowbite-svelte';

	let layerGroup;

	let layers = [];

	let index = 0;

	$: if (layerGroup) {
		tick().then(() => {
			layers = layerGroup.getLayers()
		})
	}

	function openPopup() {
		if (layers.length) {
			layers[index % layers.length].openPopup();
		}
		index++;
	}
</script>

<div class="flex items-center mb-4 gap-4">
	<Button on:click={openPopup}>Open Popup</Button>
	<Label>one by one</Label>
</div>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<LayerGroup bind:instance={layerGroup}>
			<Marker latLng={[51.5, -0.09]}>
				<Popup options={{ content: 'Popup in Marker.' }} />
			</Marker>
			<Circle
				latLng={[51.508, -0.11] và
				options={{
					color: 'red',
					fillColor: '#f03',
					fillOpacity: 0.5,
					radius: 500
				}}>
				<Popup options={{ content: 'Popup in Circle.' }} />
			</Circle>
			<CircleMarker latLng={[51.51, -0.13]} options={{ radius: 30, color: 'orange' }}>
				<Popup options={{ content: 'Popup in CircleMarker.' }} />
			</CircleMarker>
			<Polygon
				latLngs={[
					[51.509, -0.08],
					[51.503, -0.06],
					[51.51, -0.047]
				]}>
				<Popup options={{ content: 'Popup in Polygon.' }} />
			</Polygon>
			<Polyline
				latLngs={[
					[51.512, -0.09],
					[51.515, -0.1],
					[51.52, -0.11]
				]}
				options={{ color: 'purple' }}
				><Popup options={{ content: 'Popup in Polyline.' }} /></Polyline>
			<Rectangle
				bounds={[
					[51.49, -0.08],
					[51.5, -0.06]
				]}
				options={{ color: 'green' }}
				><Popup options={{ content: 'Popup in Rectangle.' }} /></Rectangle>
		</LayerGroup>
	</Map>
</div>

```

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

### LayerGroup Setup - Svelte Import

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/LayerGroup.md

Basic import statement for LayerGroup component from sveaflet library. Required for all LayerGroup functionality including grouping multiple map layers together.

```svelte
<script>
	import { LayerGroup } from 'sveaflet';
</script>
```

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

### Create Tooltip with Dynamic Options

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Tooltip.md

Creates a tooltip with dynamically bound content using Svelte reactivity. Integrates with Flowbite-Svelte input components for real-time updates.

```svelte
<script>
	import { Map, TileLayer, Circle, Tooltip } from 'sveaflet';
	import { Radio, Label, Input } from 'flowbite-svelte';

	let content = $state('Tooltip content.');
</script>

<div class="flex items-center gap-4 mb-4">
	<Label>Content:</Label>
	<Input type="text" bind:value={content} maxlength={20} />
</div>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<Tooltip latLng={[51.508, -0.11]} options={{ content }} />
	</Map>
</div>
```

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

### DivIcon with Slot Content in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/DivIcon.md

Example of using the DivIcon with custom slot content. This snippet demonstrates how to insert custom HTML content inside the DivIcon.

```svelte
<script>
	import { Map, TileLayer, Marker, DivIcon } from 'sveaflet';
</script>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<Marker latLng={[51.5, -0.09]}>
			<DivIcon>
				<div style="font-size:20px;font-weight:bold;color: red;">DivIcon</div>
			</DivIcon>
		</Marker>
	</Map>
</div>
```

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

### TileLayerWMS with Dynamic Options - Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/TileLayerWMS.md

Advanced TileLayerWMS implementation featuring interactive controls for dynamic opacity adjustment. Integrates Flowbite-Svelte components including Label and Toggle for user interaction. Demonstrates reactive state management with Svelte $state and conditional rendering of WMS layer options.

```svelte
<script>
	import { Map, TileLayerWMS } from 'sveaflet';
	import { Label, Toggle } from 'flowbite-svelte';

	let enableOpacity = $state(true);
</script>

<div class="flex items-center gap-4 mb-4">
	<Label>Enable Opacity:</Label>
	<Toggle bind:checked={enableOpacity} />
</div>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }}>
		<TileLayerWMS
			url="http://ows.mundialis.de/services/service?"
			options={{
				layers: 'TOPO-OSM-WMS',
				opacity: enableOpacity ? 0.5 : 1
			}}
		/>
	</Map>
</div>
```

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

### Default GeoJSON Map Setup in Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/GeoJSON.md

Shows how to set up a basic map with a TileLayer and empty GeoJSON component. The map is centered on specific coordinates with a default zoom level.

```svelte
<script>
	import { Map, TileLayer, GeoJSON } from 'sveaflet';
</script>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [39.74739, -105], zoom: 13 }}>
		<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<GeoJSON />
	</Map>
</div>
```

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

### Interactive Map with Sveaflet Components in Svelte

Source: https://context7.com/grayfrost/sveaflet/llms.txt

This example initializes a Leaflet map using the Sveaflet Map component, which serves as the root container providing context to child components like TileLayer, Marker, and Popup. It demonstrates reactive zoom control with Svelte 5 $state and $effect, event handling for clicks and zoom changes, and binding to the map instance for programmatic control. Dependencies include the 'sveaflet' library; inputs are options props and latLng for markers; outputs include bound instance and emitted events; limitations involve requiring a valid tile URL and proper Svelte context propagation.

```svelte
<script>
  import { Map, TileLayer, Marker, Popup } from 'sveaflet';

  let mapInstance;
  let zoom = $state(13);

  function handleMapClick(e) {
    console.log('Map clicked at:', e.latlng);
  }

  function handleZoomEnd(e) {
    zoom = e.target.getZoom();
    console.log('New zoom level:', zoom);
  }

  $effect(() => {
    if (mapInstance) {
      console.log('Map center:', mapInstance.getCenter());
    }
  });
</script>

<div style="width: 100%; height: 600px;">
  <Map
    options={{
      center: [51.505, -0.09],
      zoom,
      zoomControl: false,
      attributionControl: true
    }}
    bind:instance={mapInstance}
    onClick={handleMapClick}
    onZoomend={handleZoomEnd}
  >
    <TileLayer
      url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
      options={{
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
      }}
    />

    <Marker latLng={[51.505, -0.09]}>
      <Popup options={{ content: 'Starting location' }} />
    </Marker>
  </Map>
</div>

<button onclick={() => zoom++}>Zoom In</button>
<button onclick={() => zoom--}>Zoom Out</button>
<button onclick={() => mapInstance?.setView([51.51, -0.1], 15)}>
  Jump to Location
</button>
```

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

### Display WMS Layers in Sveaflet Map

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/examples/wms.md

This Svelte component demonstrates how to integrate multiple Web Map Service (WMS) layers into a Sveaflet map. It utilizes the `Map`, `TileLayerWMS`, and `ControlLayers` components from the 'sveaflet' library. The component allows users to switch between different WMS layers, including topography and place overlays, by configuring the `url` and `options.layers` properties of `TileLayerWMS`.

```svelte
<script>
	import { Map, TileLayerWMS, ControlLayers } from 'sveaflet';
</script>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [-17, -67], zoom: 3 }}>
		<ControlLayers options={{ collapsed: false }}>
			<TileLayerWMS
				checked={true}
        url={'http://ows.mundialis.de/services/service?'}
				name="Topography"
				options={{
					layers: 'TOPO-WMS'
				}}
				layerType="base"
			/>
			<TileLayerWMS
        url={'http://ows.mundialis.de/services/service?'}
				name="Places"
				options={{
					layers: 'OSM-Overlay-WMS'
				}}
				layerType="base"
			/>
			<TileLayerWMS
        url={'http://ows.mundialis.de/services/service?'}
				name="Topography, then places"
				options={{
					layers: 'TOPO-WMS,OSM-Overlay-WMS'
				}}
				layerType="base"
			/>
			<TileLayerWMS
        url={'http://ows.mundialis.de/services/service?'}
				name="Places, then topography"
				options={{
					layers: 'OSM-Overlay-WMS,TOPO-WMS'
				}}
				layerType="base"
			/>
		</ControlLayers>
	</Map>
</div>

```

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

### Create Default Tooltip

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/Tooltip.md

Creates a basic tooltip on a map at specified coordinates with static content. Requires Map, TileLayer, and Tooltip components from Sveaflet.

```svelte
<script>
	import { Map, TileLayer, Tooltip } from 'sveaflet';
</script>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }}>
    <TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<Tooltip latLng={[51.505, -0.09]} options={{ content: 'Tooltip Content.' }} />
	</Map>
</div>
```

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

### Configure Image and Video Overlays with Sveaflet

Source: https://context7.com/grayfrost/sveaflet/llms.txt

Implementation of ImageOverlay and VideoOverlay components with bounds positioning and event handling. Includes opacity controls, error handling, and interactive click events. Dependencies include Sveaflet's Map, TileLayer, ImageOverlay, VideoOverlay, and Rectangle components.

```svelte
<script>
  import { Map, TileLayer, ImageOverlay, VideoOverlay, Rectangle } from 'sveaflet';

  let imageOpacity = $state(0.7);
  let videoOpacity = $state(1.0);
  let showImage = $state(true);
  let showVideo = $state(false);
  let videoPlaying = $state(false);

  // Image overlay bounds (southwest and northeast corners)
  const imageBounds = [[51.49, -0.13], [51.52, -0.08]];

  // Video overlay bounds
  const videoBounds = [[51.505, -0.095], [51.515, -0.085]];

  let imageInstance;
  let videoInstance;

  function handleImageLoad(e) {
    console.log('Image loaded');
  }

  function handleImageError(e) {
    console.error('Image failed to load');
  }

  function toggleVideo() {
    if (videoInstance) {
      const videoElement = videoInstance.getElement();
      if (videoElement) {
        if (videoPlaying) {
          videoElement.pause();
        } else {
          videoElement.play();
        }
        videoPlaying = !videoPlaying;
      }
    }
  }

  function handleVideoLoad(e) {
    console.log('Video loaded');
    const videoElement = e.target.getElement();
    if (videoElement) {
      videoElement.loop = true;
      videoElement.muted = true;
    }
  }
</script>

<div style="width: 100%; height: 600px;">
  <Map options={{ center: [51.505, -0.105], zoom: 13 }}>
    <TileLayer
      url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
      options={{ opacity: 0.6 }}
    />

    <!-- Image Overlay -->
    {#if showImage}
      <ImageOverlay
        url="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
        bounds={imageBounds}
        options={{
          opacity: imageOpacity,
          alt: 'Historical map overlay',
          interactive: true,
          crossOrigin: true,
          errorOverlayUrl: '/images/error-overlay.png'
        }}
        bind:instance={imageInstance}
        onLoad={handleImageLoad}
        onError={handleImageError}
        onClick={(e) => console.log('Image overlay clicked')}
      />

      <!-- Show image bounds -->
      <Rectangle
        bounds={imageBounds}
        options={{
          color: '#e74c3c',
          weight: 2,
          fillOpacity: 0,
          dashArray: '10, 5'
        }}
      />
    {/if}

    <!-- Video Overlay -->
    {#if showVideo}
      <VideoOverlay
        url="https://www.mapbox.com/bites/00188/patricia_nasa.webm"
        bounds={videoBounds}
        options={{
          opacity: videoOpacity,
          interactive: true,
          autoplay: false,
          loop: true,
          muted: true
        }}
        bind:instance={videoInstance}
        onLoad={handleVideoLoad}
        onClick={(e) => {
          console.log('Video overlay clicked');
          toggleVideo();
        }}
      />

      <!-- Show video bounds -->
      <Rectangle
        bounds={videoBounds}
        options={{
          color: '#3498db',
          weight: 2,
          fillOpacity: 0,
          dashArray: '10, 5'
        }}
      />
    {/if}
  </Map>
</div>
```

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

### Default TileLayerWMS Usage - Svelte

Source: https://github.com/grayfrost/sveaflet/blob/main/src/routes/docs/components/TileLayerWMS.md

Basic TileLayerWMS implementation with Map component integration. Creates a map with centered coordinates and zoom level, then adds a WMS tile layer with TOPO-OSM-WMS service. Demonstrates essential props including url and options for layer configuration.

```svelte
<script>
	import { Map, TileLayerWMS } from 'sveaflet';
</script>

<div style="width: 100%;height: 500px;">
	<Map options={{ center: [51.505, -0.09], zoom: 13 }}>
		<TileLayerWMS
			url="http://ows.mundialis.de/services/service?"
			options={{
				layers: 'TOPO-OSM-WMS'
			}}
		/>
	</Map>
</div>
```