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