🌏
楽天モバイルサービスエリアマップで使用される領域マップについて
エリアマップってなんぞや？
名前もそのまま、楽天モバイルの電波が届く範囲を確認できるマップのことです。
楽天モバイル エリアマップ
どうやって実装している？
ざっくり
Maps JavaScript API を使用し、Google マップ上にピンク色の画像を重ねて表現しています。
ちょっとくわしく
説明を理解するのに必要な知識
1. Zoom レベル
マップの 拡大・縮小 の度合いを表す値です。
こちらの記事がとても見やすくまとめてくださっています
0 <= zoomLevel <= 21
2. Google マップの座標
Google マップは正方形の画像の組み合わせで構成されており、この正方形の画像 1 枚 1 枚をタイルと呼びます。
このタイルの座標を元に、領域画像を重ねることでエリアマップを表現しています。
タイル情報：(x座標, y座標) : Zoom Level
こちらのサイトで実際にマップを操作しながら座標情報を確認可能
3. 領域画像
マップの座標について
で説明したタイルの枚数分の領域画像を用意する必要があります。
楽天モバイル エリアマップを開き、Network タブを見てみると、領域画像を取得しているのが確認できることかと思います。
座標(x, y), Zoom レベルを元に S3 などから参照取得していると思われます。
例：https://hogehoge.s3.ap-northeast-1.amazonaws.com/map-tile/{zoomLevel}/{x}/{y}.png
サンプルコード
index.js
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
maxZoom: 20,
minZoom: 4,
center: { lat: 37, lng: 140 },
});
const imageMap = new google.maps.ImageMapType({
getTileUrl(coord, zoom) {
const srcPath = `/imagePath`;
return `${srcPath}/${zoom}/${coord.x}/${coord.y}.png`;
},
});
map.overlayMapTypes.push(imageMap);
}
initMap();
取得した API_KEY を適宜代入してください。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://maps.google.com/maps/api/js?key={API_KEY}"></script>
<title>GoogleMapsAPI Sample</title>
</head>
<body>
<div id="map"></div>
<script src="index.js"></script>
</body>
</html>
是非試してみてください！ :)
Discussion