syncfusion-aspnetcore-maps

ASP.NET Core 向け Syncfusion Maps の実装

Syncfusion Maps コンポーネントは、Scalable Vector Graphics（SVG）を使用して地理データを視覚化する強力なツールです。GeoJSON データ、複数のレイヤー、マッププロバイダー（Bing、Azure、OpenStreetMap）、ズーム、パン、ツールチップ、選択などの豊富なインタラクティブ機能をサポートしています。

目次

• このスキルを使用するタイミング
• コンポーネントの概要
• ドキュメントとナビゲーションガイド
  • はじめにとインストール
  • レイヤーと GeoJSON データ
  • データバインディングとデータの設定
  • マーカー
  • バブル
  • データラベル
  • カラーマッピング
  • 凡例
  • 注釈
  • ユーザー操作
  • マッププロバイダーとの統合
  • 高度な機能
• クイックスタートの例
  • GeoJSON とカラーマッピングを使用した基本的なマップ
  • マーカーを使用したマップ
• API リファレンス
  • Maps クラス
    • コアプロパティ（合計 63 個）
    • Maps イベント（合計 28 個）
  • MapsLayer クラス
    • MapsLayer の主なプロパティ
  • MapsZoomSettings クラス
    • MapsZoomSettings の主なプロパティ
  • MapsShapeSettings クラス
    • MapsShapeSettings の主なプロパティ
  • MapsMarker クラス
    • MapsMarker の主なプロパティ
  • 関連クラス（40 個以上のクラスを利用可能）
  • 列挙型
    • ProjectionType
    • MarkerType
    • MapsTheme
    • TooltipGesture
    • LegendType
• 一般的なパターン
  • パターン 1：データバインディングを使用したコロプレスマップ
  • パターン 2：ズームと選択が可能なインタラクティブマップ
  • パターン 3：複数のデータレイヤー
  • パターン 4：Bing Maps との統合
• 主なプロパティのリファレンス
  • 必須プロパティ
  • レイヤーの設定
  • インタラクションの設定
• 一般的な使用例
  • 使用例 1：地域別の売上ダッシュボード
  • 使用例 2：店舗検索
  • 使用例 3：人口密度の視覚化
  • 使用例 4：選挙結果マップ
  • 使用例 5：配送ルートの視覚化
  • 使用例 6：天気マップダッシュボード
  • 使用例 7：不動産物件マップ
• 関連コンポーネント
• その他のリソース

このスキルを使用する場面

次のような場合は、Syncfusion Maps コンポーネントを使用してください。

• 地理データを可視化する - 国、州、地域のデータをインタラクティブなマップに表示する
• コロプレスマップを作成する - 地域ごとの色分けを使用してデータの分布を示す
• 位置マーカーをプロットする - 施設、オフィス、店舗、カスタム位置などのポイントを表示する
• バブルマップを描画する - 地理上の位置にサイズ別のバブルを配置して、定量データを可視化する
• マッププロバイダーと連携する - Bing Maps、Azure Maps、OpenStreetMap をベースレイヤーとして使用する
• カスタム図形を表示する - 特定の地域やエリアのカスタム GeoJSON 図形を描画する
• インタラクティブなダッシュボードを構築する - ズームとパンに対応し、ツールチップと選択機能を備えたマップを作成する
• ナビゲーションルートを表示する - 異なる位置を結ぶナビゲーションラインを表示する
• 注釈を重ねて表示する - マップ上にカスタム HTML／テキストの注釈を追加する
• マルチレイヤーの可視化を作成する - 1 つのマップ上に複数のデータレイヤーを組み合わせる

コンポーネントの概要

主な機能：

• 📍 複数のレイヤー - 個別に設定できる無制限のレイヤーとサブレイヤーをサポート
• 🗺️ GeoJSON サポート - カスタム地理図形を読み込んで描画
• 🌐 マッププロバイダー - Bing Maps、Azure Maps、OpenStreetMap との連携
• 🎨 色分け - 等値、範囲、彩度低下のカラースキームでデータを可視化
• 📌 マーカーとバブル - カスタマイズ可能なマーカーとサイズ別のバブルで位置をプロット
• 🏷️ データラベル - スマートな配置で図形名とデータ値を表示
• 🎯 インタラクティブ機能 - ズーム、パン、ツールチップ、選択、強調表示
• 📊 凡例 - 色分け、マーカー、バブルに対応したインタラクティブな凡例
• ✏️ 注釈 - 指定した座標にカスタム HTML オーバーレイを表示
• 🌍 投影法 - 6 種類のマップ投影法をサポート
• 🖨️ エクスポート - マップを印刷し、PNG、JPEG、SVG、PDF 形式でエクスポート
• ♿ アクセシビリティ - キーボード操作とスクリーンリーダーに対応した WCAG 準拠

ドキュメントとナビゲーションガイド

はじめにとインストール

📄 参照先： references/getting-started.md

次のような場合に参照してください。

• Maps コンポーネントを初めてセットアップする
• NuGet パッケージをインストールし、依存関係を設定する
• タグヘルパーとスクリプト参照を追加する
• GeoJSON データを使って基本的なマップを作成する
• 最小限のセットアップ要件を確認する

レイヤーと GeoJSON データ

📄 参照先： references/layers-and-geojson.md

次のような場合に参照してください。

• マップのレイヤー構成を理解する
• GeoJSON 形式とカスタム図形を扱う
• 複数のレイヤーまたはサブレイヤーを追加する
• ファイルまたは URL から GeoJSON を読み込む
• レイヤーの表示と順序を設定する
• レイヤー固有の設定を扱う

データバインディングとデータ追加

📄 参照先： references/data-binding.md

次のような場合に参照してください。

• データソースをマップの図形にバインドする
• ShapeDataPath と ShapePropertyPath を設定する
• データレコードを地理図形に対応付ける
• JSON、データベース、API からデータをバインドする
• データを動的に更新する
• 可視化用にデータを変換する

マーカー

📄 参照先： references/markers.md

次のような場合に参照してください。

• マップに位置マーカーを追加する
• 異なる種類のマーカー（Circle、Image、Letter、Template）を使用する
• マーカーの外観（サイズ、色、枠線）をカスタマイズする
• 緯度／経度を使ってマーカーを配置する
• マーカーのツールチップとイベントを追加する
• マーカーのクラスタリングを実装する
• カスタムマーカーテンプレートを作成する

バブル

📄 参照先： references/bubbles.md

次のような場合に参照してください。

• マップ上にバブルの可視化を作成する
• データ値に基づいてバブルのサイズを設定する
• バブルの色と不透明度を設定する
• バブル半径の最小値と最大値を設定する
• バブルのツールチップを追加する
• 複数のバブルセットを実装する
• バブルの選択を扱う

データラベル

📄 参照先： references/data-labels.md

ユーザーが次の操作を行う場合：

• 地図上の図形にラベルを表示する
• ラベルの位置と配置を設定する
• スマートラベルモード（Trim、Hide、None）を使用する
• ラベルのフォントとスタイルをカスタマイズする
• テンプレートベースのラベルを作成する
• ラベルの交差に対処する
• マーカーやバブルにラベルを追加する

カラーマッピング

📄 参照先： references/color-mapping.md

ユーザーが次の操作を行う場合：

• データに基づいて図形に色を適用する
• 等値カラーマッピング（値から色への対応）を設定する
• 範囲カラーマッピング（最小値から最大値までの範囲）を設定する
• 彩度低下カラーマッピング（グラデーションの不透明度）を使用する
• コロプレスマップを作成する
• カスタムカラーパレットを定義する
• アクセシビリティとコントラストに対処する

凡例

📄 参照先： references/legend.md

ユーザーが次の操作を行う場合：

• 地図に凡例を追加する
• 凡例の位置と配置を設定する
• インタラクティブな凡例（切り替え、ハイライト）を有効にする
• 凡例の図形とテキストをカスタマイズする
• カラーマッピング用の凡例を作成する
• マーカーやバブル用の凡例を追加する
• 多数の項目向けに凡例のページ送りを実装する

注釈

📄 参照先： references/annotations.md

ユーザーが次の操作を行う場合：

• 地図にカスタム HTML コンテンツを追加する
• 特定の座標に注釈を配置する
• テキストまたはテンプレートベースの注釈を作成する
• 注釈のスタイルと配置を設定する
• 注釈の z-index とレイヤーに対処する
• 動的な注釈を追加する
• レスポンシブな注釈を作成する

ユーザー操作

📄 参照先： references/user-interactions.md

ユーザーが次の操作を行う場合：

• ズーム（マウスホイール、ピンチ、ツールバー）を有効にする
• パン機能を設定する
• カスタムテンプレートを使ったツールチップを追加する
• 図形の選択と複数選択を実装する
• ホバー時のハイライトを有効にする
• クリックイベントに対処する
• 地点間にナビゲーションラインを追加する
• ズームレベルと制約を設定する

地図プロバイダーとの統合

📄 参照先： references/map-providers.md

ユーザーが次の操作を行う場合：

• Bing Maps（Road、Aerial、Hybrid）を統合する
• API キーを使って Azure Maps を設定する
• OpenStreetMap（OSM）タイルを使用する
• カスタムタイルサーバーを設定する
• GeoJSON レイヤーとプロバイダーを組み合わせる
• プロバイダーの認証に対処する
• プロバイダーの機能と制限を比較する

高度な機能

ユーザーが次の操作を行う場合：

• カスタムデータでポリゴンを描画する
• 矢印付きのナビゲーションラインを追加する
• 地図を画像または PDF に印刷またはエクスポートする
• 国際化（i18n）を実装する
• ローカライズ（l10n）を設定する
• アクセシビリティ機能を有効にする
• 状態の永続化を実装する
• プログラムによるメソッドを使用する
• パフォーマンスを最適化する
• EJ1 から EJ2 に移行する

クイックスタートの例

GeoJSON とカラーマッピングを使用した基本的な地図

@using Newtonsoft.Json
@using Syncfusion.EJ2.Maps

@{
    // Load GeoJSON data
    string geoJson = System.IO.File.ReadAllText("wwwroot/scripts/MapsData/WorldMap.json");
    var worldMapData = JsonConvert.DeserializeObject(geoJson);
    
    // Load data source
    string dataJson = System.IO.File.ReadAllText("wwwroot/scripts/MapsData/population.json");
    var populationData = JsonConvert.DeserializeObject(dataJson);
    
    // Define color mapping
    var colorMapping = new List<MapsColorMapping> {
        new MapsColorMapping { From = 0, To = 100000000, Color = "#C6E7F0", Label = "< 100M" },
        new MapsColorMapping { From = 100000000, To = 500000000, Color = "#6AB7D6", Label = "100M - 500M" },
        new MapsColorMapping { From = 500000000, To = 1500000000, Color = "#1A7FA0", Label = "> 500M" }
    };
    
    var propertyPath = new[] { "name" };
}

<ejs-maps id="maps" height="600px">
    <e-maps-titlesettings text="World Population by Country">
        <e-titlesettings-textstyle size="16px" fontWeight="500"></e-titlesettings-textstyle>
    </e-maps-titlesettings>
    
    <e-maps-legendsettings visible="true" position="Bottom"></e-maps-legendsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="worldMapData" 
                      dataSource="populationData"
                      shapeDataPath="Country" 
                      shapePropertyPath="propertyPath">
            <e-layersettings-shapesettings 
                fill="#E5E5E5" 
                colorValuePath="Population"
                colorMapping="colorMapping">
            </e-layersettings-shapesettings>
            
            <e-layersettings-tooltipsettings visible="true" valuePath="Country" template="#tooltipTemplate">
            </e-layersettings-tooltipsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

<div id="tooltipTemplate" style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
    <h4 style="margin: 0 0 8px 0; color: #333;">${Country}</h4>
    <div style="font-size: 14px;">
        <div><strong>Population:</strong> ${Population}</div>
        <div><strong>Capital:</strong> ${Capital}</div>
    </div>
</div>

マーカー付きの地図

@using Newtonsoft.Json
@using Syncfusion.EJ2.Maps

@{
    var worldMapData = JsonConvert.DeserializeObject(System.IO.File.ReadAllText("wwwroot/scripts/MapsData/WorldMap.json"));
    
    var cities = new[]
    {
        new { Name = "New York", Latitude = 40.7128, Longitude = -74.0060, Population = "8.4M" },
        new { Name = "Tokyo", Latitude = 35.6762, Longitude = 139.6503, Population = "13.9M" },
        new { Name = "London", Latitude = 51.5074, Longitude = -0.1278, Population = "9.0M" },
        new { Name = "Sydney", Latitude = -33.8688, Longitude = 151.2093, Population = "5.3M" }
    };

    var tooltip = new MapsTooltipSettings
    {
        Visible = true,
        ValuePath = "Name"
    };
}

<ejs-maps id="maps" height="600px">
    <e-maps-zoomsettings enable="true" zoomFactor="2"></e-maps-zoomsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="worldMapData">
            <e-layersettings-shapesettings fill="#C3E6ED"></e-layersettings-shapesettings>
            
            <e-layersettings-markers>
                <e-layersettings-marker 
                    visible="true" 
                    dataSource="cities"
                    shape="Circle"
                    fill="#FF6347"
                    height="15"
                    width="15"
                    tooltipSettings="tooltip">
                </e-layersettings-marker>
            </e-layersettings-markers>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

API リファレンス

Maps クラス

地図の動作と外観を制御するためのプロパティ、メソッド、イベントを備えた、Maps コンポーネントの主要クラスです。

名前空間： Syncfusion.EJ2.Maps
アセンブリ： Syncfusion.EJ2.dll
公式 API リファレンス

コアプロパティ（全 63 件）

プロパティ	型	既定値	説明	API リンク
AllowImageExport	bool	false	マップの画像（PNG、JPEG、SVG）へのエクスポート機能を有効または無効にします	詳細はこちら
AllowPdfExport	bool	false	マップの PDF へのエクスポート機能を有効または無効にします	詳細はこちら
AllowPrint	bool	false	マップの印刷機能を有効または無効にします	詳細はこちら
Annotations	List	null	マップの注釈をカスタマイズするオプションを取得または設定します。注釈を使用すると、特定の座標にカスタム HTML／テキストを重ねて表示できます	詳細はこちら
Background	string	null	マップコンテナーの背景色を取得または設定します	詳細はこちら
BaseLayerIndex	double	0	ベースレイヤーとなるレイヤーのインデックスを取得または設定します。マップに表示するレイヤーを決定します	詳細はこちら
Border	MapsBorder	null	マップの境界線のスタイルプロパティ（幅、色）をカスタマイズするオプションを取得または設定します	詳細はこちら
CenterPosition	MapsCenterPosition	null	緯度と経度の座標を使用して、マップの中心位置を取得または設定します	詳細はこちら
Description	string	null	支援技術とアクセシビリティ向けに、マップの説明を取得または設定します	詳細はこちら
EnablePersistence	bool	false	ページの再読み込み後もコンポーネントの状態を保持する機能を有効または無効にします。ズームレベルやパン位置などが保持されます。	詳細はこちら
EnableRtl	bool	false	RTL 言語向けに、コンポーネントを右から左の方向でレンダリングする機能を有効または無効にします	詳細はこちら
Format	string	null	マップ内のテキストに国際化を適用する書式を取得または設定します	詳細はこちら
Height	string	null	マップをレンダリングする高さを取得または設定します。パーセンテージまたはピクセル値を指定できます	詳細はこちら
HtmlAttributes	object	null	title、name、data-* などの追加 HTML 属性をキーと値のペア形式で指定できます	詳細はこちら
Layers	List	null	マップのレイヤーをカスタマイズするオプションを取得または設定します。無制限のレイヤーとサブレイヤーに対応しています	詳細はこちら
LegendSettings	MapsLegendSettings	null	マップの凡例（位置、配置、表示状態など）をカスタマイズするオプションを取得または設定します	詳細はこちら
Locale	string	"en-US"	このコンポーネントのグローバルなカルチャおよびローカライズ設定を上書きします	詳細はこちら
MapsArea	MapsMapsAreaSettings	null	マップの周囲の領域（背景、境界線）をカスタマイズするオプションを取得または設定します	詳細はこちら
Margin	MapsMargin	null	マップの余白（上、下、左、右）をカスタマイズするオプションを取得または設定します	詳細はこちら
ProjectionType	ProjectionType	Mercator	投影法（Mercator、EquirectangularProjection、MercatorProjection など）を取得または設定します	詳細はこちら
TabIndex	double	0	マップのタブインデックス値を取得または設定します	詳細はこちら
Theme	MapsTheme	Material	マップでサポートされるテーマスタイル（Material、Fabric、HighContrast、BootstrapDark など）を取得または設定します	詳細はこちら
TitleSettings	MapsTitleSettings	null	マップのタイトル（テキスト、配置、フォントなど）をカスタマイズするオプションを取得または設定します	詳細はこちら
TooltipDisplayMode	TooltipGesture	MouseMove	ツールチップの表示モード（MouseMove、Click、DoubleClick）を取得または設定します	詳細はこちら
UseGroupingSeparator	bool	false	書式設定された数値の桁区切り記号の表示状態を有効または無効にします	詳細はこちら
Width	string	null	マップをレンダリングする幅を取得または設定します。パーセンテージまたはピクセル値を指定できます	詳細はこちら
ZoomSettings	MapsZoomSettings	null	マップのズーム操作をカスタマイズするオプションを取得または設定します	詳細はこちら

マップイベント（全28件）

イベント	型	トリガー条件	説明
AnimationComplete	string	null	マップのアニメーション完了後にトリガーされます
AnnotationRendering	string	null	マップで注釈をレンダリングする前にトリガーされます
BeforePrint	string	null	印刷開始前にトリガーされます
BubbleClick	string	null	マップ上のバブル要素をクリックするとトリガーされます
BubbleMouseMove	string	null	マップ上のバブル要素にマウスを合わせるとトリガーされます
BubbleRendering	string	null	マップ上でバブル要素がレンダリングされる前にトリガーされます
Click	string	null	マップ上の要素をユーザーがクリックするとトリガーされます
DataLabelRendering	string	null	データラベルがレンダリングされる前にトリガーされます
DoubleClick	string	null	マップ上の要素をダブルクリックするとトリガーされます
ItemHighlight	string	null	図形、バブル、またはマーカーがハイライト表示される前にトリガーされます
ItemSelection	string	null	図形、バブル、またはマーカーが選択される前にトリガーされます
LayerRendering	string	null	マップレイヤーがレンダリングされる前にトリガーされます
LegendRendering	string	null	凡例がレンダリングされる前にトリガーされます
Load	string	null	マップがレンダリングされる前にトリガーされます
Loaded	string	null	マップがレンダリングされた後にトリガーされます
MarkerClick	string	null	マーカー要素をクリックするとトリガーされます
MarkerClusterClick	string	null	マップ上のマーカークラスターをクリックするとトリガーされます
MarkerClusterMouseMove	string	null	マーカークラスター要素上でマウスを動かすとトリガーされます
MarkerClusterRendering	string	null	マップのマーカークラスターがレンダリングされる前にトリガーされます
MarkerDragEnd	string	null	マップ上でマーカーのドラッグが終了すると、このイベントがトリガーされます
MarkerDragStart	string	null	マップ上でマーカーのドラッグが開始されると、このイベントがトリガーされます
MarkerMouseMove	string	null	マップ上のマーカー要素上でマウスを動かすとトリガーされます
MarkerRendering	string	null	マップのマーカーがレンダリングされる前にトリガーされます
MouseMove	string	null	マップ上でマウスポインターを動かすと、このイベントがトリガーされます
Pan	string	null	パン操作の実行前にトリガーされます
PanComplete	string	null	パン操作の実行後に、このイベントがトリガーされます
Resize	string	null	ウィンドウのサイズ変更時に、マップのサイズ変更を通知するためトリガーされます
RightClick	string	null	マップ上の要素を右クリックするとトリガーされます
ShapeHighlight	string	null	図形がハイライト表示される前にトリガーされます
ShapeRendering	string	null	マップの図形がレンダリングされる前にトリガーされます
ShapeSelected	string	null	マップ上で図形が選択されるとトリガーされます
TooltipRender	string	null	マップのツールチップがレンダリングされる前にトリガーされます
TooltipRenderComplete	string	null	マップのツールチップがレンダリングされた後にトリガーされます
Zoom	string	null	ズームインやズームアウトなどのズーム操作の前にトリガーされます
ZoomComplete	string	null	ズーム操作の完了後に、このイベントがトリガーされます

MapsLayer クラス

ジオメトリデータ、マッププロバイダー、データバインディングに対応する個々のマップレイヤーの構成を定義します。

公式 API リファレンス

MapsLayer の主なプロパティ

プロパティ	型	既定値	説明
DataSource	object	null	図形とのバインドに使用するデータソース
ShapeData	object	null	図形の描画に使用する GeoJSON データ
ShapeDataPath	string	null	データソース内で図形と照合するプロパティパス
ShapePropertyPath	string[]	null	データソースと照合する図形データ内のプロパティパス
BubbleSettings	List	null	バブル表示の設定
MarkerSettings	List	null	マーカー表示の設定
DataLabelSettings	MapsDataLabelSettings	null	図形上のデータラベルの設定
NavigationLineSettings	List	null	ナビゲーションラインの設定
SelectionSettings	MapsSelectionSettings	null	図形選択の設定
HighlightSettings	MapsHighlightSettings	null	ホバー時の図形ハイライトの設定
TooltipSettings	MapsTooltipSettings	null	レイヤーのツールチップの設定
ShapeSettings	MapsShapeSettings	null	図形のスタイル設定
Type	string	"Layer"	レイヤーの種類（Layer または SubLayer）
Visible	bool	true	レイヤーの表示状態を取得または設定します

MapsZoomSettings クラス

マップのズームとパンの動作を管理します。

公式 API リファレンス

MapsZoomSettings の主なプロパティ

プロパティ	型	既定値	説明
Enable	bool	false	マップのズームを有効または無効にします
ToolbarOrientation	string	"Vertical"	ズームツールバーの向きを指定します（Horizontal/Vertical）
Toolbars	string[]	null	ズームツールバーのボタンを定義します（Zoom、ZoomIn、ZoomOut、Pan、Reset）
ZoomFactor	double	2	ズームインまたはズームアウトごとの倍率
MinZoom	double	1	最小ズームレベル
MaxZoom	double	28	最大ズームレベル
EnableMouseWheelZoom	bool	false	マウスホイールによるズームを有効にします
EnablePinchZoom	bool	false	タッチデバイスでのピンチ操作によるズームを有効にします
EnableSelectionZooming	bool	false	選択によるズームを有効にします（ボックスを描画してズーム）
EnableDoubleTapZoom	bool	true	ダブルタップによるズームを有効にします

MapsShapeSettings クラス

マップ上の図形の外観と動作を設定します。

公式 API リファレンス

MapsShapeSettings の主なプロパティ

プロパティ	型	既定値	説明
Fill	string	"#E5E5E5"	図形の塗りつぶし色
Opacity	double	1.0	図形の不透明度（0～1）
Palette	string[]	null	カラーマッピングに使用するカラーパレット
ColorValuePath	string	null	カラーマッピングに使用するデータソース内のプロパティパス
ColorMapping	List	null	カラーマッピングの設定
DashArray	string	""	図形の境界線の破線パターンを定義します

MapsMarker クラス

指定した座標にマップ上で表示するマーカーを定義します。

公式 API リファレンス

MapsMarker の主なプロパティ

プロパティ	型	デフォルト	説明
DataSource	object	null	マーカーの位置とプロパティを含むデータソース
Latitude	double	null	マーカー配置用の緯度座標
Longitude	double	null	マーカー配置用の経度座標
Shape	MarkerType	Circle	マーカーの形状（Circle、Rectangle、Image、Letter、Template）
Width	double	20	マーカーの幅
Height	double	20	マーカーの高さ
Fill	string	"#F41747"	マーカーの塗りつぶし色
Border	string	null	境界線の設定
ImageUrl	string	null	画像タイプのマーカーに使用する画像の URL
TooltipSettings	MapsTooltipSettings	null	マーカーのツールチップ設定

関連クラス（40 種類以上のクラスを利用可能）

クラス	用途	API リンク
MapsLegendSettings	凡例の設定とカスタマイズ	リンク
MapsTooltipSettings	ツールチップの動作を設定	リンク
MapsBubble	バブルの視覚化設定	リンク
MapsColorMapping	色のマッピングルールを定義	リンク
MapsDataLabelSettings	データラベルのカスタマイズ	リンク
MapsAnnotation	注釈の設定	リンク
MapsNavigationLine	ナビゲーションラインの設定	リンク
MapsMarkerClusterSettings	マーカーのクラスタリング設定	リンク
MapsTitleSettings	地図タイトルのカスタマイズ	リンク
MapsMargin	余白の設定	リンク

列挙型

ProjectionType

サポートされる地図投影法を定義します。

値	説明
Mercator	Web メルカトル図法（デフォルト）
EquirectangularProjection	正距円筒図法／プラトー・カレ図法
MercatorProjection	メルカトル図法
Miller	ミラー円筒図法
NaturalEarth1	Natural Earth 1 図法
NaturalEarth2	Natural Earth 2 図法

MarkerType

利用可能なマーカーの形状を定義します。

値	説明
Circle	円形マーカー
Rectangle	長方形マーカー
Triangle	三角形マーカー
Diamond	ひし形マーカー
Image	カスタム画像マーカー
Letter	文字ベースのマーカー
Template	カスタムテンプレートマーカー

MapsTheme

利用可能なテーマを定義します。

値	説明
Material	マテリアルデザインテーマ
Fabric	Fabric デザインテーマ
HighContrast	ハイコントラストテーマ
BootstrapDark	Bootstrap ダークテーマ
BootstrapLight	Bootstrap ライトテーマ

TooltipGesture

ツールチップの表示モードを定義します。

値	説明
MouseMove	マウスの移動時に表示（デフォルト）
Click	クリック時に表示
DoubleClick	ダブルクリック時に表示

LegendType

凡例の種類を定義します。

値	説明
Layers	レイヤーの凡例
Markers	マーカーの凡例
Bubbles	バブルの凡例

一般的なパターン

パターン 1：データバインディングを使用したコロプレスマップ

ユースケース： 地域ごとの統計データを、色分けした図形で可視化します。

@{
    var colorMapping = new List<MapsColorMapping> {
        new MapsColorMapping { Value = "Low", Color = "#90EE90" },
        new MapsColorMapping { Value = "Medium", Color = "#FFD700" },
        new MapsColorMapping { Value = "High", Color = "#FF6347" }
    };
}

<e-maps-layer shapeData="@geoJsonData" 
              dataSource="@statisticsData"
              shapeDataPath="RegionName" 
              shapePropertyPath="@(new[] { "name" })">
    <e-layersettings-shapesettings 
        colorValuePath="DataLevel"
        colorMapping="colorMapping">
    </e-layersettings-shapesettings>
</e-maps-layer>

パターン 2：ズームと選択に対応したインタラクティブマップ

ユースケース： ユーザーが操作して詳細を確認できるようにします。

<ejs-maps id="maps">
    <e-maps-zoomsettings 
        enable="true" 
        enableSelectionZooming="true"
        toolbars='new string[] {"Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset"}'>
    </e-maps-zoomsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="@mapData">
            <e-layersettings-selectionsettings 
                enable="true" 
                fill="#8B0000"
                opacity="0.5">
            </e-layersettings-selectionsettings>
            
            <e-layersettings-highlightsettings 
                enable="true" 
                fill="#FF6347">
            </e-layersettings-highlightsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

パターン 3：複数のデータレイヤー

ユースケース： 1 つのマップ上に複数のデータセットを重ねて表示します。

<e-maps-layers>
    
    <e-maps-layer shapeData="@countryData" type="Layer">
        <e-layersettings-shapesettings fill="#E5E5E5"></e-layersettings-shapesettings>
    </e-maps-layer>
    
    
    <e-maps-layer shapeData="@stateData" type="SubLayer">
        <e-layersettings-shapesettings fill="transparent" border-width="1"></e-layersettings-shapesettings>
    </e-maps-layer>
    
    
    <e-maps-layer type="Layer">
        <e-layersettings-markers>
            <e-layersettings-marker dataSource="@locations" shape="Circle"></e-layersettings-marker>
        </e-layersettings-markers>
    </e-maps-layer>
</e-maps-layers>

パターン 4：Bing Maps との連携

ユースケース： Bing Maps をベースレイヤーとして使用し、カスタムデータを重ねて表示します。

<ejs-maps id="maps">
    <e-maps-layers>
        
        <e-maps-layer layerType="Bing" bingMapType="Aerial" key="YOUR_BING_MAPS_KEY">
        </e-maps-layer>
        
        
        <e-maps-layer type="SubLayer" shapeData="@customData">
            <e-layersettings-shapesettings fill="#FF6347" opacity="0.5"></e-layersettings-shapesettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

主要なプロパティのリファレンス

必須プロパティ

プロパティ	用途	例
shapeData	図形の描画に使用する GeoJSON データ	shapeData="worldMapData"
dataSource	図形にバインドするデータ	dataSource="populationData"
shapeDataPath	図形との照合に使用する dataSource 内のプロパティ	shapeDataPath="Country"
shapePropertyPath	データとの照合に使用する GeoJSON 内のプロパティ	shapePropertyPath="@(new[] { "name" })"
colorValuePath	色のマッピングに使用するデータプロパティ	colorValuePath="Population"
colorMapping	色の範囲や値を定義します	colorMapping="@colorMappingList"

レイヤーの設定

プロパティ	用途	主な値
type	レイヤーの種類	Layer、SubLayer
layerType	プロバイダーの種類	Geometry、Bing、OSM
visible	レイヤーの表示／非表示	true、false
shapeSettings	図形のスタイル設定	塗りつぶし、枠線、パレット
markerSettings	マーカーの設定	形状、サイズ、色
bubbleSettings	バブルの設定	サイズ、色、半径

インタラクションの設定

プロパティ	用途	設定
zoomSettings	ズームの設定	enable、zoomFactor、minZoom、maxZoom
tooltipSettings	ツールチップの設定	visible、valuePath、template
selectionSettings	選択の設定	enable、fill、opacity
highlightSettings	ホバー時の強調表示	enable、fill、border

一般的なユースケース

ユースケース 1：地域別の営業ダッシュボード

地域ごとの営業実績を、色の濃淡で表示するコロプレスマップを作成します。

適用機能： 色のマッピング、データバインディング、凡例、ツールチップ

ユースケース 2：店舗検索マップ

カスタムマーカーで小売店舗の位置をマップ上に表示し、ユーザーがズームしたり、クリックして詳細を確認したりできるようにします。

適用機能： マーカー、ツールチップ、ズーム、Bing／OSM との連携

ユースケース 3：人口密度の可視化

人口密度をバブルのサイズで表し、人口が多いほど大きなバブルで表示します。

適用機能： バブル、データバインディング、凡例、色のマッピング

ユースケース 4：選挙結果マップ

州や地域ごとの選挙結果を色分けし、インタラクティブに選択できるマップで可視化します。

適用機能： 色のマッピング、選択、強調表示、データラベル、凡例

ユースケース 5：配送ルートの可視化

都市間の配送ルートを、方向を示す矢印付きのナビゲーションラインで表示します。

適用機能： ナビゲーションライン、マーカー、注釈、レイヤー

ユースケース 6：天気マップダッシュボード

カスタム注釈とリアルタイムのデータ更新を使用して、天気データをマップ上に重ねて表示します。

適用機能： 注釈、動的データ、複数のレイヤー、マッププロバイダー

ユースケース 7：不動産物件マップ

カスタムマーカー、フィルタリング、詳細なツールチップを使用して、物件情報を表示します。

適用機能： マーカー、カスタムテンプレート、ツールチップ、ズーム、パン

関連コンポーネント

• Chart - 地理情報以外のデータの可視化に使用します
• HeatMap - マトリックス形式のヒートマップの可視化に使用します
• TreeMap - 階層データの可視化に使用します
• Diagram - ネットワークやフローチャートの可視化に使用します

Additional Resources

• Syncfusion Maps Documentation
• API Reference
• GeoJSON Format Specification
• Sample GeoJSON Data