Function setMapIconCondition

setMapIconCondition(): void

地図アイコン取得条件を設定する — 詳細な使用例

地図タイルから取得する施設アイコンの種類・ズームレベルなどを MapIconCondition で制御します。クリック・マウスエンター・マウスリーブの各イベント、フィルタリング、ソート、ラベル生成、拡張テキスト表示など豊富なカスタマイズが可能です。

Returns void

Warning

setMapIconCondition は一度に一条件のみ有効です。再設定すると上書きされます。
clearMapIconCondition で表示を完全に無効化できます。
表示を絞り込む場合は setMapIconFilterCallback を使用してください。
アイコン同士の重なり順を制御するには setMapIconCompareCallback を使用してください。
各種リスナー・コールバックは Condition と独立して設定・解除できます。

Example: TotalPC相当の地図アイコン条件と各種コールバックを設定する

import * as GIA from '@ntj/gaia';

const tags: Record<string, GIA.types.MapIconConditionPaletteConfig[]> = {
  // 駐車場
  '0805001001': [
    {
      zoomRange: new GIA.value.ZoomRange(15, 20),
      size: 90,
      name: '170e0000_pcmap',
      gravity: 'center',
      priority: 450,
    },
  ],
  // 例: エネオス
  '0801001003': [
    {
      zoomRange: new GIA.value.ZoomRange(15, 20),
      size: 120,
      name: '170c000e_pcmap',
      gravity: 'center',
      priority: 460,
      extension: {
        size: 90,
        name: '170c000e',
      },
    },
  ],
};

const condition = new GIA.value.MapIconCondition({
  label: { gravity: 'top' },
  tags,
  requireReviewRate: true,
  icon: {
    collisionMargin: new GIA.value.Point(4, 4),
  },
});

map.setMapIconCondition(condition);

// 地図アイコンの拡張表示（例: GS価格）
map.setMapIconExtensionCallback((mapSpot) => {
  const gasPrice = mapSpot.gasPrice;
  if (mapSpot.ntjCode.startsWith('170c00') && gasPrice?.regular) {
    return Number(gasPrice.regular).toLocaleString('ja-JP', {
      style: 'currency',
      currency: 'JPY',
    });
  }
  return undefined;
});

// 同カテゴリ内の表示優先度（レビュー評価→営業中→駐車台数）
map.setMapIconCompareCallback((a, b) => {
  if (!a.getLongestTag || !b.getLongestTag) {
    return 0;
  }
  const aTag = a.getLongestTag();
  const bTag = b.getLongestTag();
  if (!aTag || !bTag || aTag.slice(0, 4) !== bTag.slice(0, 4)) {
    return 0;
  }

  const aRate = a.reviewRate ? parseFloat(a.reviewRate) : 0.0;
  const bRate = b.reviewRate ? parseFloat(b.reviewRate) : 0.0;
  if (aRate !== bRate) {
    return bRate - aRate;
  }

  const aOpen = a.openingHours ? a.openingHours.isOpenNow() : false;
  const bOpen = b.openingHours ? b.openingHours.isOpenNow() : false;
  if (aOpen !== bOpen) {
    return aOpen ? -1 : 1;
  }

  const aParking = a.parking ? a.parking.getParkingNumber() : 0;
  const bParking = b.parking ? b.parking.getParkingNumber() : 0;
  return bParking - aParking;
});

// ズームレベルごとに表示カテゴリを切り替えるフィルタ
map.setMapIconFilterCallback((data, zoomLevel) => {
  const tag = data.getLongestTag() ?? data.tags[0];
  if (!tag) {
    return false;
  }
  if (zoomLevel <= 14) {
    return tag.startsWith('0804'); // 道の駅
  }
  if (zoomLevel <= 17) {
    return tag.startsWith('0805') || tag.startsWith('0201'); // 駐車場/コンビニ
  }
  return true;
});

// クリックリスナー
map.setMapIconClickListener((data) => {
  console.log('施設名:', data.name, '緯度経度:', data.latlng);
}, {
  isIconClickable: true,
  isTextClickable: true,
});

// マウスエンターで強調表示
map.setMapIconMouseEnterListener((data) => {
  console.log('ホバー中:', data.name);
});

// アイコンにラベル（施設名）を付与する
map.setMapIconLabelCallback((data) => data.name ?? '');

// 画面内のアイコンリストを取得するコールバック
map.setCallbackMapIconInDisplay((icons) => {
  console.log('表示中のアイコン数:', icons.length);
});

Function setMapIconCondition

Returns void

Warning

Example: TotalPC相当の地図アイコン条件と各種コールバックを設定する

See

Settings

Member Visibility

Theme