/bbox2svg

A demonstration to export SVG from MapboxGL/MapLibreGL Map

Primary LanguageTypeScript

bbox2svg

bbox2svg は、バウンディングボックスを地図から選択することで、その範囲の地図を SVG 形式で瞬時にエクスポートするウェブアプリです。
生成された SVG はレイヤーごとにグループ分けされており、イラストレーターなどのベクタグラフィクスソフトウェアで容易に再編集できます。

使い方

地図上の2点をクリックすると、四角形(バウンディングボックス)の範囲が選択されて SVG のファイルを書き出すことができます。

生成物とライセンス

bbox2svg で生成された SVG のデータは Geolonia と OpenStreetMap のライセンス表記をすることで再利用が可能です。
ライセンス表記が <text /> の要素として同梱されますが、可読性を損なわない範囲でスタイルを自由に改変できます。
より厳密な取り扱い方法について知りたい場合は、これらのデータ提供者の利用規約等を確認してください。

デモページ

デモページで bbox2svg を試すには以下のリンクをクリックしてください:
https://kamataryo.github.io/bbox2svg/

開発方法

以下の手順で bbox2svg をローカル環境で起動できます。

前提条件

  • Node.js (推奨バージョン: v18.14.1以上)

セットアップ

このリポジトリをクローンまたはダウンロードします。

$ git clone https://github.com/kamataryo/bbox2svg.git
$ cd bbox2svg
$ yarn
$ yarn start # 開発サーバースタート

ビルド

プロダクション用にアプリをビルドするには、以下のコマンドを実行してください。 ビルドされたファイルは、build ディレクトリに保存されます。

$ yarn build

コントリビューションの方法

bbox2svg プロジェクトは Issue やプルリクエストをいつでも歓迎しています。皆さんの協力によってさらに良いツールになることでしょう。コントリビューションの方法は以下の通りです。

  1. リポジトリをフォークします
  2. 新しいブランチを作成します(git checkout -b feature/fooBar
  3. 変更をコミットします(git commit -m 'Add some fooBar'
  4. ブランチにプッシュします(git push origin feature/fooBar
  5. 新しいプルリクエストを作成します。

また、プロジェクトに関する問題や提案がある場合は Issue を立てて議論に参加してください。皆さんの意見やフィードバックはプロジェクトの発展に大変役立ちます。

どんな小さな貢献でも、bbox2svg の成長に繋がります。どうぞお気軽に参加してください。

このプロジェクトについて

bbox2svg は、私(@kamataryo)が所属する株式会社 Geolonia のプロダクト、 Geolonia Maps を利用して作成しました。
Geolonia Maps は、github.io ドメインなどで公開されるオープンソースプロジェクトについては無料で利用できるようになっています。
この場を借りて Geolonia に感謝の意を表します。

なお、このプロジェクトは私個人の趣味や興味に基づいて開発されており、Geolonia として公式にサポートされるものではありません。
そのため、プロジェクトに関する意見やフィードバックは全て本プロジェクトの開発に関するものであり、また、発信される全ての情報は Geolonia の公式見解を代表するものではありません。