ここの地図を、
手元に。

MMJ とは

MMJ は、API キーも地図サーバーも使わずに、自分のサイトに地図を置くためのオープンソースの部品です。 必要な範囲だけを切り出した地図のファイル（PMTiles）と手書きの配色を、静的な置き場に並べ、 HTML に <mmj-map> を書くだけで地図が出ます。 地図のデータは OpenStreetMap、描くのは MapLibre で、コードと配色は MIT ライセンスです。

できること

どれも実際に動いている画面です。押すと開きます。

HTML だけで置く属性を書くだけ。JavaScript は要りません 建物を立てる属性 1 つ。転送量は 1 バイトも増えません 点をまとめる多い点を、寄ると解けるまとまりに 自前の POIベース地図に触らず、自分のデータを重ねる お店を見て回る写真・星・長文をカードで。写真には撮影者の表記を添えられます 経路と案内渡された経路を描き、曲がる地点に吹き出し。写真がある点は、ピンの中に写真が出ます 3D で道案内建物を立てたまま案内。知らない街では建物の形のほうが速い 配色を見くらべる同じタイル・同じ構成で、色だけ違う 6 枚 サイトの色を当てるテーマカラーを 1 色渡すだけ 地域を切り替える大阪・ハノイ・ニューヨーク・ソウルほか 8 地域。コードは変わりません 会場の地図舞浜一帯で 1.9 MB。写真 1 枚より小さい。現在地も出ます 地図に重ねる雨雲・ハザード・地盤・空中写真。どれもラスタタイルなので 1 つで乗ります 雨雲を動かす時刻ごとのタイルを並べて再生。静的配信だけで動きます 面で塗り分ける浸水深・地盤・震度。色は置く側が渡します（MMJ は判断しません） 半径で囲むここから 800 m。外部サービスもデータも要りません 素の地図部品を使わず、MapLibre と PMTiles だけ

なぜ

ウェブに出せる地図は、たいてい他人の地図を、他人の見た目で、他人のメーターで 使うことになります。商用 API は鍵と従量課金が要り、OSM の公式タイルサーバーは 利用方針で商用と大量アクセスを認めていません。 自前でタイルサーバーを立てれば動きますが、今度はタイルサーバーの運用が仕事に加わります。

MMJ は、データは借りて、表現だけを持ちます。

• ベースタイルは Protomaps の日次プラネットビルドから、 必要な範囲だけを切り出して 1 つの PMTiles ファイルにします。 タイル生成パイプラインは自作しません
• スタイルは手書きです。生成物ではなく作品として扱います
• サーバーを立てません。静的配信と HTTP Range だけでデプロイが完結します

配る単位

地図というと「日本の地図」「世界の地図」を思い浮かべますが、 ほとんどの用途で必要なのは「ここ」だけです。 そして範囲を絞ると、大きさが桁で変わります。

惑星は端末に置けません。会場は置けます。

「世界中のタイルは持てない」は MMJ の制約でしたが、範囲を絞る用途では前提になります。 会場・駅・学校がそれぞれ自分の範囲だけを持てば、アクセスが 1 か所に集まりません。 混雑した場所で地図が出ないのは、たいてい全員が同じ配信元を見ているからです。

会場の地図は、通信を切っても出ます。 一度開けば、地図・ラベルの字・描く道具（合計 3.6 MB）が端末に残るためです。 これは会場ほどの範囲だからできることで、日本全土では同じことはできません。

現在地は衛星から測るので、通信が無くても出ます （locate を付けたときだけ。付けない限り位置情報は要求しません）。 ただし通信が無いと初回の測位に数十秒かかることがあります。

使い方

要るものは 3 つだけです。そのうち 2 つは MMJ が配っています。

1. 部品を入れる

   pnpm add @mmj-map/elements

   素の ES モジュールで、ビルド工程はありません。コピーでも動きます。

2. スタイルを選ぶ

   6 枚から 1 枚をページの隣へ置きます。 サイトのテーマカラーを 1 色渡すだけでも変わります。

3. タイルを用意する

   pnpm tiles:extract -- demo

   ここだけは自分で置きます。配信されたタイルはありません。 上流 138 GB のうち必要な範囲だけを HTTP Range で取るので、 1 地域あたり数十秒・数十 MB です。

手順の詳細は 導入手順 に、 English / 日本語 / 繁體中文 / 简体中文 / Tiếng Việt で置いてあります。

Google マップから始めるなら、Chrome 拡張があります。 開いている場所で押すと、同じ中心と縮尺の地図を、そのまま貼れる HTML にします。 会社名・住所を入れればピンも立ち、AI に渡す形でも写せます。 読むのはタブの URL だけです。 Chrome ウェブストアで入れる

npm で部品を入れる Chrome 拡張を入れる

これまでの版と変わったことは npm の版の一覧と 変更の記録にあります。

ロードマップ

どこまでできていて、次に何をするか。続けるのをやめる条件も先に書いておきます。

• 済み —— 地図の部品（目印・自前の点・まとめ・経路・円・重ね・塗り分けほか）、 切り出しの道具、配色 6 枚、8 地域の見本、Chrome 拡張
• いま —— 使っている人の要望から直す。自分たちで案を足していくのはやめ、測って出た事実だけで動きます
• 次 —— 日本の次の地域のスタイル（台湾・上海・ベトナム・シンガポール）
• その後 —— React・Vue 向けの薄い包み。予定で、まだ書いていません
• 決めていない —— すぐ試せるタイルの配信先を用意するか。 日本語の字形を自前で配るか（いまは閲覧側のフォントで描いています）

次のどれかが起きたら、続ける前に企画を見直します。

• Protomaps の日次プラネットビルドが止まる、または利用条件が変わる
• 手書きの配色が、汎用のスタイルと見分けがつかない水準に留まる
• 部品が、MapLibre を直接呼ぶのと変わらない厚さにしかならない

作らないものは下の節にまとめてあります。

よくある質問

• API キーや料金は要りますか。 要りません。地図サーバーも従量課金もありません。コードと配色は MIT です。 置き場（GitHub Pages など）の条件だけは、置く側で確かめてください
• 日本以外でも使えますか。 使えます。切り出せる範囲は地球全体です。配色が一番作り込んであるのが日本で、 ほかの 7 地域も同じコードで出ています
• 通信が無くても出ますか。 会場ほどの範囲なら出ます。一度開けば、地図と描く道具が端末に残ります。 日本全土のような広さでは、同じことはできません
• Google マップから乗り換えると安くなりますか。 安くするための道具ではありません。座標の取得元が「その提供者の地図の上に表示すること」を 条件にしている場合、ベース地図だけを差し替えることはできません
• React や Vue でも使えますか。 部品は HTML の要素なので、そのまま置けます。専用の包みはまだ書いていません
• 日本語のラベルはどう出ますか。 見ている人の端末のフォントで描きます。そのため、字の形は端末ごとに変わります
• 表示で守ることはありますか。 © OpenStreetMap contributors を画面から消さないでください。地図のデータは ODbL です

作らないもの

• タイルサーバー。その fork も作りません
• レンダリングエンジン。それは MapLibre の仕事です
• ジオコーダ・経路探索・地点データベース。 経路は描きますが、計算はしません
• 地図の費用を下げる道具ではありません。 座標の取得元が「その提供者の地図の上に表示すること」を条件にしている場合、 ベース地図だけを差し替える自由はありません