あらゆるソースのタイル、ベクターデータ、マーカーを表示する高性能なインタラクティブWebマップ用JavaScriptライブラリ。
dimartarmizi/map-to-poster
検索した場所をテーマやレイアウトでカスタマイズし、高解像度の地図ポスターとしてPNG出力できるクライアントサイドWebアプリ。
代替できる製品:Positive Grid Poster
Mapiful
- スター
- 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
リポジトリをクローンする
git clone https://github.com/dimartarmizi/map-to-poster.git - 2
プロジェクトフォルダーに移動する
cd map-to-poster - 3
依存関係をインストールする
npm install - 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 の数値は毎日更新されます。
関連プロジェクト
OpenStreetMapのデータを使い、選んだ都市の全道路をブラウザー上で地図風に一括描画します。
ブラウザー上で動作するJavaScript製の図表・ホワイトボード編集ツール。クライアント側で実行でき、セルフホストにも対応します。
ドキュメント、スプレッドシート、プレゼンテーション、フォーム、カンバンボードなどをリアルタイム編集できる、エンドツーエンド暗号化対応のオープンソース共同作業スイート。
ブラウザから参加でき、画面共有やチャット、ホワイトボードを備えた、セルフホスト型のオープンソースP2P WebRTCビデオ会議システム。
顧客・サービス・提供者の管理、営業時間の設定、Google Calendarとの同期に対応したセルフホスト型の予約管理Webアプリ。