インタラクティブなマップ作成のためのLeaflet用Svelteコンポーネントライブラリ・「Sveaflet」

Ads

Sveaflet

インタラクティブなマップ作成のためのLeaflet用Svelteコンポーネントライブラリ・「Sveaflet」
Sveafletはインタラクティブなマップ作成のためのLeaflet用Svelteコンポーネントライブラリです。Svelteフレームワークで人気のマップライブラリであるLeaflet.jsを使えるようにします。

👇 以下、基本使用例です。

<script>
	import { Map, TileLayer, Marker, Popup } from 'sveaflet';
</script>

<div style="width:100%;height:500px;">
	<Map
		options={{
			center: [51.505, -0.09],
			zoom: 13
		}}
	>
		<TileLayer urlTemplate={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
		<Marker latlng={[51.505, -0.09]} />
	</Map>
</div>

使いたい機能を読み込んで<Map>コンポーネントを作成し、サイズを指定した任意のHTML要素でラップします。<Map>optionsプロパティはLeafletクラスのoptionsと同じです。

各コンポーネントの使い方は詳しくドキュメントに書かれていて動作サンプルも用意されているので使い方に困る事はないと思います。SveafletはMITライセンスの元でソースコードが公開されています。

Sveaflet