TileLayerWMS - Sveaflet

TileLayerWMS

Used to display WMS services as tile layers on the map. Extends TileLayer.

Setup #

  • Svelte
<script>
	import { TileLayerWMS } from 'sveaflet';
</script>

Default TileLayerWMS #

  • 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>

TileLayerWMS with Options #

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

	let enableOpacity = 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>

Props #

Prop name Description Type Default
url Required string
options Optional WMSOptions {}
name Optional. Layer name in ControlLayers string
checked Optional. Default selected layer in ControlLayers boolean
layerType Optional. Layer type in ControlLayers ‘base’ | ‘overlay’ | undefined
TileLayer Tooltip