このサイトで JavaScript が必要です。

バージョン 21.2

このコンテンツは役に立ちましたか？

igMap のスタイル設定

トピックの概要

目的

このトピックでは、テーマを使用して igMap™ コントロールのルックアンドフィールをカスタマイズする方法を説明します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要なトピックと外部記事の一覧です。

概念

カスケードスタイルシート
リンクされた CCS ファイルの変更によるテーマの適用

トピック

Ignite UI for jQuery のスタイル設定とテーマ設定: Ignite UI for jQuery™ ライブラリのスタイルとテーマの更新に関する概要とその手順を説明します。
igMap の概要: このトピックは、igMap コントロールについて、その主要機能、最小要件、ユーザーインタラクションといった事項の概念的情報を提供します。
igMap の追加: このトピックは、基本的な機能を備えた簡易 igMap コントロールを Web ページに追加する方法を示すチュートリアルです。

外部リソース

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

igMap の概要

igMap コントロールは、開発者がアプリケーション固有のオーバーレイを使用してマップを簡単にプロットできるように設計されています。igMap コントロールは、スタイルおよびテーマを適用するために jQuery UI CSS Framework を使用します。デフォルトでは、igMap は、アプリケーションで使用するため Infragistics® により提供される jQuery UI テーマである IG テーマを使用します。それに加えて、IG テーマにはマップ固有のスタイルがいくつかあります。これは、マップの外観をカスタマイズするには、汎用の jQuery UI テーマでは十分でないためです。ツールチップや Overview Plus Detail (OPD) 画面など、マップ固有の要素を変更するスタイルクラスを追加で提供する必要があります。

マップシリーズのカラーはオプションで制御され、使用されている特定のシリーズのタイプにより異なります。たとえば、Geographic Symbol および Geographic Shape シリーズはマーカーをサポートし、他のマップシリーズはポリラインや等高線などのビジュアル表現やマップデータごとの色分けを採用しています。

Ignite UI for jQuery ライブラリでテーマを使用する方法の詳細については、「Ignite UI for jQuery のスタイル設定とテーマ設定」トピックをご覧ください。

注: Ignite UI for jQuery のベーステーマはマップには不要で、マップのみ表示されたページでは問題なく省略できます。

テーマの概要

Ignite UI for jQuery は、igMap コントロールで使用できる以下のテーマを提供しています。

IG
Metro

これらについては、テーマの概要表のテキストブロックで説明します。

テーマの概要表

以下の表は、igMap コントロールで使用できるテーマをまとめています。

テーマ		説明
IG		パス: {IG CSS root}/themes/infragistics/ ファイル: infragistics.theme.css このテーマは、すべての Ignite UI for jQuery コントロールの一般的なビジュアル機能を定義します。IG テーマの使用方法の詳細については、「Ignite UI for jQuery のスタイル設定とテーマ設定」トピックをご覧ください。
Metro		パス: {IG CSS root}/themes/metro/ ファイル: infragistics.theme.css このテーマは、新しい Windows® 8 Metro ユーザーインターフェイスとタッチ対応デバイスに関するビジュアル機能を定義します。OPD パネルの角ばったコーナーと多少異なるカラーが特長です。

必要なカスケードスタイルシート (CSS)

必要な CSS の概要

マップを正しく描画するためには以下の CSS リソースが必要です。

infragistics.theme.css - IG テーマが含まれています。
infragistics.ui.map.css - チャート構造が含まれています。

以下のコードスニペットでは、CSS リソースが Web サイトまたはアプリケーションルート下の Content/ig フォルダーに保存されていることを前提としています。

注: 以下のブロックは、必要な CSS ファイルを手動で組み込む場合の情報を提供しています。ただし、Infragistics Loader コントロールを使用してこれらのファイルをページに読み込むことをお勧めします。

必要な CSS コード: HTML

HTML の場合:

<link href="Content/ig/themes/Infragistics/infragistics.theme.css" rel="Stylesheet" />
<link href="Content/ig/structure/modules/infragistics.ui.map.css" rel="Stylesheet" />

必要な CSS コード: ASPX

ASPX の場合:

<link href='<%= Url.Content("~/Content/ig/themes/Infragistics/infragistics.theme.css")%>' rel="stylesheet" type="text/css" />
<link href='<%= Url.Content("~/Content/ig/structure/modules/infragistics.ui.map.css")%>' rel="stylesheet" type="text/css" />

マップスタイル設定オプションの参照

マップスタイル設定オプションの参照の概要

igMap コントロールは、主にグラフィックスコンテンツコントロールで、コントロールのビジュアル要素をすべて管理するプロパティとスタイル設定オプションを備えています。

個々のオプションで、以下を定義できます。

マップシリーズのアウトラインおよび塗りつぶしカラー
特定のシリーズのマーカーアウトラインおよび塗りつぶしカラー
地理散布エリアシリーズまたは等高線シリーズのカラーパレット
地理図形シリーズで個々の図形のスタイルを計算するカスタム関数
背景コンテンツプロバイダー、および任意でプロバイダーから使用する画像セット
すべてのマップタイルがプロバイダーから読み込まれるまで表示する背景色

設定されたマッププロパティは CSS ファイルの style クラスより優先されます。これらのプロパティにより、実行時にマップの外観がプログラムで変更されます。

マップスタイル設定オプションの参照の概要表

以下の表は、igMap コントロールの主なプロパティの目的と機能についてまとめています。

プロパティ	説明	関連先
backgroundContent	マップをプロットする場合に使用する、背景コンテンツプロバイダーを構成します。現在サポートされているプロバイダーは Bing® Maps および OpenStreetMap です。詳細は、マッププロバイダーの構成 (igMap) のトピックを参照してください。	すべてのシリーズ
plotAreaBackground	一部のマップタイルのダウンロード中に表示されるマップの背景など、現在のプロットエリアの背景に使用するブラシを構成します。	すべてのシリーズ
series[“key”].brush	key という名前のマップシリーズの主なビジュアル要素の塗りつぶしカラーを構成します。	図形
series[“key”].outline	key という名前のマップシリーズの主なビジュアル要素のアウトラインカラーを構成します。	図形ポリライン
series[“key”].markerBrush	key という名前のマップシリーズのマーカーの塗りつぶしカラーを構成します。	記号図形
series[“key”].markerOutline	key という名前のマップシリーズのアウトラインカラーを構成します。	記号図形
series[“key”].colorScale	地理散布エリアシリーズのデータ範囲を表す場合に使用するカラーのパレットを構成します。	散布エリア
series[“key”].fillScale	地理等高線シリーズのラインをプロットする場合に使用するカラーのパレットを構成します。	等高線
series[“key”].shapeStyleSelector	個々の図形のブラシとアウトラインの設定を戻す、key という名前の地理図形シリーズのカスタム関数を構成します。	図形

コード例

コード例の概要

以下の表は、このトピックで使用したコード例をまとめたものです。

例	説明
コード例: マーカー塗りつぶしとアウトラインの変更	この例は、カスタムの塗りつぶしカラーおよびアウトラインのカラーをマーカーに構成する方法を示します。
コード例: 図形塗りつぶしとアウトラインの変更	この例は、カスタムの塗りつぶしおよびアウトラインのカラーを地理図形に構成する方法を示します。
コード例: カラースケールの適用	この例は、カラースケールを地理散布エリアシリーズに構成する方法を示します。
コード例: 塗りつぶしスケールの適用	この例は、カラースケールを地理等高線シリーズに構成する方法を示します。
コード例: 図形スタイルのカスタムロジックの提供	この例は、地理図形シリーズのカスタム図形スタイル選択ロジックを設定する方法を示します。

コード例: マーカー塗りつぶしとアウトラインの変更

説明

この例は、カスタムの塗りつぶしカラーおよびアウトラインのカラーをマーカーに構成する方法を示します。マーカーは地理シンボルシリーズと地理図形シリーズでプロットされています。地理シンボルシリーズのコンテキストで例を示しています。実際のカラーは HTML カラー名定数 (例: 「red」)、rgba 構文 (例: rgba(100,100,100,0.5)) または16 進カラーコード (例: 「#347235」) のいずれかになります。

以下の表は、例にあるデフォルトのマップとカスタムのマーカー塗りつぶしおよびアウトラインカラーを設定した同じマップがどのように見えるかを示しています。

デフォルトマーカー	カスタムマーカー

コード

以下のコードでは、series オブジェクトの markerBrush オプションと markerOutline オプションを使用して、黒のマーカーアウトラインと赤のマーカー塗りつぶしを JavaScript で設定しています。

JavaScript の場合:

$("#map").igMap({
    width: "700px",
    height: "500px",
    backgroundContent: {
        type: "openStreet"
    },
    series: [{
        type: "geographicSymbol",
        name: "worldCities",
        dataSource: data,
        latitudeMemberPath: "Latitude",
        longitudeMemberPath: "Longitude",
        markerType: "automatic",
        markerBrush: "red", 
        markerOutline: "black"
    }],
    windowRect: {
        left: 0.27,
        top: 0.20,
        height: 0.45,
        width: 0.45 
    }
});

以下のコードでは、igMap コントロールの MVC ヘルパーの MarkerBrush() 呼び出しと MarkerOutline() 呼び出しを使用して、黒のマーカーアウトラインと赤のマーカー塗りつぶしを ASP.NET MVC で設定しています。

ASPX の場合:

<%= Html.Infragistics().Map(Model)
        .ID("map")
        .Width("700px")
        .Height("500px")
        .BackgroundContent(bgr => bgr.OpenStreetMaps())
        .Series(series => {
            series.GeographicSymbol("worldCities")
                .LatitudeMemberPath(item => item.Latitude)
                .LongitudeMemberPath(item => item.Longitude)
                .MarkerType(MarkerType.Automatic)
                .MarkerBrush("red")
                .MarkerOutline("black");
        })
        .WindowRect(0.27, 0.20, 0.5, 0.5)
        .DataBind()
        .Render()
%>

コード例: 図形塗りつぶしとアウトラインの変更

説明

この例は、カスタムの塗りつぶしおよびアウトラインのカラーを地理図形に構成する方法を示します。図形は地理図形シリーズでプロットされています。実際のカラーは HTML カラー名定数 (例: 「red」)、rgba 構文 (例: rgba(100,100,100,0.5)) または16 進カラーコード (例: 「#347235」) のいずれかになります。

以下の表は、例にあるデフォルトのマップとカスタムの塗りつぶしカラーとアウトラインカラーを設定した同じマップがどのように見えるかを示しています。

デフォルトカラー	カスタムカラー

コード

以下のコードでは、シリーズオブジェクトの brush オプションと outline オプションを使用して、青のアウトラインと水色の塗りつぶしを JavaScript で設定しています。

JavaScript の場合:

$("#map").igMap({
    width: "700px",
    height: "500px",
    backgroundContent: {
        type: "openStreet"
    },
    series: [{
        type: "geographicShape",
        name: "indianLands",
        shapeMemberPath: "points",
        shapeDataSource: '/Data/indlan.shp',
        databaseSource: '/Data/indlan.dbf',
        brush: "Lightblue",
        outline: "Blue"
    }],
    windowRect: {
        left: 0.2470, 
        top: 0.34, 
        width: 0.06, 
        height: 0.06
    }
});

以下のコードでは、igMap コントロールの MVC ヘルパーの Brush() コールと Outline() コールを使用して、青のアウトラインと水色の塗りつぶしを ASP.NET MVC で設定しています。

ASPX の場合:

<%= Html.Infragistics().Map()
        .ID("map")
        .Width("700px")
        .Height("500px")
        .BackgroundContent(bgr => bgr.OpenStreetMaps())
        .Series(series => {
            series.GeographicShape("indianLands")
                .ShapeMemberPath("points")
                .ShapeDataSource(Url.Content("~/Data/indlan.shp"))
                .DatabaseSource(Url.Content("~/Data/indlan.dbf"))
                .Brush("Lightblue")
                .Outline("Blue");
        })
        .WindowRect(0.2470, 0.34, 0.06, 0.06)
        .DataBind()
        .Render()
%>

コード例: カラースケールの適用

説明

この例は、カスタムカラースケールを地理散布エリアシリーズに構成する方法を示します。実際のカラーは HTML カラー名定数 (例: 「red」)、rgba 構文 (例: rgba(100,100,100,0.5)) または16 進カラーコード (例: 「#347235」) のいずれかになります。

カラースケールパレットは、三角測量データソースから個々の三角形をプロットするときにコントロールが選択するカラーのセットです。各三角形のカラーは、三角形にバインドされた値により異なります。データメンバーは colorMemberPath オプションで指定されています。

ファイル中の全範囲の値は、提供されたパレットのカラーの数で除算され、範囲のインデックスがカラーごとに計算されます。カラーは、値がどの範囲に属するかにより選択されます。オプションの minimumValue オプションと maximumValue オプションにより、色分けされている三角形の値の範囲を絞ることができます。カラー選択ロジックの詳細は、地理散布エリアシリーズの構成 (igMap) のトピックを参照してください。

以下の図は、例のカラースケールを設定したマップがどのように見えるかを示しています。

コード

JavaScript による以下のコードでは、シリーズオブジェクトの colorScale オプションを使用して、カラーパレットを設定しています。

JavaScript の場合:

$("#map").igMap({
    width: "700px",
    height: "500px",
    series: [{
        type: "geographicScatterArea",
        name: "precipitation",
        colorScale: {
            type: "customPalette",
            interpolationMode: "interpolateRGB",
            minimumValue: 0.15,
            palette: [
                "#3300CC", "#4775FF", "#0099CC", "#00CC99", "#33CC00",
                "#99CC00", "#CC9900", "#FFC20A", "#CC3300"
            ]
        },
        colorMemberPath: "value",
        triangulationDataSource: "/Data/precipitation.itf"
    }],
    windowRect: {
        left: 0.31,
        top: 0.375,
        height: 0.025,
        width: 0.025
    }
});

ASP.NET MVC による以下のコードでは、igMap コントロールの MVC ヘルパーの ColorScale() コールを使用して、カラーパレットを設定しています。

ASPX の場合:

<%= Html.Infragistics().Map()
        .ID("map")
        .Width("700px")
        .Height("500px")
        .Series(series => {
            series.GeographicScatterArea("precipitation")
                .ColorScale(cs =>
                    cs.CustomPalette()
                        .InterpolationMode(InterpolationMode.InterpolateRGB)
                        .MinimumValue(0.15)
                        .Palette(new List<string>() { 
                            "#3300CC", "#4775FF", "#0099CC", "#00CC99", "#33CC00",
                            "#99CC00", "#CC9900", "#FFC20A", "#CC3300" 
                        }))
                .ColorMemberPath("value")
                .TriangulationDataSource(Url.Content("~/Data/ precipitation.itf"));
        })
        .WindowRect(0.31, 0.375, 0.025, 0.025)
        .DataBind()
        .Render()
%>

コード例: 塗りつぶしスケールの適用

説明

この例は、カスタム塗りつぶしスケールパレットを地理等高線シリーズに構成する方法を示します。実際のカラーは HTML カラー名定数 (例: 「red」)、rgba 構文 (例: rgba(100,100,100,0.5)) または16 進カラーコード (例: 「#347235」) のいずれかになります。

塗りつぶしスケールパレットは、等高線をプロットするときにコントロールが選択するカラーのセットです。等高線は、三角形に関連付けられた値が 2 つの範囲間で異なっているマップの領域の輪郭を描きます。データメンバーは valueMemberPath オプションで指定されています。ファイル中の全範囲の値は、提供されたパレットのカラーの数で除算され、範囲のインデックスがカラーごとに計算されます。カラーは、値がどの範囲に属するかにより選択されます。オプションの minimumValue オプションと maximumValue オプションにより、色分けされている三角形の値の範囲を絞ることができます。カラー選択ロジックの詳細は、地理等高線シリーズの構成 (igMap) のトピックを参照してください。

以下の図は、例の塗りつぶしスケールを設定したマップがどのように見えるかを示しています。

コード

JavaScript による以下のコードでは、シリーズオブジェクトの fillScale オプションを使用して、カラーパレットを設定しています。

JavaScript の場合:

$("#map").igMap({
    width: "700px",
    height: "500px",
    verticalZoomable: true,
    horizontalZoomable: true,
    series: [{
        type: "geographicContourLine",
        name: "precipitation",
        fillScale: {
            type: "value",
            brushes: [
                "#3300CC", "#4775FF", "#0099CC", "#00CC99", "#33CC00",
                "#99CC00", "#CC9900", "#FFC20A", "#CC3300"
            ]
        },
        valueMemberPath: "value",
        triangulationDataSource: "/Data/precipitation.itf"
    }],
    windowRect: {
        left: 0.31,
        top: 0.375,
        height: 0.025,
        width: 0.025
    }
});

ASP.NET MVC による以下のコードでは、igMap コントロールの MVC ヘルパーの FillScale() コールを使用して、カラーパレットを設定しています。

ASPX の場合:

<%= Html.Infragistics().Map()
        .ID("map")
        .Width("700px")
        .Height("500px")
        .Series(series => {
            series.GeographicContourLine("precipitation")
                .FillScale(scale => scale.Value()
                    .Brushes(new List<string>() { 
                        "#3300CC", "#4775FF", "#0099CC", "#00CC99", "#33CC00", 
                        "#99CC00", "#CC9900", "#FFC20A", "#CC3300" 
                    })
                )
                .ValueMemberPath("value")
                .TriangulationDataSource(Url.Content("~/Data/ precipitation.itf"));
        })
        .WindowRect(0.31, 0.375, 0.025, 0.025)
        .DataBind()
        .Render()
%>

コード例: 図形スタイルのカスタムロジックの提供

説明

個々の図形にカスタムカラーが設定された地理図形マップに関する多数のアプリケーションがあります。さまざまなマップ領域を示す行政図、人口や人口密度を示す人口統計マップ、または領域ごとにさまざまな KPI (キーパフォーマンスインジケーター) を示す財務マップなどがあります。

地理図形シリーズの場合は、igMap コントロールによりカスタムロジックを適用する関数を指定して、個々の図形に適切な塗りつぶしおよびアウトラインのカラーを選択できます。これは、各図形がマップに描画され、図形にバインドされたデータに渡される前に呼び出されます。

以下の図は、人口の規模に基づいて国が色別に描画された世界地図を示しています。

コード

カラー選択ロジック

例のカスタムカラー選択ロジックは、カラーのパレットと値の範囲に基づいて機能します。範囲のサイズとパレットで使用できるカラーの数に基づいて値の間隔を計算します。その後、ロジックがマップ図形の具体的な値で呼び出されると必ず、値が属する間隔が計算され、パレットから対応するカラーが返されます。

以下のコードは変数 colorPicker を定義し、それを最小値と最大値がそれぞれ 100 000 と 500 000 000 で初期化された ColorPickerByIndex オブジェクトに割り当てます。

JavaScript の場合:

var colorPicker = new ColorPickerByIndex(100000, 500000000);
function ColorPickerByIndex(min, max) {
    //  Initialize internal state
    var brushes = ["DeepSkyBlue", "blue", "DarkCyan", "coral", "orange", "Darkorange" ];
    var min = min;
    var max = max;
    var interval = (max - min) / (brushes.length - 1)
    this.getColorByIndex = function (val) {
        var index = Math.round(val / interval);
        if (index < 0) {
            index = 0;
        }
        else if (index > (brushes.length - 1)) {
            index = brushes.length - 1;
        }
        return brushes[index];
    }
}

マップのインスタンス作成

JavaScript による以下のコードでは、populationStyleSelector という変数を定義し、カラー選択オブジェクトをそれに割り当てています。カラー選択オブジェクトの selectStyle メンバーは、すべてのデータが図形にバインドされた shape という引数を受信する匿名の関数をポイントしています。匿名の関数はデータから POP_COUNTRY フィールドを取得し、国の人口を使用して colorPicker オブジェクトの getColorByIndex() メソッドを呼び出し、図形に適切な塗りつぶしカラーを取得します。

JavaScript の場合:

var populationStyleSelector = {
    selectStyle: function (shape) {
        var pop = shape.fields.item("POP_CNTRY");
        var popInt = parseInt(pop);
        var colString = colorPicker.getColorByIndex(popInt);
        return {
            fill: colString,
            stroke: "gray"
        };
    }
}

JavaScript による以下のコードでは、地理図形シリーズで igMap コントロールのインスタンスを作成し、変数 populationStyleSelector からのカラー選択オブジェクトをシリーズオブジェクトの shapeStyleSelector オプションに割り当てています。

JavaScript の場合:

$("#map").igMap({
    width: "700px",
    height: "500px",
    backgroundContent: {
        type: "openStreet"
    },
    series: [{
        type: "geographicShape",
        name: "worldCountries",
        markerType: "none",
        shapeMemberPath: "points",
        shapeDataSource: "/Data/world.shp",
        databaseSource: "/Data/world.dbf",
        shapeStyleSelector: populationStyleSelector
    }],
    windowRect: {
        left: 0.27,
        top: 0.2,
        height: 0.5,
        width: 0.5
    }
});

以下に ASP.NET MVC における、同じマップインスタンス作成コードを示します。この場合、マップを作成した後に図形スタイルセレクターを構成する必要があります。

ASPX の場合:

<%= Html.Infragistics().Map()
        .ID("map")
        .Width("700px")
        .Height("500px")
        .BackgroundContent(bgr => bgr.OpenStreetMaps())
        .Series(series =>
        {
            series.GeographicShape("worldCountries")
                .ShapeMemberPath("points")
                .ShapeDataSource(Url.Content("~/Data/world.shp"))
                .DatabaseSource(Url.Content("~/Data/world.dbf"))
                .ShapeStyleSelector("populationStyleSelector")
                .MarkerType(MarkerType.None);
        })
        .WindowRect(0.27, 0.20, 0.5, 0.5)
        .DataBind()
        .Render()
%>

Ignite UI for jQuery | ヘルプトピック

igMap のスタイル設定

トピックの概要

目的

前提条件

このトピックの内容

概要

igMap の概要

テーマの概要

テーマの概要

テーマの概要表

必要なカスケードスタイルシート (CSS)

必要な CSS の概要

必要な CSS コード: HTML

必要な CSS コード: ASPX

マップスタイル設定オプションの参照

マップスタイル設定オプションの参照の概要

マップスタイル設定オプションの参照の概要表

コード例

コード例の概要

コード例: マーカー塗りつぶしとアウトラインの変更

説明

コード

コード例: 図形塗りつぶしとアウトラインの変更

説明

コード

コード例: カラースケールの適用

説明

コード

コード例: 塗りつぶしスケールの適用

説明

コード

コード例: 図形スタイルのカスタムロジックの提供

説明

コード

関連コンテンツ

トピック

サンプル

リソース

Ignite UI for jQuery | ヘルプ トピック

igMap のスタイル設定

トピックの概要

目的

前提条件

このトピックの内容

概要

igMap の概要

テーマの概要

テーマの概要

テーマの概要表

必要なカスケード スタイル シート (CSS)

必要な CSS の概要

必要な CSS コード: HTML

必要な CSS コード: ASPX

マップ スタイル設定オプションの参照

マップ スタイル設定オプションの参照の概要

マップ スタイル設定オプションの参照の概要表

コード例

コード例の概要

コード例: マーカー塗りつぶしとアウトラインの変更

説明

コード

コード例: 図形塗りつぶしとアウトラインの変更

説明

コード

コード例: カラー スケールの適用

説明

コード

コード例: 塗りつぶしスケールの適用

説明

コード

コード例: 図形スタイルのカスタム ロジックの提供

説明

コード

関連コンテンツ

トピック

サンプル

リソース

Ignite UI for jQuery | ヘルプトピック

必要なカスケードスタイルシート (CSS)

マップスタイル設定オプションの参照

マップスタイル設定オプションの参照の概要

マップスタイル設定オプションの参照の概要表

コード例: カラースケールの適用

コード例: 図形スタイルのカスタムロジックの提供