2026/10/14

Leafletの地図が「API KEY REQUIRED」だらけになったときはCARTOのタイルを疑う

個人開発 / Webアプリ / Leaflet / トラブル対応

物の一生を地図でたどる自作アプリ「物の一生ビューア」を開いたら、地図が一面、斜めの文字で埋まっていました。

CARTOのタイル。暗い背景に「API KEY REQUIRED carto.com/basemaps/apikey」と斜めに書かれている

タイル1枚1枚に「API KEY REQUIRED」「carto.com/basemaps/apikey」と書かれています。地図まわりのコードは変えていませんでした。

エラーが出ないので気づきにくい

ブラウザの開発者ツールを開いても、コンソールにエラーは出ていませんでした。ネットワークのタブを見ても、タイルの読み込みはすべて成功しています。

使っていたのは、Leaflet でよく使われる CARTO の暗い地図です。

L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
  // APIキーは付けていない
});

CARTO のサーバーは、キーのないリクエストにも「成功」として案内の画像を返していました。 読み込みは成功しているので、Leaflet もブラウザもエラーを出しません。

原因を確かめるには、タイルを1枚 curl で取ってきて、ヘッダーと画像を見るのが早いです。2026年10月14日に試した結果です。

curl -s -o tile.png -D - "https://a.basemaps.cartocdn.com/dark_all/5/28/12.png"

HTTP/1.1 200 OK
Content-Type: image/png
Content-Length: 2513
Cache-Control: public, max-age=2592000, immutable

ステータスは200、中身は正常なPNGです。保存した画像を開くと、記事の冒頭と同じ「API KEY REQUIRED」の画像でした。

ステータスコードだけを見る監視では、この状態を「正常」と判定してしまいます。画像を実際に開いて見るのが確実です。

CARTO でキーを取る方法もありますが、ほかの自作アプリでは OpenStreetMap の標準タイルを使っていたので、そちらにそろえました。

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap',
  className: 'light-tiles',
});

OpenStreetMap の標準タイルは、帰属表示（attribution）を出すことや、大量に読み込まないことなどの利用規約があります。個人の小さなアプリなら問題ない範囲ですが、アクセスが増えるならタイルの提供元を見直す必要があります。

CARTO の暗い地図の代わりに、最初は OpenStreetMap のタイルを CSS で反転させて暗くしました。

.dark-tiles { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }

見た目はそれらしくなりましたが、あとでデザインを見直したときに、反転したタイルは全体が濁って見え、上に置いたピンが埋もれることが分かりました。

最終的には明るい地図に戻し、色を少しだけ抑えて、ピンが目立つようにしています。

.light-tiles { filter: saturate(.35) brightness(1.03); }

無料の地図タイルは、提供元の都合で条件が変わります。今回はエラーが出ないので、自分で地図を開くまで気づけませんでした。

地図が「壊れている」のではなく「案内が表示されている」状態なので、画像の文字をそのまま検索すると原因にたどり着けます。