ControlZoom - Sveaflet

Controls - Zoom

A basic zoom control with two buttons (zoom in and zoom out). It is put on the map by default unless you set its zoomControl option to false. Extends Control.

Setup #

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

Default ControlZoom #

  • Svelte
<script>
	import { Map, TileLayer, ControlZoom } 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'} />
		<ControlZoom />
	</Map>
</div>

ControlZoom with Options #

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

	let position = $state('topright');
</script>

<div class="flex items-center gap-4 mb-4">
	<Radio bind:group={position} value="topright">Top Right</Radio>
	<Radio bind:group={position} value="bottomright">Bottom Right</Radio>
	<Radio bind:group={position} value="bottomleft">Bottom Left</Radio>
	<Radio bind:group={position} value="topleft">Top Left</Radio>
</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'} />
		<ControlZoom options={{ position }} />
	</Map>
</div>

Hide default Zoom #

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

Props #

Prop nameDescriptionTypeDefault
optionsOptionalControl.ZoomOptions{}
ControlScale DivIcon