Polygon - Sveaflet

Vector Layers - Polygon

A component for drawing polygon overlays on a map. Extends Polyline.

Note that points you pass when creating a polygon shouldn’t have an additional last point equal to the first one — it’s better to filter out such points.

Setup #

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

Default Polygon #

  • Svelte
<script>
	import { Map, TileLayer, Polygon } from 'sveaflet';
</script>

<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]
			]}
		/>
	</Map>
</div>

Polygon with Options #

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

	let color = '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>

Polygon with Popup #

  • Svelte
<script>
	import { Map, TileLayer, Polygon, Popup } from 'sveaflet';
</script>

<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]
			]}
		>
			<Popup options={{ content: 'Popup in Polygon.' }} />
		</Polygon>
	</Map>
</div>

Props #

Prop name Description Type Default
latLngs Required LatLng[]
options Optional PolylineOptions {}
Marker Polyline