DivIcon - Sveaflet

Basic Types - DivIcon

Represents a lightweight icon for markers that uses a simple <div> element instead of an image. Inherits from Icon but ignores the iconUrl and shadow options.

Setup #

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

Default 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 />
		</Marker>
	</Map>
</div>

DivIcon with Options #

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

DivIcon with slot content #

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

Props #

Prop name Description Type Default
options Optional DivIconOptions {}
ControlZoom GeoJSON