ImageOverlay - Sveaflet

Raster Layers - ImageOverlay

Used to load and display a single image over specific bounds of the map. Extends Layer.

Setup #

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

Default ImageOverlay #

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

ImageOverlay with Options #

  • Svelte
<script>
	import { Map, TileLayer, ImageOverlay } 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: [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]
			]}
			options={{ opacity: enableOpacity ? 0.5 : 1 }}
		/>
	</Map>
</div>

Props #

Prop name Description Type Default
url Required String
bounds Required LatLngBounds
options Optional ImageOverlayOptions {}
Icon LayerGroup