はじめに
国連でイコールアース図法などの正積図法の利用を促す決議が採択されたというニュースを目にした方も多いのではないでしょうか。
Web地図では、Web Mercator（メルカトル図法）が広く使われています。
一方で、Web Mercatorは高緯度ほど面積が大きく表示されるため、グリーンランドなどが実際より大きく見えてしまいます。
今回は、面積を正しく表現できるEqual Earth（イコールアース）図法を使って、MapLibre GL JSで世界地図を表示してみます！
動作するデモサイトのリンク
Web地図らしく、インタラクティブな操作が体験できます。
https://mayuge.github.io/EQUAL_EARTH_PROJECTION/
イコールアース図法のWeb地図を作る方法
フォルダ構造を以下のようにします。
フォルダ構造
.
├── index.html
└── dist/ # distフォルダは参考文献から取得
├── maplibre-gl-shared.mjs
├── maplibre-gl-worker.mjs
├── maplibre-gl.css
└── maplibre-gl.mjs
index.htmlのソースコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Equal Earth Map Demo</title>
<link rel="stylesheet" href="./dist/maplibre-gl.css" />
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import * as maplibregl from "./dist/maplibre-gl.mjs"
const map = new maplibregl.Map({
container: "map",
style:
"https://raw.githubusercontent.com/mayuge/OpenSourceStyle/refs/heads/main/style.json",
center: [0, 0],
zoom: 1,
})
map.on("style.load", () => {
map.setProjection({
type: "equal-earth",
transition: false,
})
})
map.addControl(new maplibregl.NavigationControl(), "top-right")
</script>
</body>
</html>
地図のスタイルが読み込まれたときに、イコールアース図法を指定します。
map.on("style.load", () => {
map.setProjection({
type: "equal-earth",
transition: false,
})
})
index.htmlをクリックしても動かないのは正常
→pythonを使ってサーバーを起動します！
index.htmlのあるディレクトリまで移動し、pythonコマンドを入力
python -m http.server
ブラウザで http://localhost:8000 を開くと、index.htmlを表示できます。
おまけ
背景の地図のデザインを変えたい場合はmaptunikというサイトでベクトルタイルの地図のスタイルを変更できます！
以上
ソースコード
参考文献