syncfusion-flutter-maps

Syncfusion Flutter Maps

このスキルでは、地理データや空間データを表示および視覚化するための Syncfusion Flutter Maps（SfMaps）ウィジェットを扱います。このウィジェットは、主に 2 種類のレイヤーをサポートしています。GeoJSON ベースの形状描画に使用する MapShapeLayer と、OpenStreetMap や Bing Maps などのウェブマップタイルサービスに使用する MapTileLayer です。

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

次のような場合にこのスキルを使用します。

• ズーム、パン、選択機能を備えたインタラクティブなマップを表示する
• 形状、色、バブルを使用して地理データを視覚化する
• GeoJSON データをマップ（国、州、地域、カスタム形状）として描画する
• プロバイダーのタイルベースのマップを統合する
• 場所、ポイントオブインタレスト、カスタム座標を示すマーカーをマップに追加する
• データ値に基づき、色分けした地域を表示するコロプレスマップを作成する
• サイズや色の違いでデータを示すバブルマップを作成する
• マップの解釈に役立つデータラベルや凡例を表示する
• 形状、バブル、マーカーにツールチップを実装する
• 選択、ズーム、パン、ナビゲーションなどのマップ操作を有効にする
• カスタムオーバーレイ用のベクターレイヤー（弧、円、線、多角形、ポリライン）を追加する
• サブレイヤーや階層データを使って空間的な関係を視覚化する
• 座標マッピングを使った位置情報ベースのアプリケーションを作成する

コンポーネントの概要

SfMaps ウィジェットは、主に 2 種類のレイヤーをサポートする、Flutter 向けの包括的なマッピングソリューションです。

MapShapeLayer - 統計データや地理データを視覚化するための、GeoJSON ベースの形状描画機能です。色や範囲のマッピングによるコロプレスマップ、バブルの視覚化、データラベル、形状の選択、凡例、ツールチップ、階層データ向けのサブレイヤー、ベクターレイヤー（弧、円、線、多角形、ポリライン）、マーカー、ズームおよびパンのジェスチャー、オフラインサポートなどの機能を備えています。選挙マップ、営業地域、国勢調査データ、地域ベースの分析に最適です。

MapTileLayer - OpenStreetMap、Bing Maps、Google Maps、TomTom のウェブマップタイルサービスを統合します。詳細な地理情報を備えた実世界の道路地図、位置ピン用のマーカー、サブレイヤー、ベクターレイヤー、設定可能なレベルでのズームとパン、初期の注視点とズーム、WMTS URL テンプレートなどの機能を備えています。インターネット接続が必要です。店舗検索、配送追跡、ナビゲーションアプリに最適です。

どちらのレイヤータイプも、マーカー（組み込みシンボルとカスタムウィジェット）、ピンチ、マウスホイール、ダブルタップのジェスチャーによるズームおよびパンの動作、ベクターレイヤーオーバーレイ、アクセシビリティ機能、RTL サポート、SfMapsTheme によるテーマ設定をサポートしています。

適切なレイヤータイプの選択

MapShapeLayer を使用する場合：

• 地理的な形状を定義するGeoJSON データがある
• コロプレスマップ（地域や国ごとの色分けマップ）が必要である
• データが統計データであり、地理的境界と関連付けられている
• 形状の外観やデータバインディングを完全に制御したい
• 外部のタイルサービスを必要としないオフラインマップが必要である
• カスタム形状や特定の地域を強調表示する必要がある
• 次のようなものを作成する：選挙マップ、営業地域マップ、国勢調査データの視覚化、地域比較

MapTileLayer を使用する場合：

• OpenStreetMap などのプロバイダーによる実世界の道路地図が必要である
• アプリで詳細な地理情報（道路、ランドマーク、地形）が必要である
• タイルの読み込みにオンライン接続を利用できる
• カスタムデータを描画せずに標準的なマップ表示を利用したい
• 道路レベルの詳細情報や衛星画像が必要である
• 見慣れたマップ背景上に正確な位置を表示する必要がある
• 次のようなものを作成する：店舗検索、配送追跡、ナビゲーションアプリ、位置選択機能

主な違いのまとめ：

機能	MapShapeLayer	MapTileLayer
データソース	GeoJSON ファイル	ウェブタイルサービス（URL）
オフライン対応	✅ はい（GeoJSON を埋め込み）	❌ インターネット接続が必要
データバインディング	✅ 完全対応	❌ マーカーのみ対応
コロプレスマップ	✅ はい	❌ いいえ
バブルによる可視化	✅ はい	❌ いいえ
データラベル	✅ はい	❌ いいえ
図形の選択	✅ はい	❌ いいえ
カラー マッピング	✅ はい	❌ いいえ
凡例	✅ はい	❌ いいえ
マーカー	✅ はい	✅ はい
ズームとパン	✅ はい	✅ はい
ストリートマップ	❌ いいえ	✅ はい
サブレイヤー	✅ はい	✅ はい
ベクターレイヤー	✅ はい（円弧、円、線など）	✅ はい（円弧、円、線など）
ツールチップ	✅ はい（図形とバブル）	❌ 限定的
現実世界の詳細度	❌ 限定的	✅ 高精細

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

はじめに

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

読むタイミング：初回のセットアップ、インストール、基本的なマップの作成

掲載内容：

• インストールとパッケージのセットアップ
• MapShapeLayer の基本的な実装
• MapTileLayer の基本的な実装
• GeoJSON データの読み込み（アセット、ネットワーク、メモリ）
• OpenStreetMap クイックスタート
• パッケージの依存関係とインポート

レイヤーの概要

シェイプレイヤー

📄 参照先： references/shape-layer.md

読むタイミング：ベクターマップ、GeoJSON データ、コロプレスマップ、データバインディングを扱う場合

掲載内容：

• MapShapeLayer ウィジェットの概要と機能
• GeoJSON データソースの設定
• 図形データフィールドのマッピング
• 図形の外観（色、ストローク）
• 読み込み進行状況インジケーター
• 基本的な図形の描画
• カラーマッピングの方法

タイルレイヤー

📄 参照先： references/tile-layer.md

読むタイミング：OpenStreetMap、Bing Maps、その他のタイルプロバイダーを統合する場合

掲載内容：

• MapTileLayer ウィジェットの概要と機能
• URL テンプレートの形式（WMTS 仕様）
• OpenStreetMap の統合
• Bing Maps のセットアップと API キー
• その他のプロバイダー（TomTom、MapBox、Google Maps）
• 初期フォーカルポイントの設定
• 初期ズームレベルの設定

マーカー

📄 参照先： references/markers.md

読むタイミング：マップに位置マーカー、ピン、カスタムマーカーを追加する場合

掲載内容：

• 両方のレイヤータイプへのマーカーの追加
• 組み込みマーカーシンボル（円、ひし形、三角形など）
• カスタムマーカーウィジェット
• マーカーの配置（緯度／経度）
• マーカーの外観のカスタマイズ
• マーカーの動的な管理（追加／更新／削除）
• マーカーコントローラー（MapShapeLayerController/MapTileLayerController）
• マーカーの配置とオフセット
• 境界に合わせてマーカーをズーム

データ可視化機能（シェイプレイヤー）

データラベル

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

読むタイミング：マップの図形上にテキストラベルを表示する場合

掲載内容：

• 図形へのデータラベルの表示
• データラベルマッパーの設定
• ラベルテキストのカスタマイズ
• ラベルのトリミングとオーバーフロー処理
• ラベルのスタイルと配置
• スマートラベルの動作

凡例

📄 参照先： references/legend.md

読むタイミング：図形やバブルの凡例を追加する場合

掲載内容：

• 凡例の設定と配置
• 図形の色の凡例
• バブルの凡例
• 凡例のカスタマイズ（アイコン、テキスト、レイアウト）
• 凡例の表示切り替え機能
• 凡例の操作
• テキストスタイルの設定

ツールチップ

📄 参照先： references/tooltip.md

読むタイミング：マップ要素にインタラクティブなツールチップを追加する場合

掲載内容：

• ビルダーを使った図形のツールチップ
• バブルのツールチップ
• マーカーのツールチップ
• ツールチップのカスタマイズ
• ツールチップのスタイルと配置
• ツールチップの設定（色、ストローク、パディング）

バブル

📄 参照: references/bubble.md

参照するタイミング：サイズや色でデータを表現するバブルを図形上に表示する場合

説明されているトピック：

• バブルによる可視化の概要
• データに基づくバブルサイズのマッピング
• バブルカラーのマッピング
• バブルの外観のカスタマイズ
• バブルのツールチップ
• バブルマップのユースケース

色とデータのマッピング

📄 参照: references/color-mapping.md

参照するタイミング：図形やバブルにデータ値を色としてマッピングする場合

説明されているトピック：

• 等値の色マッピング（離散値）
• 範囲による色マッピング（連続範囲）
• 図形の色値マッパー
• バブルの色値マッパー
• カラーマッパーの設定
• 不透明度の設定（最小値／最大値）
• マッパーを使わずに色を直接返す方法
• 色マッピングのパターン

選択と操作機能

選択

📄 参照: references/selection.md

参照するタイミング：図形の選択を有効にし、ユーザー操作を処理する場合

説明されているトピック：

• 図形選択機能
• 選択コールバック
• 選択時のスタイルと装飾
• 単一選択と複数選択
• プログラムによる選択
• 選択の切り替え
• 選択イベントとハンドラー

ズームとパン

📄 参照: references/zoom-pan.md

参照するタイミング：ズーム、パン、ナビゲーション機能を有効にする場合

説明されているトピック：

• MapZoomPanBehavior の設定
• ピンチズーム（モバイル）
• マウスホイールによるズーム（デスクトップ）
• ズームツールバー（ウェブプラットフォーム）
• ダブルタップズーム
• ズームレベルの設定
• パンの動作と制限
• 焦点となる緯度／経度の境界
• ズームのコールバックとイベント

高度な機能

ベクターレイヤー

📄 参照: references/vector-layers.md

参照するタイミング：マップにベクターオーバーレイを追加する場合

説明されているトピック：

• MapArcLayer（2つの座標間の弧）
• MapCircleLayer（特定の座標上の円）
• MapLineLayer（座標を結ぶ線）
• MapPolygonLayer（多角形）
• MapPolylineLayer（接続された線分）
• ベクターレイヤーのスタイル設定とカスタマイズ
• 各ベクタータイプのユースケース

サブレイヤー

📄 参照: references/shape-sublayer.md

参照するタイミング：複数のレイヤーや階層データの可視化を追加する場合

説明されているトピック：

• MapShapeLayer へのサブレイヤーの追加
• サブレイヤーの設定とネスト
• サブレイヤーのマーカーとバブル
• 階層データの可視化
• サブレイヤーのユースケース
• レイヤーの順序と z-index

カスタマイズとテーマ設定

カスタマイズ

📄 参照: references/customization.md

参照するタイミング：マップの外観やスタイルをカスタマイズする場合

説明されているトピック：

• SfMapsTheme の統合
• 外観のカスタマイズ
• 図形のスタイル設定（色、境界線）
• ホバー効果（ウェブプラットフォーム）
• テーマの統合
• レスポンシブデザインのパターン
• マップのカスタムスタイル設定

アクセシビリティ

📄 参照: references/accessibility.md

参照するタイミング：すべてのユーザーが利用できるマップ機能を実装する場合

説明されているトピック：

• スクリーンリーダーのサポート
• 図形のセマンティックラベル
• キーボードナビゲーション
• WCAG 準拠
• フォーカスインジケーター
• アクセシブルなマップ操作

クイックスタートの例

GeoJSON を使った基本的なシェイプレイヤー

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

class MyShapeMap extends StatefulWidget {
  @override
  _MyShapeMapState createState() => _MyShapeMapState();
}

class _MyShapeMapState extends State<MyShapeMap> {
  late MapShapeSource _dataSource;
  
  @override
  void initState() {
    super.initState();
    _dataSource = MapShapeSource.asset(
      'assets/world_map.json',
      shapeDataField: 'name',
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('World Map')),
      body: Padding(
        padding: EdgeInsets.all(15),
        child: SfMaps(
          layers: [
            MapShapeLayer(
              source: _dataSource,
              color: Colors.blue[100],
              strokeColor: Colors.blue,
              strokeWidth: 0.5,
            ),
          ],
        ),
      ),
    );
  }
}

OpenStreetMap を使った基本的なタイルレイヤー

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

class MyTileMap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('OpenStreetMap')),
      body: SfMaps(
        layers: [
          MapTileLayer(
            urlTemplate: 'url',
            initialFocalLatLng: MapLatLng(27.1751, 78.0421),
            initialZoomLevel: 5,
          ),
        ],
      ),
    );
  }
}

色マッピングを使ったコロプレスマップ

class ChoroplethMap extends StatefulWidget {
  @override
  _ChoroplethMapState createState() => _ChoroplethMapState();
}

class _ChoroplethMapState extends State<ChoroplethMap> {
  late List<Model> _data;
  late MapShapeSource _dataSource;
  
  @override
  void initState() {
    super.initState();
    _data = [
      Model('India', 280),
      Model('United States of America', 190),
      Model('Brazil', 120),
    ];
    
    _dataSource = MapShapeSource.asset(
      'assets/world_map.json',
      shapeDataField: 'name',
      dataCount: _data.length,
      primaryValueMapper: (int index) => _data[index].country,
      shapeColorValueMapper: (int index) => _data[index].value,
      shapeColorMappers: [
        MapColorMapper(from: 0, to: 100, color: Colors.red),
        MapColorMapper(from: 101, to: 300, color: Colors.green),
      ],
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfMaps(
        layers: [
          MapShapeLayer(
            source: _dataSource,
            legend: MapLegend(MapElement.shape),
            showDataLabels: true,
          ),
        ],
      ),
    );
  }
}

class Model {
  Model(this.country, this.value);
  final String country;
  final double value;
}

マーカー付きのマップ

class MapWithMarkers extends StatefulWidget {
  @override
  _MapWithMarkersState createState() => _MapWithMarkersState();
}

class _MapWithMarkersState extends State<MapWithMarkers> {
  late List<MarkerData> _markers;
  late MapShapeSource _dataSource;
  
  @override
  void initState() {
    super.initState();
    _markers = [
      MarkerData('New York', 40.7128, -74.0060),
      MarkerData('London', 51.5074, -0.1278),
      MarkerData('Tokyo', 35.6762, 139.6503),
    ];
    
    _dataSource = MapShapeSource.asset(
      'assets/world_map.json',
      shapeDataField: 'name',
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfMaps(
        layers: [
          MapShapeLayer(
            source: _dataSource,
            initialMarkersCount: _markers.length,
            markerBuilder: (BuildContext context, int index) {
              return MapMarker(
                latitude: _markers[index].latitude,
                longitude: _markers[index].longitude,
                iconColor: Colors.red,
                iconType: MapIconType.circle,
                size: Size(15, 15),
                child: null,
              );
            },
          ),
        ],
      ),
    );
  }
}

class MarkerData {
  MarkerData(this.city, this.latitude, this.longitude);
  final String city;
  final double latitude;
  final double longitude;
}

よく使われるパターン

パターン 1：選択機能付きのインタラクティブなコロプレスマップ

// Common pattern for election results, sales data by region, etc.
late MapShapeSource _dataSource;
int? _selectedIndex;

_dataSource = MapShapeSource.asset(
  'assets/usa_states.json',
  shapeDataField: 'name',
  dataCount: _statesData.length,
  primaryValueMapper: (index) => _statesData[index].state,
  shapeColorValueMapper: (index) => _statesData[index].value,
  shapeColorMappers: [
    MapColorMapper(from: 0, to: 50, color: Colors.red),
    MapColorMapper(from: 51, to: 100, color: Colors.blue),
  ],
);

MapShapeLayer(
  source: _dataSource,
  legend: MapLegend(MapElement.shape),
  showDataLabels: true,
  onSelectionChanged: (int index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  selectionSettings: MapSelectionSettings(
    color: Colors.yellow,
    strokeColor: Colors.black,
    strokeWidth: 2,
  ),
)

パターン 2：カスタムマーカー付きのタイルレイヤー

// Common pattern for store locator, delivery tracking
late List<LocationData> _locations;
late MapTileLayerController _controller;

@override
void initState() {
  _controller = MapTileLayerController();
  _locations = [/* your location data */];
  super.initState();
}

MapTileLayer(
  urlTemplate: 'url',
  initialFocalLatLng: MapLatLng(37.7749, -122.4194),
  initialZoomLevel: 10,
  controller: _controller,
  initialMarkersCount: _locations.length,
  markerBuilder: (context, index) {
    return MapMarker(
      latitude: _locations[index].latitude,
      longitude: _locations[index].longitude,
      child: Icon(Icons.location_pin, color: Colors.red, size: 30),
    );
  },
  zoomPanBehavior: MapZoomPanBehavior(
    enableDoubleTapZooming: true,
    enablePinching: true,
    enablePanning: true,
  ),
)

パターン 3：バブルとツールチップ付きのマップ

// Common pattern for population density, sales volume visualization
_dataSource = MapShapeSource.asset(
  'assets/world_map.json',
  shapeDataField: 'name',
  dataCount: _data.length,
  primaryValueMapper: (index) => _data[index].country,
  bubbleSizeMapper: (index) => _data[index].population,
  bubbleColorValueMapper: (index) => _data[index].density,
);

MapShapeLayer(
  source: _dataSource,
  showDataLabels: true,
  legend: MapLegend.bar(MapElement.bubble),
  bubbleSettings: MapBubbleSettings(
    maxRadius: 50,
    minRadius: 10,
    color: Colors.blue,
  ),
  shapeTooltipBuilder: (context, index) {
    return Padding(
      padding: EdgeInsets.all(8),
      child: Text(
        '${_data[index].country}: ${_data[index].population}M',
        style: TextStyle(color: Colors.white),
      ),
    );
  },
  bubbleTooltipBuilder: (context, index) {
    return Padding(
      padding: EdgeInsets.all(8),
      child: Text(
        'Density: ${_data[index].density}/km²',
        style: TextStyle(color: Colors.white),
      ),
    );
  },
)

パターン 4：マーカーが収まるようにズーム

// Show specific region with markers
late MapZoomPanBehavior _zoomPanBehavior;

@override
void initState() {
  _zoomPanBehavior = MapZoomPanBehavior(
    enableDoubleTapZooming: true,
    enablePinching: true,
    enablePanning: true,
  );
  super.initState();
}

// Button to fit bounds
void _fitToMarkers() {
  setState(() {
    // Define bounds to show all markers
    _zoomPanBehavior.latLngBounds = MapLatLngBounds(
      MapLatLng(southwestLat, southwestLng),
      MapLatLng(northeastLat, northeastLng),
    );
  });
}

MapShapeLayer(
  source: _dataSource,
  zoomPanBehavior: _zoomPanBehavior,
  // ... markers
)

パターン 5：マーカーの動的な追加（タップして追加）

// Add markers where user taps
late MapLatLng _markerPosition;
late MapShapeLayerController _controller;
late CustomZoomPanBehavior _zoomPanBehavior;

@override
void initState() {
  _controller = MapShapeLayerController();
  _zoomPanBehavior = CustomZoomPanBehavior()
    ..onTap = _handleTap;
  super.initState();
}

void _handleTap(Offset position) {
  _markerPosition = _controller.pixelToLatLng(position);
  if (_controller.markersCount > 0) {
    _controller.clearMarkers();
  }
  _controller.insertMarker(0);
}

MapShapeLayer(
  source: _dataSource,
  controller: _controller,
  zoomPanBehavior: _zoomPanBehavior,
  markerBuilder: (context, index) {
    return MapMarker(
      latitude: _markerPosition.latitude,
      longitude: _markerPosition.longitude,
      child: Icon(Icons.location_on, color: Colors.red),
    );
  },
)

class CustomZoomPanBehavior extends MapZoomPanBehavior {
  late Function(Offset) onTap;
  
  @override
  void handleEvent(PointerEvent event) {
    if (event is PointerUpEvent) {
      onTap(event.localPosition);
    }
    super.handleEvent(event);
  }
}

主なプロパティ

MapShapeLayer の主なプロパティ

• source - GeoJSON データとマッピングを含む MapShapeSource
• color - すべてのシェイプのデフォルト色
• strokeColor - シェイプの枠線の色
• strokeWidth - シェイプの枠線の幅
• legend - 凡例の設定（バーまたはデフォルト）
• showDataLabels - シェイプにラベルを表示するかどうか
• initialMarkersCount - 表示するマーカーの数
• markerBuilder - マーカーのビルダー関数
• controller - 動的な更新を行う MapShapeLayerController
• zoomPanBehavior - ズームとパンの設定
• onSelectionChanged - シェイプが選択されたときのコールバック
• selectionSettings - 選択時の表示設定
• shapeTooltipBuilder - シェイプ用のカスタムツールチップ
• bubbleTooltipBuilder - バブル用のカスタムツールチップ
• markerTooltipBuilder - マーカー用のカスタムツールチップ
• tooltipSettings - ツールチップのスタイル設定
• bubbleSettings - バブルの表示設定
• dataLabelSettings - データラベルのスタイル設定
• legendSettings - 凡例の表示設定
• sublayers - MapSublayer ウィジェットのリスト
• loadingBuilder - GeoJSON の読み込み中に表示するウィジェット

MapTileLayer の主なプロパティ

• urlTemplate - WMTS 形式のタイルプロバイダー URL
• initialFocalLatLng - 初期中心点（緯度、経度）
• initialZoomLevel - 初期ズームレベル（1～15 以上）
• initialMarkersCount - 表示するマーカーの数
• markerBuilder - マーカーのビルダー関数
• controller - 動的な更新を行う MapTileLayerController
• zoomPanBehavior - ズームとパンの設定
• markerTooltipBuilder - マーカー用のカスタムツールチップ
• initialLatLngBounds - 読み込み時に表示範囲に収める境界

MapShapeSource の主なプロパティ

• shapeDataField - データと照合する GeoJSON 内のフィールド名
• dataCount - データ項目の数
• primaryValueMapper - データインデックスをシェイプ識別子にマッピング
• dataLabelMapper - データインデックスをラベルテキストにマッピング
• shapeColorValueMapper - データインデックスを色の値にマッピング
• shapeColorMappers - 等値／範囲マッピング用のカラーマッパー
• bubbleSizeMapper - データインデックスをバブルサイズにマッピング
• bubbleColorValueMapper - データインデックスをバブルの色にマッピング
• bubbleColorMappers - バブル用のカラーマッパー

MapZoomPanBehavior の主なプロパティ

• enableDoubleTapZooming - ダブルタップによるズームを有効にする
• enablePinching - ピンチによるズームを有効にする（モバイル）
• enablePanning - パンジェスチャーを有効にする
• enableMouseWheelZooming - マウスホイールによるズームを有効にする
• showToolbar - ズームツールバーを表示する（ウェブ）
• toolbarSettings - ツールバーの表示設定
• zoomLevel - 現在のズームレベル（読み書き可能）
• focalLatLng - 現在の中心点（読み書き可能）
• latLngBounds - 動的に表示範囲に収める境界
• minZoomLevel - 最小ズームレベル
• maxZoomLevel - 最大ズームレベル
• onZooming - ズーム中のコールバック
• onPanning - パン中のコールバック

一般的なユースケース

1. 選挙結果マップ - MapShapeLayer を使用し、州／地域ごとに色をマッピングします
2. 店舗検索 - MapTileLayer を使用し、カスタムマーカーアイコンを設定します
3. 販売テリトリーマップ - MapShapeLayer を使用し、売上高を示すバブルを表示します
4. 人口密度マップ - MapShapeLayer を使用し、コロプレス図で色分けします
5. 配送追跡 - MapTileLayer を使用し、マーカーをリアルタイムで更新します
6. 天気マップ - MapShapeLayer を使用し、気温／気象状況に応じて色をマッピングします
7. 物件検索 - MapTileLayer を使用し、マーカーと表示範囲へのズーム機能を設定します
8. 地域分析 - MapShapeLayer を使用し、凡例、ツールチップ、選択機能を設定します
9. ルート計画 - MapTileLayer を使用し、ポリラインのベクターレイヤーを設定します
10. 国勢調査データの可視化 - MapShapeLayer を使用し、データラベルと凡例を表示します