maplibre用のsvelteコンポーネントを開発しました

# maplibre用のsvelteコンポーネントを開発しました

オープンソースで東アフリカの水道事業体のデータを管理するWebGISアプリを最近[sveltekit](https://kit.svelte.dev)を使ったものに全て置き換えました。sveltekitに変えたことで開発が一気にしやすくなり、より良いものになってきたと思っています。

- 以前のテンプレート

https://github.com/watergis/mapboxgljs-boilerplate

- 最新のテンプレート

https://github.com/watergis/sveltekit-watergis-template

上記のボイラープレートの中で開発した機能を個別に使いやすいようにsvelteコンポーネントとしてまとめました。

## 開発したコンポーネント

全部で以下のように11個のコンポーネントがあり、ソースコードは[こちら](https://github.com/watergis/svelte-maplibre-components)のGithubレポジトリにMITライセンスで公開してあります。

以下のURLにドキュメントを公開しています。それぞれのコンポーネントごとにデモとサンプルソースコードを載せています。

https://svelte.water-gis.com

- トップページ 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858331/798b1668-7446-2389-352f-48d740f7c57f.png)
- @watergis/svelte-maplibre-exportのページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858331/56465084-7cfe-930d-3e9d-de4b05312e9b.png)

バグや機能追加などありましたら、Githubレポジトリの方にIssueやPull requestをお願いいたします。

### maplibreをsvelteで使うためのコンポーネント

|コンポーネント|ドキュメント|Github|
|---|---|---|
|@watergis/svelte-maplibre-attribute-popup|[doc](https://svelte.water-gis.com/components/attribute-popup/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/attribute-popup)|
|@watergis/svelte-maplibre-export|[doc](https://svelte.water-gis.com/components/export/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/export)|
|@watergis/svelte-maplibre-legend|[doc](https://svelte.water-gis.com/components/legend/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/legend)|
|@watergis/svelte-maplibre-measure|[doc](https://svelte.water-gis.com/components/measure/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/measure)|
|@watergis/svelte-maplibre-menu|[doc](https://svelte.water-gis.com/components/menu/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/menu)|
|@watergis/svelte-maplibre-search|[doc](https://svelte.water-gis.com/components/search/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/search)|
|@watergis/svelte-maplibre-share|[doc](https://svelte.water-gis.com/components/share/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/share)|
|@watergis/svelte-maplibre-style-switcher|[doc](https://svelte.water-gis.com/components/style-switcher/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/style-switcher)|
|@watergis/svelte-maplibre-valhalla|[doc](https://svelte.water-gis.com/components/valhalla/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/valhalla)|

### maplibre用のコンポーネント（svelteと関係なし）

|コンポーネント|ドキュメント|Github|
|---|---|---|
|@watergis/maplibre-center-icon|[doc](https://svelte.water-gis.com/components/center-icon/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/center/)|

### svelteコンポーネント（maplibreと関係なし）

|コンポーネント|ドキュメント|Github|
|---|---|---|
|@watergis/svelte-collapsible-panel|[doc](https://svelte.water-gis.com/components/collapsible-panel/)|[GitHub](https://github.com/watergis/svelte-maplibre-components/tree/main/packages/collapsible-panel)|

## References

- ソースコード
  - https://github.com/watergis/svelte-maplibre-components
- ドキュメンテーション
  - https://svelte.water-gis.com
- sveltekit
  - https://kit.svelte.dev
- maplibre
  - https://maplibre.org