Identify Control

Click or box-select features. Presentation uses menus on the identify dataset node and an internal resolver (detail → attribute table → result panel).

Architecture (thin host)

Orchestration is owned by Experimental createIdentifySession (@hungpvq/map-dataset/identify): control model state, runIdentifyMulti query pipeline, and map-click / bbox mode flags. Vue and React IdentifyControl stay thin hosts — they wire EventClick / EventBbox, registry, highlight store, and toolbar UI, then sync from session.getState() after applyScopedSession / toggleShow / closeAndCleanup / setters.

Identify painting uses the highlight controller with source: 'identify' (see Highlight). That is separate from pointer.click on a highlight part: Identify’s click query does not require bindPointer, and enabling both Identify and pointer highlight can double-fire on the same click — disable pointer.click on parts or skip HighlightPointer when Identify owns the click.

Touch / coarse pointer: hover highlight is skipped when (hover: hover) is false; box-select supports touch; on coarse pointers, a long-press (~500ms) runs the same identify click path. Map clicks use the click event only (no duplicate touchstart identify).

Props

Prop	Description	Type	Required	Default Value
mapId		string	false	--
dragId		string	false	--
btnWidth		number	false	40
controlOrder	CSS flex order for the standalone button	number	false	0
position		'top-left', 'top-right', 'bottom-left', 'bottom-right'	false	'bottom-right'
controlLayout	'standalone' (corner), 'toolbar' (always in toolbar), 'button' (always corner; not auto-promoted on mobile)	'standalone' | 'toolbar' | 'button'	false	'standalone'
controlVisible		boolean	false	true

Map also accepts buttonInMobile ('button' | 'toolbar' | 'menu', default 'button'). On viewports ≤640px:

• 'button' — leave corner buttons unchanged
• 'toolbar' — move declared control buttons into a single ToolbarControl host (except controlLayout="button"). Mount one ToolbarControl in the map slot
• 'menu' — hide per-control corner buttons; fan out intact clusters by position into corner stacks with outside-in More. Mount one ToolbarControl.

See ToolbarControl.

Prop	Type	Default	Effect
show	boolean	—	Identify session active (toolbar)
immediately	boolean	false	Start click-identify on mount
preferResultControl	boolean	false	Always open the Identify Result panel; skip auto show-detail / attribute-table even when those menus exist. Same flag can be set per identify via .preferResultControl() on the builder.

Slots

None.

Events

None. Feature actions are identify-node menus. Mount ComponentManagementControl so Show detail / Style can open.

Loading and empty results

• While getFeatures / getList / getMergedFeatures runs, the Identify toolbar button shows loading (spinner). Map cursor may switch to wait.
• Empty hits do not open the result panel — loading simply ends (stale items are cleared).
• The result panel opens only when the resolver needs it (e.g. all layers / multiple hits / preferResultControl), or when no exclusive detail/table path ran. If that panel is already open, its in-panel loading state stays in sync.

Turning on identify from a layer menu starts click mode and sets the layer filter; it does not auto-open the result panel.

Resolver (short)

1. Unless preferResultControl: single layer + exactly one feature + show-detail menu → open detail
2. Else unless preferResultControl: single layer + attribute-table menu → open table and select rows
3. Always update result-panel items (even if the panel stays closed)
4. If there are hits and no exclusive UI handled them → open result panel

Force result panel (menus still available on each row in the panel):

<IdentifyControl position="top-right" prefer-result-control />

<IdentifyControl position="top-right" preferResultControl />

See Identify for getList / merge APIs and singleLayer.

Vue

<script setup lang="ts">
import { Map } from '@hungpvq/vue-map-core';
import {
  IdentifyControl,
  ComponentManagementControl,
  useMapHighlight,
} from '@hungpvq/vue-map-dataset';
import { destroyHighlightController } from '@hungpvq/map-dataset/highlight';
import { onUnmounted } from 'vue';
import '@hungpvq/map-core/style.css';
import '@hungpvq/map-dataset/style.css';
import '@hungpvq/vue-map-core/style.css';
import '@hungpvq/vue-map-dataset/style.css';
import '@hungpvq/vue-draggable/style.css';

// Optional: pointer highlight in addition to Identify (watch dual-click).
const hl = useMapHighlight(mapId);
const unbind = hl.bindPointer({ click: true, hover: false });
onUnmounted(() => {
  unbind();
  destroyHighlightController(mapId);
});
</script>

<template>
  <Map>
    <IdentifyControl position="top-right" show />
    <!-- Or demo shell: <HighlightPointer enable-click /> -->
    <ComponentManagementControl />
  </Map>
</template>

Immediate click mode:

<IdentifyControl position="top-right" immediately />

React

import {
  IdentifyControl,
  ComponentManagementControl,
  useMapHighlight,
} from '@hungpvq/react-map-dataset';
import { destroyHighlightController } from '@hungpvq/map-dataset/highlight';
import { useEffect } from 'react';

function Page({ mapId }: { mapId: string }) {
  const hl = useMapHighlight(mapId);
  useEffect(() => {
    const unbind = hl.bindPointer({ click: true, hover: false });
    return () => {
      unbind();
      destroyHighlightController(mapId);
    };
  }, [hl, mapId]);

  return (
    <>
      <IdentifyControl position="top-right" show />
      {/* Or demo shell: <HighlightPointer enableClick /> */}
      <ComponentManagementControl />
    </>
  );
}

Immediate click mode: <IdentifyControl position="top-right" immediately />.

Identify menus are defined on the identify dataset node. See Identify.

Right-click Quick analysis → Identify features (MapContextMenuControl) runs the same query. That menu item is added only when IdentifyControl is mounted.

IdentifyResultControl is mounted by IdentifyControl (no separate install required).

Highlight ownership (Identify vs pointer):

• Identify result highlight is painted when menu items use .setKey('identify') (e.g. identify-for-list menus). LayerMenuDefaultHandle handles LIST_VIEW_MENU_ID.highlight and calls hl.show(…, { source: value.key }), so identify menus pass source: 'identify'.
• IdentifyControl itself does not call show(). On close it clears identify paint with hideIfSource('identify').
• HighlightPointer / bindPointer use sources pointer / hover and are optional for pointer-picking demos. They are not required for Identify’s own highlight path.

There is no LayerHighlight component anymore.