データレイヤ

Google マップのデータレイヤには、任意の地理空間データを格納するコンテナがあります。データレイヤを使うと、カスタムデータを保存したり、Google マップ上に GeoJSON データを表示したりできます。

  1. 概要
  2. GeoJSON のロード
  3. GeoJSON データのスタイル化
  4. イベント ハンドラの追加
  5. 外観を動的に変更する

概要

データレイヤの詳細については DevBytes の動画をご覧ください。

Google Maps JavaScript API を使うと、マーカーやポリライン、ポリゴンなどのさまざまなオーバーレイをマップに表示できます。これらの各注釈データはスタイル情報と位置データを結び付けます。google.maps.Data クラスは任意の地理空間データを格納するコンテナです。これらのオーバーレイを追加する代わりに、データレイヤを使って任意の地理空間データをマップに追加する方法もあります。API はデフォルトで、データに含まれる点や線分、多角形などのジオメトリをマーカーやポリライン、ポリゴンとして表示します。これらの地物は通常のオーバーレイと同様にスタイル化することも、データセットに含まれる他のプロパティに応じたスタイリング規則を適用することもできます。

google.maps.Data クラスを使うと、次の処理が可能になります。

  • Add GeoJSON データをマップに追加する
    GeoJSON は、インターネット上の地理空間データに使用される標準フォーマットです。GeoJSON のデータを容易に表示できるよう、Data クラスでは、GeoJSON と同じ構造でデータを表記しています。loadGeoJson() メソッドを使うと、GeoJSON データのインポート、ポイントやラインストリング、ポリゴンの表示が容易に行えます。
  • google.maps.Data を使って任意のデータをモデル化する
    現実世界に存在する物にはほとんど、関連する他のプロパティがあります。たとえば、店には営業時間が、道路には走行速度が、ガールスカウトにはクッキーを売る地域が存在します。google.maps.Data を使うと、これらのプロパティをモデル化して、それに応じてデータをスタイル化できます。
  • データの表示方法を選び臨機応変に表示を切り変えます
    データレイヤを使うと、データの可視化やインタラクションを決めることができます。たとえば、コンビニのマップを見ているときに、乗り継ぎ券を扱っている店だけを表示させたい場合などがあります。

GeoJSON のロード

GeoJSON はインターネット上の地理空間データを共有するための標準フォーマットです。軽量で可読性が高いため、共有や連携を行うには最適なフォーマットです。データレイヤを使うと、以下の 1 行のコードで GeoJSON のデータを Google マップに追加できます。

map.data.loadGeoJson('google.json');

各マップには map.data オブジェクトがあり、これは GeoJSON を含む任意の地理空間データのデータレイヤとして機能します。GeoJSON ファイルをロードして表示するには、data オブジェクトの loadGeoJSON() メソッドを呼び出します。以下の例では、マップを追加して、外部の GeoJSON データをロードしています。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
}

例を見る

GeoJSON のサンプル

このページで紹介している例の多くは、共通の GeoJSON ファイルを使用しています。以下のファイルでは、「Google」の 6 文字をポリゴンとしてオーストラリアの上に表示するよう定義しています。このファイルを自由にコピーまたは修正し、データレイヤの機能を確認してみてください。

注:別のドメインから json ファイルをロードするには、そのドメインでクロスオリジン リソース シェアリングを有効にしておく必要があります。

「google.json」の文字の左にある小さな矢印マークをクリックすると、ファイルの全体が表示されます。

GeoJSON データのスタイル化

データの見え方を指定するには Data.setStyle() メソッドを使います。setStyle() メソッドは、StyleOptions オブジェクト リテラルか、各地物のスタイルを計算する関数のどちらかを受け取ります。

シンプル スタイル規則

地物をスタイル化するには、StyleOptions オブジェクト リテラルを setStyle() に渡すのが最も簡単な方法です。こうするとコレクションの各地物に対して、1 つのスタイルが設定されます。なお、各地物のタイプでレンダリングされるのは、利用可能なオプションのサブセットのみです。そのため、1 つのオブジェクト リテラルに含まれる異なる地物タイプに対して、複数のスタイルを組み合わせることができます。たとえば、以下のコードスニペットでは、ポイント ジオメトリのみに作用するカスタム icon と、ポリゴンのみに作用する fillColor の両方を設定しています。

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

使用可能なスタイルと地物の組み合わせについては、スタイル オプションで詳細をご覧ください。

以下の例では、StyleOptions オブジェクト リテラルを使って、複数の地物に対してストロークを設定し、色を付けています。各ポリゴンのスタイルが同じである点に注意してください。

  // Set the stroke width, and fill color for each polygon
  map.data.setStyle({
    fillColor: 'green',
    strokeWeight: 1
  });

例を見る

宣言型のスタイル規則

マーカーやポリラインなどの多数のオーバーレイのスタイルを更新したい場合、通常は、マップ上の各オーバーレイを繰り返し処理して、スタイルを個別に設定する必要がありますデータレイヤを用いると、宣言的に規則を設定して、それをデータセット全体に適用することが可能です。データや規則が更新されると、すべての地物に自動でスタイリングが適用されます。スタイルのカスタマイズには、地物プロパティを使います。

たとえば、以下のコードセットでは、ASCII 文字セットにおける各文字の位置を調べて、google.json 内の各文字の色を設定しています。ここでは、データと一緒に文字の位置をエンコードしています。

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

スタイルの削除

適用したスタイルを削除したい場合は、setStyles() メソッドに空のオブジェクト リテラルを渡します。

// Remove custom styles.
map.data.setStyle({});

こうすると指定したすべてのカスタム スタイルが削除され、地物はデフォルトのスタイルで表示されるようになります。今後、地物をレンダリングしたくない場合は、StyleOptionsvisible プロパティを false に設定します。

// Hide the Data layer.
map.data.setStyle({visible: false});

デフォルト スタイルのオーバーライド

基本的にスタイリング規則は、データレイヤ内のすべての地物に適用されますが、指定の地物に対して特別なスタイリング規則を適用することもできます。試しに、ある地物をクリックしたときに、ハイライト表示になるようにしてみましょう。

特別なスタイリング規則を適用するときは、overrideStyle() メソッドを使用します。setStyle() で指定済みのグローバル スタイルに加えてoverrideStyle() メソッドで変更したプロパティもすべて適用されます。たとえば、以下のコードはポリゴンがクリックされたときに、塗りつぶしの色のみ変更します。その他のスタイルは何も設定していません。

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
};

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

オーバーライドしたスタイルをすべて削除するには、revertStyles() メソッドを呼び出します。

スタイル オプション

地物のタイプによって、スタイリングに使えるオプションは異なります。たとえば、fillColor はポリゴン ジオメトリに対してのみレンダリングされ、icon はポイント ジオメトリにのみ表示されます。詳細については、StyleOptions のドキュメントをご覧ください。

すべてのジオメトリに使用可能

  • clickable:true なら、地物はマウスイベントやタッチイベントを受け付けます。
  • visible:true なら、地物が表示されます。
  • zIndex:zIndex の順で、すべての地物がマップ上に表示されます。つまり、この値が大きい地物は、値が小さいものよりも前面に表示されます。マーカーは必ず、ラインストリングやポリゴンよりも前面に表示されます。

ポイント ジオメトリに利用可能

  • cursor:マウス ポインタを重ねたときのカーソル表示。
  • icon:ポイント ジオメトリに対して表示するアイコン。
  • shape:ヒット検出に使う画像マップの定義。
  • title:ロールオーバー テキスト。

ライン ジオメトリに利用可能

  • strokeColor:ストロークの色。名前付き拡張色を除くすべての CSS3 色に対応します。
  • strokeOpacity:ストロークの不透明度を 0.0〜1.0 で指定します。
  • strokeWeight:ピクセル単位のストローク幅。

ポリゴン ジオメトリで利用可能

  • fillColor:塗りつぶしの色。名前付き拡張色を除くすべての CSS3 色に対応します。
  • fillOpacity:塗りつぶし色の不透明度を 0.01.0 で指定します。
  • strokeColor:ストロークの色。名前付き拡張色を除くすべての CSS3 色に対応します。
  • strokeOpacity:ストロークの不透明度を 0.0〜1.0 で指定します。
  • strokeWeight:ピクセル単位のストローク幅。

イベント ハンドラの追加

地物は mouseupmousedown などのイベントに応答します。イベント リスナーを追加すると、ユーザーがマップ上のデータとインタラクションを行えるようになります。以下は、マウスオーバー イベントを追加して、マウスカーソルの下にある地物情報を表示する例です。

  // Set mouseover event for each feature.
  map.data.addListener('mouseover', function(event) {
    document.getElementById('info-box').textContent =
        event.feature.getProperty('letter');
  });

データレイヤ イベント

以下のイベントは、どの地物でも共通して利用できます。

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

これらのイベントに関する詳細は、google.maps.data クラスのドキュメントを参照してください。

外観を動的に変更する

データレイヤにスタイルを設定するには、各地物のスタイルを計算する関数を google.maps.data.setStyle() メソッドに渡します。この関数は地物のプロパティが更新されるたびに呼び出されます。

以下の例では、地物の isColorful プロパティを更新するために、click イベントに対してエベント リスナーを追加しています。プロパティが設定されるとすぐに、地物のスタイリングが更新され、変更内容が反映されます。

  // Color each letter gray. Change the color when the isColorful property
  // is set to true.
  map.data.setStyle(function(feature) {
    var color = 'gray';
    if (feature.getProperty('isColorful')) {
      color = feature.getProperty('color');
    }
    return /** @type {google.maps.Data.StyleOptions} */({
      fillColor: color,
      strokeColor: color,
      strokeWeight: 2
    });
  });

  // When the user clicks, set 'isColorful', changing the color of the letters.
  map.data.addListener('click', function(event) {
    event.feature.setProperty('isColorful', true);
  });

  // When the user hovers, tempt them to click by outlining the letters.
  // Call revertStyle() to remove all overrides. This will use the style rules
  // defined in the function passed to setStyle()
  map.data.addListener('mouseover', function(event) {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {strokeWeight: 8});
  });

  map.data.addListener('mouseout', function(event) {
    map.data.revertStyle();
  });

例を見る

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。