Google Maps Apiで地図に色々な地理院タイルを適用してみよう！

久しぶりの投稿です〜

最近tree-maps開発ブログの方ばかりに投稿していてこっちのブログに投稿してなかったので、久しぶりの投稿になります。

先日tree-mapsのプロットページのスタイル適用機能に、沢山の地理院タイルを追加しました。
www.tree-maps.com

この地理院タイルについて、適用方法をまとめてみます。

地理院タイル一覧

国土地理院はGoogle Mapに適用できるタイルを実は用意してくれています。
地理院地図｜地理院タイル一覧

このタイルをGoogle Mapに被せると、昔の航空写真等を適用する事ができたりしてしまうのです。専門的なタイルも沢山あり、地図に関わる特定の方々が喜ぶタイルもあると思いますよ！

地理院タイルの適用

es2015で、しかも中途半端にしか書きませんが、以下のようにmap（new google.maps.Mapオブジェクト）に対して、以下のように後付でオプションを設定してあげると、地理院タイルを適用する事ができます。

// 地図の指定
const tileType = 'std';
const tileExtension = 'png';
const supportZoomMax = 21;
const supportZoomMin = 0;

const getMapOption = (tileType, tileExtension, zoomMax, zoomMin) => {
    return {
        name: "地理院地図(GSI Maps)",
        tileSize: new google.maps.Size(256, 256),
        minZoom: zoomMin,
        maxZoom: zoomMax,
        getTile: (tileCoord, zoom, ownerDocument) => {
            const img = ownerDocument.createElement("img")
            img.id = 'gsi-map-layer-image'
            img.style.width = "256px"
            img.style.height = "256px"
            const x = (tileCoord.x % Math.pow(2, zoom)).toString()
            const y = tileCoord.y.toString()
            img.src = 'http://cyberjapandata.gsi.go.jp/xyz/' + tileType + '/' + zoom + '/' + x + '/' + y + '.' + tileExtension
            return img
        }
    }
};

map.setMapTypeId('GsiMaps');
map.mapTypes.set("GsiMaps", getMapOption(tileType, tileExtension, supportZoomMax, supportZoomMin));

上記の「地図の指定」の4つのconstの値を変えると、簡単に様々の地理院タイルを適用する事ができます。

例えばtree-mapsでは実際に、constの代わりに以下のようにjsonで定数を用意し、対応するズーム値等をまとめています。

styleMap: {
    anaglyphmapGray: {
        value: 'anaglyphmapGray',
        label: '[地理院タイル] アナグリフ グレー',
        roadMap: false,
        mapTypeControl: false,
        tileBaseUrl: 'http://cyberjapandata.gsi.go.jp/xyz/anaglyphmap_gray',
        tileExtension: 'png',
        supportZoomMin: 2,
        supportZoomMax: 16,
    },
    hillshademap: {
        value: 'hillshademap',
        label: '[地理院タイル] 陰影起伏図',
        roadMap: false,
        mapTypeControl: false,
        tileBaseUrl: 'http://cyberjapandata.gsi.go.jp/xyz/hillshademap',
        tileExtension: 'png',
        supportZoomMin: 2,
        supportZoomMax: 16,
    },
},    

実装時の注意点

mapTypeIdが変わってしまう

通常の地図だと

map.setMapTypeId(google.maps.MapTypeId.ROADMAP)

というように、ロードマップが適用されます。
しかし地理院タイルの指定時は「GsiMaps」とユニーク値を指定しているので、tree-mapsのように地図のスタイルを変えたり元に戻す必要が有る場合、通常の地図に戻す場合は上記のようにロードマップに戻してあげる必要があります。

対応しているズーム値

最初嵌ったのですが、沢山ある地理院タイルは、それぞれ対応しているGoogle Mapのズーム値が決められています。

例えばズームレベルの項目に「9～11」と書かれていたら、zoomMax: 11, zoomMin: 9 のみ対応しています。それ以外のズーム値は画像が用意されていないので、必ず対象の地図にかかれているズームレベルを確認して設定する必要があります。

必ずしも0〜21の値が指定できる訳ではないので注意しましょう。

対応している地域

「提供範囲」という部分が画像を配信している地域です。これが「日本全国」であれば、日本の画像のみが表示でき、海外を表示しようとするとタイル画像が404になったりします。

例えば「西之島付近噴火活動 標高タイル（2013年12月17日）」のタイルがありますが、ここの提供範囲は「西之島付近」とだけ書かれているので、それ以外の地域ではタイル画像は404になります。相当範囲が狭いので、汎用的な地図サービスで使うにはちょっと難しいですね。

ズームレベルが不正確？

例えば「アナグリフ」の「グレー」のタイルですが、ズームレベルを見ると2〜18に対応してそうに見えますが、私が試してみたところ、どうも「2〜16」しか対応していませんでした。

もしかしたらズームレベルの17〜18は特定の地域しか配信されていないのかもしれませんね。

タイル画像にはpngだけでなくjpgもある

これはよく見ていないとタイル画像が404になり、「は？」と思ってしまう点です。

タイルにはpngとjpgの2種類があるので注意する必要があります。

雑感

最近ひたすらtree-mapsの開発をしているのですが、google maps apiで今まで使った事が無かったAPIを大量に使いました。

特に地物の強調は「あ、こんな機能あるのか、マジか〜」と思いました。ただ、地物の指定は使い方が非常に煩雑で、「これの場合はあのオプションしか効かない」「あれの場合はこっちのオプションしか効かない」等、条件分岐が大変多いのですが、それらについてリファレンスに書かれていません。。。

なので、自分で試してみて「あれが有効」「これが有効」を調べる必要があり、なかなか大変です。

ルート機能についても同様で、あのオプションはこのオプションしか効かない、この機能はアメリカでしか動かない等があり、こちらもかなり厄介です。

バカ正直に地物やルート機能を実装するとUIが大変難しくなってしまうので、本当はもっと機能があるけど、敢えて操作が簡単になるように解りやすいUIにしています。本当はもっと細かく地物の強調を設定できたりしますが、UIが複雑過ぎて駄目なのですよね。

まだまだtree-mapsで追加したい機能があるので、これからもtree-mapsをよろしくお願いします！！
www.tree-maps.com