Repolode
dimartarmizi

dimartarmizi/map-to-poster

検索した場所をテーマやレイアウトでカスタマイズし、高解像度の地図ポスターとしてPNG出力できるクライアントサイドWebアプリ。

代替できる製品:Positive Grid PosterMapiful

スター
1,097
フォーク
168
未解決の Issue
5
最終コミット
5 か月前

これは何?

MapToPoster JSを使うと、世界中の好きな場所を検索して、印刷可能な地図ポスターを作成できます。Leafletで描画するMinimal White、Midnight Dark、Satellite Viewなどのラスターテーマと、MapLibre GLで描画するArctic Frost、Blueprint Classicなどのアーティスティックなベクターテーマから選べます。

エディターでは、スタイルだけでなくレイアウトも調整できます。マーカーの追加やドラッグ、OSRMルーティングによる旅行ルートの描画、マットやパスパルトゥー枠の追加、国名・座標・ラベルの表示切り替え、ドラッグ可能な都市ラベルのオーバーレイに対応しています。設定はLocalStorageに保存されます。

PNGファイルとして、最大50,000pxの任意の解像度で出力できます。すべてブラウザー内で動作するため、位置情報がサーバーに送信されることはありません。ViteとTailwind CSSで構築されており、静的ビルドをNginxで配信するDocker構成も含まれています。

主な機能

  • 01Nominatimのジオコーディングを使って、世界中の場所を検索できます。
  • 02LeafletのラスターテーマとMapLibre GLのアーティスティックなベクターテーマを切り替えられます。
  • 03複数のマーカーを追加、ドラッグして、スタイルを設定できます。
  • 04OSRMを使って経路を取得し、旅行ルートを描画できます。
  • 05幅、枠線、透明度を調整できるマット枠を追加できます。
  • 06最大50,000pxのPNGファイルを出力できます。
  • 07すべてブラウザー内で動作し、設定はLocalStorageに保存されます。

ユースケース

  • 地元の街や都市、旅行ルートを壁に飾るポスターとして作成する。
  • 結婚式、記念日、引っ越し祝いに、オリジナルの地図を贈る。
  • セルフホストの静的デプロイから、大判印刷用のデータを作成する。

クイックスタート

  1. 1

    リポジトリをクローンする

    git clone https://github.com/dimartarmizi/map-to-poster.git
  2. 2

    プロジェクトフォルダーに移動する

    cd map-to-poster
  3. 3

    依存関係をインストールする

    npm install
  4. 4

    開発サーバーを起動する(http://localhost:5173 で開きます)

    npm run dev

使う前に知っておきたいこと

  • ローカルで実行するには Node.js 18.0.0 以上が必要です。
  • 地図タイルと検索は、Nominatim、OSRM、CartoDB などのサードパーティサービスに依存します。

トピック

よくある質問

map-to-poster とは?
検索した場所をテーマやレイアウトでカスタマイズし、高解像度の地図ポスターとしてPNG出力できるクライアントサイドWebアプリ。 MapToPoster JSを使うと、世界中の好きな場所を検索して、印刷可能な地図ポスターを作成できます。Leafletで描画するMinimal White、Midnight Dark、Satellite Viewなどのラスターテーマと、MapLibre GLで描画するArctic Frost、Blueprint Classicなどのアーティスティックなベクターテーマから選べます。
map-to-poster は無料で使えますか?ライセンスは?
map-to-poster は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
map-to-poster は今もメンテナンスされていますか?
半年以内に更新あり。map-to-poster の最終コミットは 2026年6月6日 です。
map-to-poster は何に使えますか?
地元の街や都市、旅行ルートを壁に飾るポスターとして作成する。 結婚式、記念日、引っ越し祝いに、オリジナルの地図を贈る。 セルフホストの静的デプロイから、大判印刷用のデータを作成する。
map-to-poster のインストール方法は?
リポジトリをクローンする: git clone https://github.com/dimartarmizi/map-to-poster.git プロジェクトフォルダーに移動する: cd map-to-poster 依存関係をインストールする: npm install 開発サーバーを起動する(http://localhost:5173 で開きます): npm run dev
map-to-poster はどこで入手できますか?
ソースコードとインストール手順は GitHub にあります:https://github.com/dimartarmizi/map-to-poster

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト