データセットを地図に追加する

プラットフォームを選択: Android iOS JavaScript

データセット内の対象物を選択的にスタイル設定する場合、FeatureStyleFunction でロジックを定義します。この関数は、定義したロジックをもとに FeatureStyleOptions を返します。スタイル設定のロジックが不要な場合は、FeatureStyleOptions を使って直接スタイルを設定してかまいません。このページでは、データセットを地図に追加し、スタイル設定を適用する方法を説明します。

前提条件

先へ進む前に、マップ ID、地図スタイル、データセット ID を用意しましょう。

• マップ ID と地図スタイルを作成する
• データセットを作成してアップロードする

データセット ID を地図スタイルと関連付ける

試験運用版: この機能は、ライトな地図スタイルでのみ設定できます。この機能が有効になっているライトマップ スタイルをマップ ID にリンクすると、有効になっているレイヤはダークマップ スタイルでも使用できます。

作成しておいたデータセットを使用する地図スタイルと関連付けましょう。手順は次のとおりです。

1. Google Cloud コンソールで、[データセット] ページに移動します。
2. 目的のデータセットの名前をクリックします。[データセットの詳細] ページが表示されます。
3. [プレビュー] タブをクリックします。
4. [地図のスタイルを追加します] までスクロールして、クリックします。
   
5. 関連付ける地図スタイル（複数可）のチェックボックスをオンにして、[保存] をクリックします。

注意: ひとつの地図で複数のデータセットをレンダリングすると、データセットのサイズと数によってはパフォーマンスに影響することがあります。

単純なスタイル規則を使用する

対象物をスタイル設定する最も簡単な方法は、FeatureStyleOptions を渡して各スタイル属性（色、不透明度、線の太さなど）を定義することです。対象物の各種スタイル オプションは、データセット地図レイヤに直接適用するか、FeatureStyleFunction と組み合わせて使用します。

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

注: TypeScript と Google マップの使用方法については、ガイドをご確認ください。

JavaScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.js

宣言型のスタイル規則を使用する

FeatureStyleFunction を使えば、スタイル規則を宣言によって設定し、データセット全体に適用できます。データセットの属性値に応じて、対象物に FeatureStyleOptions を適用します。一部の対象物を不可視のままにする場合などは、対象物スタイル関数（FeatureStyleFunction）で null を返すことも可能です。この例では、各ポイントにデータ属性に応じた色を付けるスタイル関数を示しています。

TypeScript

function setStyle(params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes[
            'CombinationofPrimaryandHighlightColor'
        ];

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.ts

注: TypeScript と Google マップの使用方法については、ガイドをご確認ください。

JavaScript

function setStyle(params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes[
            'CombinationofPrimaryandHighlightColor'
        ];

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.js

データセット地図レイヤにスタイルを適用する

対象物スタイル関数（FeatureStyleFunction）内でスタイルを適用する手順は次のとおりです。

1. map.getDatasetFeatureLayer() を呼び出してデータセット ID を渡し、データセット地図レイヤを取得します。
2. データセットのレイヤに、対象物のスタイル オプション（例: styleOptions）または関数（例: setStyle）を設定することで、スタイルを適用します。

TypeScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

注: TypeScript と Google マップの使用方法については、ガイドをご確認ください。

JavaScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.js

レイヤからスタイル設定を削除する

レイヤからスタイル設定を削除するには、次のように style を null に設定します。

featureLayer.style = null;

一部の対象物を不可視のままにする場合などは、対象物スタイル関数（FeatureStyleFunction）で null を返すことも可能です。

帰属情報テキストを追加する

アップロードしたデータセットを Google マップ上で表示する際は、必要な帰属情報も地図上に表示してください。帰属表示テキストは、Google のロゴを隠したり干渉したりしないように表示する必要があります。

帰属情報テキストを追加する方法としては、カスタム コントロールによって任意の HTML を地図上の標準的な位置に表示することが考えられます。次のコード スニペットは、このサンプルで帰属表示に使用される HTML と CSS を示しています。

<gmp-map
    center="40.757815, -73.933123"
    zoom="11"
    map-id="5cd2c9ca1cf05670"
    map-type-control="false">
    <div id="attribution" slot="control-block-end-inline-start">
        Data source: NYC Open Data
    </div>
</gmp-map>
index.html

#attribution {
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 10px;
    padding: 2px;
    margin: 2px;
}
style.css