自身のウェブサイトやアプリケーションにカスタムマップを表示したい場合、サイトへの登録やユーザーデータベースの作成、使用料の支払いなど面倒な手順を踏む必要がある場合もあります。しかし、ソフトウェアエンジニアのZsolt Ero氏が提供する「OpenFreeMap」は、無料でカスタムマップを表示できるほか、セルフホストすることも可能です。

OpenFreeMap

https://openfreemap.org/



実際に表示されるマップの例が以下。白黒でシンプルに表示されるマップが「Positron」です。



「Bright」ではカラーでマップが表示されるほか、ビルなどの名称が表示されます。



「3D」はマップを鳥瞰(ちょうかん)で見ることが可能で、ビルなどが立体的に表現されているのが特徴です。右クリックでマップを回転・角度を変化させることも可能です。



もう一つのスタイル「Liberty」は「Bright」と「3D」を組み合わせたものです。自由に俯瞰(ふかん)と鳥瞰を切り替えることができます。



Ero氏によると、OpenFreeMapで使用している地図データはオープンデータの地理情報を作るプロジェクト「OpenStreetMap」から入手しているとのこと。また、パブリックインスタンスの使用は完全に無料で、マップの閲覧数やリクエスト数の制限はありません。また、登録の必要やAPIキーの使用、Cookieの使用なども存在せず、ユーザーからの寄付を通じて運営費を賄っているそうです。

OpenFreeMapをウェブサイトやアプリケーションに統合する場合、オープンソースの地図ライブラリ「MapLibre GL JS」を使用します。MapLibre GL JSをHTMLに組み込むには、まず「maplibre-gl」パッケージをインストールして、＜head＞タグ内に＜script＞と＜link＞タグを用いてMapLibre GL JS のJavaScriptとCSSを読み込みます。これにより、地図の表示機能とスタイルが適用されます。また、必要に応じて地図にコントローラーやマーカー、ポップアップなどの追加や色を変更することも可能です。

OpenFreeMapの詳細な統合方法は、以下のクイックスタートガイドで示されています。

OpenFreeMap Quick Start Guide

https://openfreemap.org/quick_start/

OpenFreeMapは本番環境のセットアップも含め、全てがオープンソースで開発されています。そのため、ユーザーによるセルフホストやパブリックインスタンスの使用も可能です。セルフホストの方法については以下のページでまとめられています。

openfreemap/docs/self_hosting.md at main · hyperknot/openfreemap · GitHub

https://github.com/hyperknot/openfreemap/blob/main/docs/self_hosting.md

なお、OpenFreeMapのソースコードはGitHub上で公開されており、帰属表示を徹底した上での商用利用も認められています。

GitHub - hyperknot/openfreemap: Free and open-source map hosting solution with custom styles for websites and apps, using OpenStreetMap data

https://github.com/hyperknot/openfreemap