From cb52b7d14ec373dd95eb6d676544afd46298103d Mon Sep 17 00:00:00 2001
From: "hung.pv" <hung.pv@eofactory.ai>
Date: Mon, 2 Jun 2025 22:45:30 +0700
Subject: [PATCH 1/5] feat: init new store

---
 .vscode/extensions.json                       |   6 +-
 apps/demo-draggable/src/main.ts               |   6 +-
 apps/demo-map/src/main.ts                     |   2 +
 apps/demo-map/src/views/AllMapCompareView.vue |  22 +-
 apps/demo-map/src/views/AllMapView.vue        |  14 +-
 libs/draggable/package.json                   |   3 +-
 .../draggable/draggable-container.vue         |  10 +-
 .../src/components/draggable/item-sidebar.vue |   6 +-
 libs/draggable/src/hoc/mobile-handle.ts       |   6 +-
 libs/draggable/src/hook/useComponent.ts       |  10 +-
 libs/draggable/src/hook/useInit.ts            |  30 +-
 libs/draggable/src/store/index.ts             | 256 +++++-----
 libs/draggable/vite.config.ts                 |   7 +-
 libs/map/basemap/package.json                 |   3 +-
 libs/map/basemap/src/adapter/base.ts          |   9 +-
 libs/map/basemap/src/hooks/useBaseMap.ts      |  14 +-
 libs/map/basemap/src/index.ts                 |   1 -
 libs/map/basemap/src/modules/BaseMapCard.vue  |   9 +-
 .../src/modules/CompareBaseMapControl.vue     |   1 -
 libs/map/basemap/src/store/index.ts           |  46 +-
 libs/map/basemap/vite.config.ts               |   1 +
 libs/map/core/package.json                    |   3 +-
 .../map/core/src/extra/compare/hooks/index.ts |   9 +-
 .../src/extra/compare/modules/MapCompare.vue  |  26 +-
 libs/map/core/src/extra/compare/store.ts      |   7 +-
 .../core/src/extra/crs/hooks/useCoordinate.ts |   5 +-
 .../src/extra/crs/hooks/useMapCrsItems.ts     |  28 +-
 libs/map/core/src/extra/crs/index.md          |   9 +-
 libs/map/core/src/extra/crs/index.ts          |   2 +-
 libs/map/core/src/extra/crs/store.ts          |  59 +--
 .../map/core/src/extra/event/hook/useEvent.ts |  30 +-
 .../src/extra/event/hook/useEventMapItems.ts  |  18 +-
 .../src/extra/event/modules/ActionControl.vue |  20 +-
 libs/map/core/src/extra/event/store.ts        |  80 +--
 libs/map/core/src/extra/image/index.md        |   7 +-
 libs/map/core/src/extra/image/index.ts        |   2 +-
 libs/map/core/src/extra/image/store.ts        |  63 +--
 libs/map/core/src/extra/index.ts              |   1 +
 libs/map/core/src/extra/lang/hook.ts          |  29 +-
 libs/map/core/src/extra/lang/store.ts         |  86 ++--
 libs/map/core/src/extra/mitt/index.ts         |  25 +-
 libs/map/core/src/modules/Map.vue             |   9 +-
 libs/map/core/src/store/index.md              |  17 +-
 libs/map/core/src/store/index.ts              |   1 -
 libs/map/core/src/store/logger.ts             |   3 +
 libs/map/core/src/store/queue.ts              |  61 ---
 libs/map/core/src/store/store.ts              |  88 +++-
 libs/map/core/src/types/index.ts              |   1 +
 libs/map/core/vite.config.ts                  |   1 +
 libs/map/dataset/package.json                 |   3 +-
 .../src/model/data-management/model.ts        |  13 +-
 libs/map/dataset/src/model/part-menu.model.ts |  15 +-
 .../ComponentManagementControl.vue            |  14 +-
 .../modules/CreateControl/CreateControl.vue   |   9 +-
 .../IdentifyControl/IdentifyControl.vue       |  24 +-
 .../IdentifyShowFirstControl.vue              |  14 +-
 .../modules/LayerControl/part/LayerList.vue   |  20 +-
 .../LayerControl/part/LayerListReadonly.vue   |  11 +-
 .../src/modules/LayerDetail/LayerDetail.vue   |   5 +-
 .../modules/LayerHighlight/LayerHighlight.vue |  24 +-
 libs/map/dataset/src/store/component.ts       | 113 +++--
 libs/map/dataset/src/store/highlight.ts       | 140 +++---
 libs/map/dataset/src/store/index.ts           | 189 ++++----
 libs/map/dataset/vite.config.ts               |   1 +
 libs/map/draw/package.json                    |   1 +
 .../src/modules/DrawControl/DrawControl.vue   |  67 +--
 .../modules/InspectControl/InspectControl.vue |  15 +-
 libs/map/draw/src/store/index.ts              | 458 +++++++++---------
 libs/map/draw/vite.config.ts                  |   1 +
 .../src/modules/MeasurementControl.vue        |  30 +-
 libs/map/print/package.json                   |   3 +-
 .../src/modules/PrintAdvancedControl.vue      |   7 +-
 libs/map/print/src/store/index.ts             |  88 ++--
 libs/map/print/vite.config.ts                 |   1 +
 libs/share/store/.eslintrc.json               |  30 ++
 libs/share/store/README.md                    |  11 +
 libs/share/store/jest.config.ts               |  10 +
 libs/share/store/package.json                 |  26 +
 libs/share/store/project.json                 |  33 ++
 libs/share/store/src/index.ts                 |   2 +
 libs/share/store/src/plugin/index.ts          |  36 ++
 libs/share/store/src/store/createStore.ts     | 130 +++++
 libs/share/store/src/store/index.ts           |   1 +
 libs/share/store/tsconfig.json                |  23 +
 libs/share/store/tsconfig.lib.json            |  10 +
 libs/share/store/tsconfig.spec.json           |  15 +
 nx.json                                       |   8 +-
 package-lock.json                             |  32 +-
 package.json                                  |   3 +-
 tsconfig.base.json                            |   1 +
 90 files changed, 1517 insertions(+), 1272 deletions(-)
 delete mode 100644 libs/map/core/src/store/queue.ts
 create mode 100644 libs/share/store/.eslintrc.json
 create mode 100644 libs/share/store/README.md
 create mode 100644 libs/share/store/jest.config.ts
 create mode 100644 libs/share/store/package.json
 create mode 100644 libs/share/store/project.json
 create mode 100644 libs/share/store/src/index.ts
 create mode 100644 libs/share/store/src/plugin/index.ts
 create mode 100644 libs/share/store/src/store/createStore.ts
 create mode 100644 libs/share/store/src/store/index.ts
 create mode 100644 libs/share/store/tsconfig.json
 create mode 100644 libs/share/store/tsconfig.lib.json
 create mode 100644 libs/share/store/tsconfig.spec.json

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 71f5e85..97e81d4 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,7 @@
 {
-  "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode"]
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "firsttris.vscode-jest-runner"
+  ]
 }
diff --git a/apps/demo-draggable/src/main.ts b/apps/demo-draggable/src/main.ts
index 840a48b..5dfcdb2 100644
--- a/apps/demo-draggable/src/main.ts
+++ b/apps/demo-draggable/src/main.ts
@@ -1,8 +1,8 @@
-import './styles.scss';
-
+import { createStoreRegistryPlugin } from '@hungpvq/shared-store';
 import { createApp } from 'vue';
 import App from './app/App.vue';
+import './styles.scss';
 
 const app = createApp(App);
-
+app.use(createStoreRegistryPlugin());
 app.mount('#root');
diff --git a/apps/demo-map/src/main.ts b/apps/demo-map/src/main.ts
index 51e1c81..6aff449 100644
--- a/apps/demo-map/src/main.ts
+++ b/apps/demo-map/src/main.ts
@@ -2,11 +2,13 @@ import './styles.css';
 
 import router from './router';
 
+import { createStoreRegistryPlugin } from '@hungpvq/shared-store';
 import { createApp } from 'vue';
 import App from './app/App.vue';
 
 const app = createApp(App);
 
 app.use(router);
+app.use(createStoreRegistryPlugin());
 
 app.mount('#root');
diff --git a/apps/demo-map/src/views/AllMapCompareView.vue b/apps/demo-map/src/views/AllMapCompareView.vue
index d157a85..bc858b0 100644
--- a/apps/demo-map/src/views/AllMapCompareView.vue
+++ b/apps/demo-map/src/views/AllMapCompareView.vue
@@ -4,11 +4,11 @@ import {
   CompareBaseMapControl,
 } from '@hungpvq/vue-map-basemap';
 import {
+  CompareSettingCard,
   CompareSettingControl,
   CrsControl,
   FullScreenControl,
   GeoLocateControl,
-  CompareSettingCard,
   GotoControl,
   HomeControl,
   MapCompare,
@@ -17,7 +17,6 @@ import {
   ZoomControl,
 } from '@hungpvq/vue-map-core';
 import {
-  addDataset,
   ComponentManagementControl,
   createDataManagementMapboxComponent,
   createDataset,
@@ -42,6 +41,7 @@ import {
   LayerHighlight,
   LayerInfoControl,
   LayerSimpleMapboxBuild,
+  useMapDataset,
 } from '@hungpvq/vue-map-dataset';
 import { MeasurementControl } from '@hungpvq/vue-map-measurement';
 import { mdiDownload, mdiPencil } from '@mdi/js';
@@ -49,13 +49,13 @@ import { ref } from 'vue';
 const mapRef = ref();
 
 function onMapLoaded(props: { id: string }) {
+  const { addDataset } = useMapDataset(props.id);
   const dataset_raster = createDataset(
     'Group test',
     null,
-    true
+    true,
   ) as DatasetComposite;
   const source_raster = createDatasetPartRasterSourceComponent('source', {
-    name: 'raster 1',
     type: 'raster',
     tiles: [
       'https://naturalearthtiles.roblabs.com/tiles/natural_earth_cross_blended_hypso_shaded_relief.raster/{z}/{x}/{y}.png',
@@ -76,7 +76,7 @@ function onMapLoaded(props: { id: string }) {
   const groupLayer_raster = createDataset(
     'Group layer 1',
     null,
-    true
+    true,
   ) as DatasetComposite;
   dataset_raster.add(source_raster);
   groupLayer_raster.add(list_raster);
@@ -92,7 +92,7 @@ function onMapLoaded(props: { id: string }) {
   const groupLayer1 = createDataset(
     'Group layer 1',
     null,
-    true
+    true,
   ) as DatasetComposite;
   const list1: IListViewUI = createDatasetPartListViewUiComponent('test area');
   list1.color = '#0000FF';
@@ -125,7 +125,7 @@ function onMapLoaded(props: { id: string }) {
   const groupLayer2 = createDataset(
     'Group layer 2',
     null,
-    true
+    true,
   ) as DatasetComposite;
   const list2 = createDatasetPartListViewUiComponent('test point');
   list2.color = '#ff0000';
@@ -155,7 +155,7 @@ function onMapLoaded(props: { id: string }) {
         105.88454157202995, 20.878811643339404, 106.16710803591963,
         21.0854254401454,
       ],
-    }
+    },
   );
   const metadata = createDatasetPartMetadataComponent('metadata', {
     bbox: [
@@ -196,7 +196,7 @@ function onMapLoaded(props: { id: string }) {
         { text: 'Name', value: 'name' },
         { text: 'Name', value: 'name' },
       ],
-    }
+    },
   );
   dataManagement.setItems([
     {
@@ -238,8 +238,8 @@ function onMapLoaded(props: { id: string }) {
   dataset.add(groupLayer2);
   dataset.add(identify);
   dataset.add(metadata);
-  addDataset(props.id, dataset_raster);
-  addDataset(props.id, dataset);
+  addDataset(dataset_raster);
+  addDataset(dataset);
 }
 </script>
 <template>
diff --git a/apps/demo-map/src/views/AllMapView.vue b/apps/demo-map/src/views/AllMapView.vue
index 552c1ee..fd308df 100644
--- a/apps/demo-map/src/views/AllMapView.vue
+++ b/apps/demo-map/src/views/AllMapView.vue
@@ -21,7 +21,6 @@ import {
   ZoomControl,
 } from '@hungpvq/vue-map-core';
 import {
-  addDataset,
   ComponentManagementControl,
   createDataManagementMapboxComponent,
   createDataset,
@@ -51,12 +50,13 @@ import {
   LayerControl,
   LayerHighlight,
   LayerSimpleMapboxBuild,
+  useMapDataset,
 } from '@hungpvq/vue-map-dataset';
 import {
-  callDraw,
   DrawControl,
   DrawingType,
   InspectControl,
+  useMapDraw,
 } from '@hungpvq/vue-map-draw';
 import { LegendControl } from '@hungpvq/vue-map-legend';
 import { MeasurementControl } from '@hungpvq/vue-map-measurement';
@@ -69,6 +69,7 @@ const mapRef = ref();
 const { convertList } = useConvertToGeoJSON();
 const { convert } = useGeoConvertToFile();
 function onMapLoaded(map: MapSimple) {
+  const { addDataset } = useMapDataset(map.id);
   const dataset_raster = createDataset(
     'Group test',
     null,
@@ -262,9 +263,9 @@ function onMapLoaded(map: MapSimple) {
   dataset.add(groupLayer2);
   dataset.add(identify);
   dataset.add(metadata);
-  addDataset(map.id, dataset);
-  addDataset(map.id, createDatasetPoint());
-  // addDataset(map.id, dataset_raster);
+  addDataset(dataset);
+  addDataset(createDatasetPoint());
+  // addDataset( dataset_raster);
 }
 function createDatasetPoint() {
   const dataset = createDataset('Group test', null, true) as DatasetComposite;
@@ -348,12 +349,13 @@ function createMenuDrawLayer() {
     name: 'Edit feature',
     icon: mdiPencil,
     click: (layer, mapId) => {
+      const { callDraw } = useMapDraw(mapId);
       const maybeDataManagement = findSiblingOrNearestLeaf(
         layer,
         (dataset) => dataset.type === 'dataManagement',
       );
       if (isDataManagementView(maybeDataManagement)) {
-        callDraw(mapId, {
+        callDraw({
           cleanAfterDone: true,
           draw_support: [
             DrawingType.POINT,
diff --git a/libs/draggable/package.json b/libs/draggable/package.json
index d3b91e9..27711e6 100644
--- a/libs/draggable/package.json
+++ b/libs/draggable/package.json
@@ -28,6 +28,7 @@
   "peerDependencies": {
     "vue-material-design-icons": "^5.3.0",
     "@hungpvq/shared": ">=0.0.1",
-    "vue-draggable-resizable": "^3.0.0"
+    "vue-draggable-resizable": "^3.0.0",
+    "@hungpvq/shared-store": ">=0.0.1"
   }
 }
diff --git a/libs/draggable/src/components/draggable/draggable-container.vue b/libs/draggable/src/components/draggable/draggable-container.vue
index f5cae3e..928530d 100644
--- a/libs/draggable/src/components/draggable/draggable-container.vue
+++ b/libs/draggable/src/components/draggable/draggable-container.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getUUIDv4 } from '@hungpvq/shared';
 import { nextTick, onMounted, onUnmounted, provide, ref } from 'vue';
-import { useDragStore } from '../../store';
+import { useDragContainer } from '../../store';
 const emit = defineEmits({
   init: (id: string) => {
     return true;
@@ -14,9 +14,9 @@ const box = ref<HTMLDivElement>();
 const { containerId } = defineProps<{ containerId?: string }>();
 const p_container_id = ref(containerId || `draggable-container-${getUUIDv4()}`);
 const init_done = ref(false);
-const store = useDragStore(p_container_id.value);
+const store = useDragContainer(p_container_id.value);
 onMounted(() => {
-  store.actions.initContainer();
+  store.initContainer();
   window.addEventListener('resize', onResize);
   nextTick(() => {
     onResize();
@@ -25,14 +25,14 @@ onMounted(() => {
   });
 });
 onUnmounted(() => {
-  store.actions.removeContainer();
+  store.removeContainer();
   window.removeEventListener('resize', onResize);
   emit('destroy', p_container_id.value);
 });
 provide('containerId', p_container_id);
 function onResize() {
   const clientWidth = box.value?.clientWidth || 0;
-  store.actions.setParentProps({
+  store.setParentProps({
     width: clientWidth,
     height: box.value?.clientHeight || 0,
     isMobile: clientWidth < 600,
diff --git a/libs/draggable/src/components/draggable/item-sidebar.vue b/libs/draggable/src/components/draggable/item-sidebar.vue
index 3c9b24a..9f8246e 100644
--- a/libs/draggable/src/components/draggable/item-sidebar.vue
+++ b/libs/draggable/src/components/draggable/item-sidebar.vue
@@ -18,7 +18,7 @@ import {
   withShowEmit,
   withShowProps,
 } from '../../hook';
-import { useDragStore } from '../../store';
+import { useDragComponent } from '../../store';
 import MapButton from '../parts/MapButton.vue';
 import MapSidebarToggle from '../parts/MapSidebarToggle.vue';
 const {
@@ -43,7 +43,7 @@ const containerId = inject<Ref<string>>(
   'containerId',
   ref(props.containerId || ''),
 );
-const store = useDragStore(containerId.value);
+const store = useDragComponent();
 if (!containerId.value) {
   throw 'Not set container id';
 }
@@ -63,7 +63,7 @@ const { componentCard, componentCardHeader } = useComponent({
 });
 const componentMapSidebarToggle = computed(
   () =>
-    store.getters.getComponentCardSidebarToggle() ||
+    store.getComponentCardSidebarToggle() ||
     props.componentMapSidebarToggle ||
     MapSidebarToggle,
 );
diff --git a/libs/draggable/src/hoc/mobile-handle.ts b/libs/draggable/src/hoc/mobile-handle.ts
index 661e85c..649785d 100644
--- a/libs/draggable/src/hoc/mobile-handle.ts
+++ b/libs/draggable/src/hoc/mobile-handle.ts
@@ -1,5 +1,5 @@
 import { Component, Ref, computed, defineComponent, h, inject, ref } from 'vue';
-import { useDragStore } from '../store';
+import { useDragIsMobile } from '../store';
 
 export function WithMobileHandle<T = Component>(
   Component: T,
@@ -15,8 +15,8 @@ export function WithMobileHandle<T = Component>(
         'containerId',
         ref(props.containerId || ''),
       );
-      const store = useDragStore(p_containerId.value);
-      const isMobile = computed(() => store.getters.getIsMobile());
+      const store = useDragIsMobile(p_containerId.value);
+      const isMobile = computed(() => store.getIsMobile());
       return { p_containerId, isMobile };
     },
     render() {
diff --git a/libs/draggable/src/hook/useComponent.ts b/libs/draggable/src/hook/useComponent.ts
index 9d1dd5b..9d07d55 100644
--- a/libs/draggable/src/hook/useComponent.ts
+++ b/libs/draggable/src/hook/useComponent.ts
@@ -2,21 +2,19 @@ import { computed } from 'vue';
 
 import MapCard from '../components/parts/MapCard.vue';
 import MapHeader from '../components/parts/MapHeader.vue';
-import { useDragStore } from '../store';
+import { useDragComponent } from '../store';
 export function useComponent(props: {
   componentCard?: any;
   componentCardHeader?: any;
   containerId: string;
 }) {
-  const store = useDragStore(props.containerId);
+  const store = useDragComponent();
   const componentCard = computed(
-    () => store.getters.getComponentCard() || props.componentCard || MapCard,
+    () => store.getComponentCard() || props.componentCard || MapCard,
   );
   const componentCardHeader = computed(
     () =>
-      store.getters.getComponentCardHeader() ||
-      props.componentCardHeader ||
-      MapHeader,
+      store.getComponentCardHeader() || props.componentCardHeader || MapHeader,
   );
   return { componentCard, componentCardHeader };
 }
diff --git a/libs/draggable/src/hook/useInit.ts b/libs/draggable/src/hook/useInit.ts
index 5e20463..c1fad58 100644
--- a/libs/draggable/src/hook/useInit.ts
+++ b/libs/draggable/src/hook/useInit.ts
@@ -1,6 +1,6 @@
 import { getUUIDv4 } from '@hungpvq/shared';
 import { Ref, computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useDragStore } from '../store';
+import { useDragContainer, useDragItem } from '../store';
 import { checkIsFirst, checkIsLast } from '../utils/array';
 
 export function useInit(containerId: string, show: Ref<boolean>, id?: string) {
@@ -9,28 +9,28 @@ export function useInit(containerId: string, show: Ref<boolean>, id?: string) {
   function setZIndex(value: number) {
     zIndex.value = value;
   }
-  const store = useDragStore(containerId);
+  const store = useDragItem(containerId);
   onMounted(() => {
-    store.actions.registerItem(itemId.value);
-    store.actions.registerAction(itemId.value, {
+    store.registerItem(itemId.value);
+    store.registerAction(itemId.value, {
       setZIndex,
     });
     if (show.value) {
-      store.actions.registerItemShow(itemId.value, show.value);
+      store.registerItemShow(itemId.value, show.value);
     }
   });
   onUnmounted(() => {
-    store.actions.unRegisterItem(itemId.value);
+    store.unRegisterItem(itemId.value);
   });
   watch(show, (value) => {
-    store.actions.registerItemShow(itemId.value, value);
+    store.registerItemShow(itemId.value, value);
   });
   return { itemId, zIndex };
 }
 export function useContainerOrder(containerId: string, itemId: string) {
-  const store = useDragStore(containerId);
-  const items = computed(() => store.getters.getItems());
-  const itemShows = computed(() => store.getters.getItemsShow());
+  const store = useDragItem(containerId);
+  const items = computed(() => store.getItems());
+  const itemShows = computed(() => store.getItemsShow());
   const isLast = computed(() => {
     return checkIsLast(itemId, itemShows.value);
   });
@@ -41,17 +41,17 @@ export function useContainerOrder(containerId: string, itemId: string) {
     return itemShows.value.length > 1;
   });
   function onToBack() {
-    store.actions.setToBack(itemId);
+    store.setToBack(itemId);
   }
   function onToFront() {
-    store.actions.setToFront(itemId);
+    store.setToFront(itemId);
   }
   return { items, itemShows, isLast, isFirst, isHasItems, onToBack, onToFront };
 }
 
 export function useContainerSize(containerId: string) {
-  const store = useDragStore(containerId);
-  const containerWidth = computed(() => store.getters.getWidth());
-  const containerHeight = computed(() => store.getters.getHeight());
+  const store = useDragContainer(containerId);
+  const containerWidth = computed(() => store.getWidth());
+  const containerHeight = computed(() => store.getHeight());
   return { containerWidth, containerHeight };
 }
diff --git a/libs/draggable/src/store/index.ts b/libs/draggable/src/store/index.ts
index f253f3a..ad4b6ef 100644
--- a/libs/draggable/src/store/index.ts
+++ b/libs/draggable/src/store/index.ts
@@ -1,136 +1,34 @@
-import { createStore } from '@hungpvq/shared';
+import { defineStore } from '@hungpvq/shared-store';
 import { reactive } from 'vue';
 import { ContainerStore, ContainerStoreAction } from '../types';
 
-export const useDragStore = (containerId: string) => {
-  const store = createStore('drag', {
-    state: {
-      container: reactive<Record<string, ContainerStore>>({}),
-      componentCard: undefined,
-      componentCardHeader: undefined,
-      componentCardSidebarToggle: undefined,
-    },
-    getters: {
-      getComponentCard() {
-        return store.state.componentCard;
-      },
-      getComponentCardHeader() {
-        return store.state.componentCardHeader;
-      },
-      getComponentCardSidebarToggle() {
-        return store.state.componentCardSidebarToggle;
-      },
-      getItems() {
-        const container = store.actions.getContainer();
-        return container.items;
-      },
-      getItemsShow() {
-        const container = store.actions.getContainer();
-        return container.show;
-      },
-      getWidth() {
-        const container = store.actions.getContainer();
-        return container.width;
-      },
-      getHeight() {
-        const container = store.actions.getContainer();
-        return container.height;
-      },
-      getIsMobile() {
-        const container = store.actions.getContainer();
-        return container.isMobile;
-      },
-    },
-    actions: {
-      initContainer() {
-        store.state.container[containerId] = {
-          items: [],
-          show: [],
-          actions: {},
-          height: 0,
-          width: 0,
-          isMobile: false,
-        };
-      },
-      removeContainer() {
-        delete store.state.container[containerId];
-      },
-      getContainer() {
-        const id = containerId;
-        if (!id) {
-          throw 'Not set container id';
-        }
-        const container = store.state.container[id];
-        if (!container) {
-          throw 'Not found container for id ' + id;
-        }
-        return container;
-      },
-      setComponentCard(componentCard: any) {
-        store.state.componentCard = componentCard;
-      },
-      setComponentCardHeader(componentCardHeader: any) {
-        store.state.componentCardHeader = componentCardHeader;
-      },
-      setComponentCardSidebarToggle(componentCardSidebarToggle: any) {
-        store.state.componentCardSidebarToggle = componentCardSidebarToggle;
-      },
-      setParentProps(props: {
-        width: number;
-        height: number;
-        isMobile: boolean;
-      }) {
-        const container = store.actions.getContainer();
-        container.width = props.width;
-        container.height = props.height;
-        container.isMobile = props.isMobile;
-      },
-      registerItem(id: string) {
-        const container = store.actions.getContainer();
-        container.items.push(id);
-      },
-      registerAction(id: string, action: ContainerStoreAction) {
-        const container = store.actions.getContainer();
-        container.actions[id] = action;
-      },
-      unRegisterItem(id: string) {
-        const container = store.state.container[containerId];
-        if (!container) {
-          return;
-        }
-        container.items = container.items.filter((x) => x !== id);
-        container.show = container.show.filter((x) => x !== id);
-        delete container.actions[id];
-      },
-      registerItemShow(id: string, show: boolean) {
-        setShowId(id, show);
-        updateAllIndex();
-      },
-      setToBack(sidebar_id: string) {
-        if (!containerId || !sidebar_id) return;
-        const p_store = getStoreContainer(containerId);
-        const index = p_store.show.findIndex((x) => x == sidebar_id);
-        if (index > 0) {
-          p_store.show.splice(index, 1);
-          p_store.show.unshift(sidebar_id);
-          updateAllIndex();
-        }
-      },
-      setToFront(sidebar_id: string) {
-        if (!containerId || !sidebar_id) return;
-        const p_store = getStoreContainer(containerId);
-        const index = p_store.show.findIndex((x) => x == sidebar_id);
-        if (index < p_store.show.length - 1) {
-          p_store.show.splice(index, 1);
-          p_store.show.push(sidebar_id);
-          updateAllIndex();
-        }
-      },
-    },
-  });
+export const useDragStore = defineStore('drag', () => {
+  const container = reactive<Record<string, ContainerStore>>({});
+  const componentCard = undefined;
+  const componentCardHeader = undefined;
+  const componentCardSidebarToggle = undefined;
+  return {
+    container,
+    componentCard,
+    componentCardHeader,
+    componentCardSidebarToggle,
+  };
+});
+
+export const useDragIsMobile = (containerId: string) => {
+  const store = useDragStore();
+  return {
+    getIsMobile() {
+      const container = store.container[containerId];
+      return container.isMobile;
+    },
+  };
+};
 
+export const useDragItem = (containerId: string) => {
+  const store = useDragStore();
+  const container = store.container[containerId];
   function updateAllIndex() {
-    const container = store.actions.getContainer();
     container.show.forEach((itemId, idx) => {
       const action = container.actions[itemId];
       if (action) action.setZIndex(idx + 2);
@@ -138,14 +36,14 @@ export const useDragStore = (containerId: string) => {
   }
 
   function getStoreContainer(id: string) {
-    const container = store.state.container[id];
+    const container = store.container[id];
     if (!container) {
       throw 'Not found container for id ' + id;
     }
     return container;
   }
   function setShowId(itemId: string, show: boolean) {
-    const p_store = store.actions.getContainer();
+    const p_store = getStoreContainer(containerId);
     const item_ids_show = p_store.show;
     if (show && !item_ids_show.includes(itemId)) {
       item_ids_show.push(itemId);
@@ -157,5 +55,101 @@ export const useDragStore = (containerId: string) => {
     }
     p_store.show = item_ids_show;
   }
-  return store;
+  return {
+    registerItem(id: string) {
+      getStoreContainer(containerId).items.push(id);
+    },
+    registerAction(id: string, action: ContainerStoreAction) {
+      container.actions[id] = action;
+    },
+    unRegisterItem(id: string) {
+      if (!container) {
+        return;
+      }
+      container.items = container.items.filter((x) => x !== id);
+      container.show = container.show.filter((x) => x !== id);
+      delete container.actions[id];
+    },
+    registerItemShow(id: string, show: boolean) {
+      setShowId(id, show);
+      updateAllIndex();
+    },
+    setToBack(sidebar_id: string) {
+      if (!containerId || !sidebar_id) return;
+      const p_store = getStoreContainer(containerId);
+      const index = p_store.show.findIndex((x) => x == sidebar_id);
+      if (index > 0) {
+        p_store.show.splice(index, 1);
+        p_store.show.unshift(sidebar_id);
+        updateAllIndex();
+      }
+    },
+    setToFront(sidebar_id: string) {
+      if (!containerId || !sidebar_id) return;
+      const p_store = getStoreContainer(containerId);
+      const index = p_store.show.findIndex((x) => x == sidebar_id);
+      if (index < p_store.show.length - 1) {
+        p_store.show.splice(index, 1);
+        p_store.show.push(sidebar_id);
+        updateAllIndex();
+      }
+    },
+    getItems() {
+      return container.items;
+    },
+    getItemsShow() {
+      return container.show;
+    },
+  };
+};
+export const useDragComponent = () => {
+  const store = useDragStore();
+  return {
+    getComponentCard() {
+      return store.componentCard;
+    },
+    getComponentCardHeader() {
+      return store.componentCardHeader;
+    },
+    getComponentCardSidebarToggle() {
+      return store.componentCardSidebarToggle;
+    },
+  };
+};
+export const useDragContainer = (containerId: string) => {
+  const store = useDragStore();
+  const initContainer = () => {
+    store.container[containerId] = {
+      items: [],
+      show: [],
+      actions: {},
+      height: 0,
+      width: 0,
+      isMobile: false,
+    };
+  };
+  return {
+    getWidth() {
+      const container = store.container[containerId];
+      return container.width;
+    },
+    getHeight() {
+      const container = store.container[containerId];
+      return container.height;
+    },
+    initContainer,
+    removeContainer() {
+      delete store.container[containerId];
+    },
+    setParentProps(props: {
+      width: number;
+      height: number;
+      isMobile: boolean;
+    }) {
+      const container = store.container[containerId];
+      container.width = props.width;
+      container.height = props.height;
+      container.isMobile = props.isMobile;
+    },
+  };
 };
diff --git a/libs/draggable/vite.config.ts b/libs/draggable/vite.config.ts
index 4c56f85..d214c3e 100644
--- a/libs/draggable/vite.config.ts
+++ b/libs/draggable/vite.config.ts
@@ -42,7 +42,12 @@ export default defineConfig({
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
-      external: ['vue', '@hungpvq/shared', '@hungpvq/shared-core'],
+      external: [
+        'vue',
+        '@hungpvq/shared',
+        '@hungpvq/shared-core',
+        '@hungpvq/shared-store',
+      ],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps
diff --git a/libs/map/basemap/package.json b/libs/map/basemap/package.json
index 1a4b29d..142403d 100644
--- a/libs/map/basemap/package.json
+++ b/libs/map/basemap/package.json
@@ -31,6 +31,7 @@
     "@hungpvq/vue-draggable": ">=0.0.1",
     "@hungpvq/shared-log": ">=0.0.1",
     "@jamescoyle/vue-icon": "^0.1.2",
-    "@mdi/js": "^7.4.47"
+    "@mdi/js": "^7.4.47",
+    "@hungpvq/shared-store": ">=0.0.1"
   }
 }
diff --git a/libs/map/basemap/src/adapter/base.ts b/libs/map/basemap/src/adapter/base.ts
index 88630b4..19e856d 100644
--- a/libs/map/basemap/src/adapter/base.ts
+++ b/libs/map/basemap/src/adapter/base.ts
@@ -4,21 +4,16 @@ import { BaseMapLayer } from '../hooks/model';
 import { BaseMapItem, IBaseMapLayer } from '../types';
 
 export abstract class BaseMapAdapter {
-  protected mapId: string;
   protected current?: BaseMapItem;
   protected layer?: IBaseMapLayer;
 
-  constructor(mapId: string) {
-    this.mapId = mapId;
-  }
-
   public getCurrent(): BaseMapItem | undefined {
     return this.current;
   }
 
-  public async setCurrent(baseMap: BaseMapItem) {
+  public async setCurrent(mapId: string, baseMap: BaseMapItem) {
     this.current = baseMap;
-    await this.onApplyBaseMap(this.mapId, baseMap);
+    await this.onApplyBaseMap(mapId, baseMap);
   }
 
   public getIndexDefault(
diff --git a/libs/map/basemap/src/hooks/useBaseMap.ts b/libs/map/basemap/src/hooks/useBaseMap.ts
index cccb2d7..af4493f 100644
--- a/libs/map/basemap/src/hooks/useBaseMap.ts
+++ b/libs/map/basemap/src/hooks/useBaseMap.ts
@@ -1,20 +1,16 @@
 import { logHelper } from '@hungpvq/shared-map';
-import { getStore, MAP_STORE_KEY, MittType } from '@hungpvq/vue-map-core';
+import { useMapMittStore } from '@hungpvq/vue-map-core';
 import { ref } from 'vue';
 import { logger } from '../logger';
+import { useMapBaseMapStore } from '../store';
 import {
   BaseMapItem,
-  BaseMapStore,
   MittTypeBaseMap,
   MittTypeBaseMapEventKey,
 } from '../types';
-const KEY = 'basemap';
 export function useBaseMap(mapId: string) {
-  const state = getStore<BaseMapStore>(mapId, KEY);
-  const emitter = getStore<MittType<MittTypeBaseMap>>(
-    mapId,
-    MAP_STORE_KEY.MITT,
-  );
+  const state = useMapBaseMapStore(mapId);
+  const emitter = useMapMittStore<MittTypeBaseMap>(mapId);
   function setBaseMaps(baseMaps: BaseMapItem[]) {
     logHelper(logger, mapId, 'hook', 'useBaseMap').debug(
       'setBaseMaps',
@@ -41,7 +37,7 @@ export function useBaseMap(mapId: string) {
     state.current = baseMap;
     emitter.emit(MittTypeBaseMapEventKey.setCurrent, state.current);
     state.loading = true;
-    await state.adapter.setCurrent(baseMap);
+    await state.adapter.setCurrent(mapId, baseMap);
     state.loading = false;
   }
   const baseMaps = ref<BaseMapItem[]>(state.baseMaps);
diff --git a/libs/map/basemap/src/index.ts b/libs/map/basemap/src/index.ts
index c0630d1..ebd4c61 100644
--- a/libs/map/basemap/src/index.ts
+++ b/libs/map/basemap/src/index.ts
@@ -1,4 +1,3 @@
 export * from './adapter/base';
 export * from './modules';
-export { setBaseMapAdapter } from './store';
 export * from './types';
diff --git a/libs/map/basemap/src/modules/BaseMapCard.vue b/libs/map/basemap/src/modules/BaseMapCard.vue
index b1a4cee..c92180f 100644
--- a/libs/map/basemap/src/modules/BaseMapCard.vue
+++ b/libs/map/basemap/src/modules/BaseMapCard.vue
@@ -22,11 +22,11 @@
   </div>
 </template>
 <script setup lang="ts">
+import { logHelper } from '@hungpvq/shared-map';
+import { InputSelect, MapImage, useLang, useMap } from '@hungpvq/vue-map-core';
 import { onBeforeUnmount } from 'vue';
-import { useLang, useMap, InputSelect, MapImage } from '@hungpvq/vue-map-core';
 import { useBaseMap } from '../hooks';
 import { logger } from '../logger';
-import { logHelper } from '@hungpvq/shared-map';
 const props = defineProps({
   mapId: { type: String, required: true },
   title: {
@@ -43,7 +43,10 @@ const {
   remove,
 } = useBaseMap(mapId.value);
 const onChangeBaseMap = (base_map: any) => {
-  logHelper(logger, mapId, 'control', 'BaseMapCard').debug('onClick', base_map);
+  logHelper(logger, mapId.value, 'control', 'BaseMapCard').debug(
+    'onClick',
+    base_map,
+  );
   setCurrent(base_map);
 };
 onBeforeUnmount(() => {
diff --git a/libs/map/basemap/src/modules/CompareBaseMapControl.vue b/libs/map/basemap/src/modules/CompareBaseMapControl.vue
index 3d45bda..7e93273 100644
--- a/libs/map/basemap/src/modules/CompareBaseMapControl.vue
+++ b/libs/map/basemap/src/modules/CompareBaseMapControl.vue
@@ -112,7 +112,6 @@ import {
   MapIcon,
   MapImage,
   ModuleContainer,
-  store as storeMap,
   useLang,
   useMap,
   withMapProps,
diff --git a/libs/map/basemap/src/store/index.ts b/libs/map/basemap/src/store/index.ts
index dcbe4a5..22009a1 100644
--- a/libs/map/basemap/src/store/index.ts
+++ b/libs/map/basemap/src/store/index.ts
@@ -1,29 +1,31 @@
 import { logHelper } from '@hungpvq/shared-map';
-import { addStore, addToQueue, getStore } from '@hungpvq/vue-map-core';
+import { defineStore } from '@hungpvq/shared-store';
 import { BaseMapAdapter, DefaultBaseMapAdapter } from '../adapter/base';
 import { logger } from '../logger';
 import { BaseMapStore } from '../types';
 
 const KEY = 'basemap';
-export function initMapBaseMap(mapId: string) {
-  logHelper(logger, mapId, 'store').debug('init');
-  addStore<BaseMapStore>(mapId, KEY, {
-    baseMaps: [],
-    defaultBaseMap: '',
-    current: undefined,
-    loading: false,
-    adapter: new DefaultBaseMapAdapter(mapId),
-  });
-}
-addToQueue(KEY, initMapBaseMap);
 
-function getBaseMapStore(map_id: string): BaseMapStore {
-  return getStore<BaseMapStore>(map_id, KEY);
-}
-export function setBaseMapAdapter(
-  mapId: string,
-  adapter: (mapId: string) => BaseMapAdapter,
-) {
-  logHelper(logger, mapId, 'store').debug('setBaseMapAdapter', adapter);
-  getBaseMapStore(mapId).adapter = adapter(mapId);
-}
+export const useMapBaseMapStore = (mapId: string) =>
+  defineStore<BaseMapStore>(['map:core', mapId, KEY], () => {
+    return {
+      baseMaps: [],
+      defaultBaseMap: '',
+      current: undefined,
+      loading: false,
+      adapter: new DefaultBaseMapAdapter(),
+    };
+  })();
+
+export const useBaseMapAdapter = (mapId: string) => {
+  const store = useMapBaseMapStore(mapId);
+  return {
+    setBaseMapAdapter(
+      mapId: string,
+      adapter: (mapId: string) => BaseMapAdapter,
+    ) {
+      logHelper(logger, mapId, 'store').debug('setBaseMapAdapter', adapter);
+      store.adapter = adapter(mapId);
+    },
+  };
+};
diff --git a/libs/map/basemap/vite.config.ts b/libs/map/basemap/vite.config.ts
index adaf9b8..918de01 100644
--- a/libs/map/basemap/vite.config.ts
+++ b/libs/map/basemap/vite.config.ts
@@ -48,6 +48,7 @@ export default defineConfig({
         '@hungpvq/shared',
         '@hungpvq/vue-draggable',
         '@hungpvq/shared-log',
+        '@hungpvq/shared-store',
       ],
       output: {
         // Provide global variables to use in the UMD build
diff --git a/libs/map/core/package.json b/libs/map/core/package.json
index fefd3e8..684949d 100644
--- a/libs/map/core/package.json
+++ b/libs/map/core/package.json
@@ -38,6 +38,7 @@
     "lodash": "^4.17.21",
     "maplibre-gl": "^5.4.0",
     "@mapbox/mapbox-gl-sync-move": "^0.3.1",
-    "mitt": "^3.0.1"
+    "mitt": "^3.0.1",
+    "@hungpvq/shared-store": ">=0.0.1"
   }
 }
diff --git a/libs/map/core/src/extra/compare/hooks/index.ts b/libs/map/core/src/extra/compare/hooks/index.ts
index 3459d77..027165d 100644
--- a/libs/map/core/src/extra/compare/hooks/index.ts
+++ b/libs/map/core/src/extra/compare/hooks/index.ts
@@ -1,7 +1,5 @@
 import { onMounted, onUnmounted, ref } from 'vue';
-import { getStore } from '../../../store';
-import { MittType } from '../../../types';
-import { MAP_STORE_KEY } from '../../../types/key';
+import { useMapMittStore } from '../../mitt';
 import { getMapCompareSetting, updateMapCompareSetting } from '../store';
 import {
   MapCompareSetting,
@@ -21,10 +19,7 @@ export const useMapCompareSetting = (
     setting.value = p_setting;
     onChange && onChange(p_setting);
   }
-  const emitter = getStore<MittType<MittTypeMapCompare>>(
-    mapId,
-    MAP_STORE_KEY.MITT,
-  );
+  const emitter = useMapMittStore<MittTypeMapCompare>(mapId);
   onMounted(() => {
     emitter.on(MittTypeMapCompareEventKey.set, update);
   });
diff --git a/libs/map/core/src/extra/compare/modules/MapCompare.vue b/libs/map/core/src/extra/compare/modules/MapCompare.vue
index 055d17b..4a4879a 100644
--- a/libs/map/core/src/extra/compare/modules/MapCompare.vue
+++ b/libs/map/core/src/extra/compare/modules/MapCompare.vue
@@ -8,7 +8,6 @@ import { debounce } from 'lodash';
 import {
   computed,
   nextTick,
-  onBeforeMount,
   onBeforeUnmount,
   onMounted,
   onUnmounted,
@@ -16,17 +15,9 @@ import {
   ref,
 } from 'vue';
 import Map from '../../../modules/Map.vue';
-import {
-  getMap,
-  getStore,
-  initMaps,
-  removeMap,
-  store as storeMap,
-} from '../../../store/store';
-import { MittType } from '../../../types';
-import { MAP_STORE_KEY } from '../../../types/key';
+import { getMap, useMapContainer } from '../../../store/store';
 import ActionControl from '../../event/modules/ActionControl.vue';
-import { initStoreMitt } from '../../mitt';
+import { useMapMittStore } from '../../mitt';
 import { initStoreMapCompare } from '../store';
 import {
   MapCompareSetting,
@@ -79,6 +70,7 @@ const countMap = ref(2);
 const isSupport = ref(isWebglSupported());
 const loaded = ref(false);
 const id = ref(getUUIDv4());
+const store = useMapContainer(id.value);
 onMounted(() => {
   nextTick(() => {
     onResize();
@@ -142,9 +134,6 @@ const setting = ref<{
 const isUseSwiper = computed(() => {
   return setting.value.compare && setting.value.split;
 });
-onBeforeMount(() => {
-  initStoreMitt(id.value);
-});
 function initCompare() {
   if (!maps) return;
   if (
@@ -164,13 +153,10 @@ function initCompare() {
       map.resize();
     }
   });
-  initMaps(storeMap, id.value, maps);
+  store.initMaps(maps);
   initStoreMapCompare(id.value);
   setupCompare();
-  const emitter = getStore<MittType<MittTypeMapCompare>>(
-    id.value,
-    MAP_STORE_KEY.MITT,
-  );
+  const emitter = useMapMittStore<MittTypeMapCompare>(id.value);
   emitter.on(MittTypeMapCompareEventKey.set, updateSetting);
 }
 function updateSetting(p_setting: MapCompareSetting) {
@@ -184,7 +170,7 @@ function destroy() {
   if (clearSync) {
     clearSync();
   }
-  removeMap(storeMap, id.value);
+  store.removeMap();
   nextTick(() => {
     maps = [];
   });
diff --git a/libs/map/core/src/extra/compare/store.ts b/libs/map/core/src/extra/compare/store.ts
index 7e243d8..297b48d 100644
--- a/libs/map/core/src/extra/compare/store.ts
+++ b/libs/map/core/src/extra/compare/store.ts
@@ -1,7 +1,7 @@
 import { logHelper } from '@hungpvq/shared-map';
 import { addStore, getStore } from '../../store';
-import { MittType } from '../../types';
 import { MAP_STORE_KEY } from '../../types/key';
+import { useMapMittStore } from '../mitt';
 import { logger } from './logger';
 import {
   MapCompareSetting,
@@ -44,10 +44,7 @@ export function updateMapCompareSetting(
   logHelper(logger, mapId, 'store').debug('updateMapCompareSetting', setting);
   const store = getMapCompare(mapId);
   if (store) store.setting = { ...store.setting, ...setting };
-  const emitter = getStore<MittType<MittTypeMapCompare>>(
-    mapId,
-    MAP_STORE_KEY.MITT,
-  );
+  const emitter = useMapMittStore<MittTypeMapCompare>(mapId);
   emitter.emit(MittTypeMapCompareEventKey.set, {
     ...store?.setting,
     ...setting,
diff --git a/libs/map/core/src/extra/crs/hooks/useCoordinate.ts b/libs/map/core/src/extra/crs/hooks/useCoordinate.ts
index 289dc05..81c9fb0 100644
--- a/libs/map/core/src/extra/crs/hooks/useCoordinate.ts
+++ b/libs/map/core/src/extra/crs/hooks/useCoordinate.ts
@@ -1,13 +1,14 @@
 import proj4 from 'proj4';
-import { getCrsItem } from '../store';
+import { useMapCrsStore } from '../store';
 import { CrsItem } from '../types';
 export function useCoordinate(mapId: string) {
+  const store = useMapCrsStore(mapId);
   function format(
     { longitude, latitude }: { longitude: number; latitude: number },
     isDMS = false,
   ) {
     const crs: CrsItem =
-      getCrsItem(mapId) ||
+      store.item ||
       ({
         name: 'WGS 84',
         epsg: '4326',
diff --git a/libs/map/core/src/extra/crs/hooks/useMapCrsItems.ts b/libs/map/core/src/extra/crs/hooks/useMapCrsItems.ts
index 1340ac0..7a73f10 100644
--- a/libs/map/core/src/extra/crs/hooks/useMapCrsItems.ts
+++ b/libs/map/core/src/extra/crs/hooks/useMapCrsItems.ts
@@ -1,8 +1,8 @@
+import { logHelper } from '@hungpvq/shared-map';
 import { computed, onMounted, onUnmounted, shallowRef } from 'vue';
-import { getStore } from '../../../store';
-import { MittType } from '../../../types';
-import { MAP_STORE_KEY } from '../../../types/key';
-import { getCrsItem, getCrsItems, setCrs, setCrsItems } from '../store';
+import { useMapMittStore } from '../../mitt';
+import { logger } from '../logger';
+import { useMapCrsStore } from '../store';
 import { CrsItem, MittTypeMapCrs, MittTypeMapCrsEventKey } from '../types';
 
 export const useMapCrsItems = (
@@ -13,12 +13,15 @@ export const useMapCrsItems = (
     onChange?: (p_item: CrsItem[]) => void;
   } = {},
 ) => {
-  const items = shallowRef(getCrsItems(mapId));
+  const emitter = useMapMittStore<MittTypeMapCrs>(mapId);
+  const store = useMapCrsStore(mapId);
+  const items = shallowRef(store.items);
   function setItems(p_items: CrsItem[]) {
-    setCrsItems(mapId, p_items);
+    logHelper(logger, mapId, 'store').debug('setCrsItems', items);
+    store.items = p_items;
+    emitter.emit(MittTypeMapCrsEventKey.setItems, p_items);
     items.value = [...p_items];
   }
-  const emitter = getStore<MittType<MittTypeMapCrs>>(mapId, MAP_STORE_KEY.MITT);
   function updateItems(p_items: CrsItem[]) {
     items.value = p_items;
     onChange && onChange(p_items);
@@ -40,11 +43,16 @@ export const useMapCrsCurrent = (
     onChange?: (p_item: CrsItem | undefined | null) => void;
   } = {},
 ) => {
-  const item = shallowRef<CrsItem | undefined | null>(getCrsItem(mapId));
+  const emitter = useMapMittStore<MittTypeMapCrs>(mapId);
+  const store = useMapCrsStore(mapId);
+  const item = shallowRef<CrsItem | undefined | null>(store.item);
   function setItem(crs: string | undefined | null) {
-    setCrs(mapId, crs);
+    logHelper(logger, mapId, 'store').debug('setCrs', crs);
+    store.crs = crs || '4326';
+    const crsItem = store.items.find((x) => x.epsg == crs);
+    store.item = crsItem;
+    emitter.emit(MittTypeMapCrsEventKey.setCurrent, crsItem);
   }
-  const emitter = getStore<MittType<MittTypeMapCrs>>(mapId, MAP_STORE_KEY.MITT);
   function updateItem(p_item: CrsItem | undefined | null) {
     item.value = p_item;
     onChange && onChange(p_item);
diff --git a/libs/map/core/src/extra/crs/index.md b/libs/map/core/src/extra/crs/index.md
index 6e6f3b6..686e982 100644
--- a/libs/map/core/src/extra/crs/index.md
+++ b/libs/map/core/src/extra/crs/index.md
@@ -9,17 +9,14 @@ category: Extra
 ## Usage
 
 ```ts
-import { crsStore, type MapCrsStore, type CrsItem, useCoordinate } from '@hungpvq/vue-map-core';
+import { useMapCrsItems, useCoordinate } from '@hungpvq/vue-map-core';
 ```
 
 ## crsStore
 
 ```ts
-import { crsStore, type MapCrsStore } from '@hungpvq/vue-map-core';
-imageStore.setCrsItems(mapId: string, items: CrsItem[]): void
-imageStore.getCrsItems(mapId: string): CrsItem[]
-imageStore.getCrs(mapId: string): CrsItem
-imageStore.setCrs(mapId: string, crs: CrsItem): void
+import { useMapCrsItems } from '@hungpvq/vue-map-core';
+const crsHandle = useMapCrsItems(mapId);
 ```
 
 ## useCoordinate
diff --git a/libs/map/core/src/extra/crs/index.ts b/libs/map/core/src/extra/crs/index.ts
index a967acb..8265e14 100644
--- a/libs/map/core/src/extra/crs/index.ts
+++ b/libs/map/core/src/extra/crs/index.ts
@@ -1,4 +1,4 @@
 export * from './hooks';
 export { default as CrsControl } from './modules/CrsControl/CrsControl.vue';
-export * as crsStore from './store';
+export { useMapCrsStore } from './store';
 export * from './types';
diff --git a/libs/map/core/src/extra/crs/store.ts b/libs/map/core/src/extra/crs/store.ts
index 8418126..2df9efb 100644
--- a/libs/map/core/src/extra/crs/store.ts
+++ b/libs/map/core/src/extra/crs/store.ts
@@ -1,15 +1,8 @@
 import { logHelper } from '@hungpvq/shared-map';
-import { addStore, getStore } from '../../store';
-import { addToQueue } from '../../store/queue';
-import { MittType } from '../../types';
+import { defineStore } from '@hungpvq/shared-store';
 import { MAP_STORE_KEY } from '../../types/key';
 import { logger } from './logger';
-import {
-  MittTypeMapCrsEventKey,
-  type CrsItem,
-  type MapCrsStore,
-  type MittTypeMapCrs,
-} from './types';
+import { type CrsItem, type MapCrsStore } from './types';
 
 const item_init: CrsItem[] = [
   { name: 'WGS 84', epsg: '4326', default: true, unit: 'degree' },
@@ -21,43 +14,13 @@ const item_init: CrsItem[] = [
       '+proj=longlat +ellps=WGS84 +towgs84=-191.90441429,-39.30318279,-111.45032835,-0.00928836,0.01975479,-0.00427372,0.252906278 +no_defs +type=crs',
   },
 ];
-function initMapCrs(mapId: string) {
-  logHelper(logger, mapId, 'store').debug('init');
-  addStore<MapCrsStore>(mapId, MAP_STORE_KEY.CRS, {
-    crs: '4326',
-    items: item_init.slice(),
-    item: item_init[0],
-  });
-}
-addToQueue(MAP_STORE_KEY.CRS, initMapCrs);
 
-export async function setCrsItems(mapId: string, items: CrsItem[]) {
-  logHelper(logger, mapId, 'store').debug('setCrsItems', items);
-  const store = getStore<MapCrsStore>(mapId, MAP_STORE_KEY.CRS);
-  store.items = items;
-  const emitter = getStore<MittType<MittTypeMapCrs>>(mapId, MAP_STORE_KEY.MITT);
-  emitter.emit(MittTypeMapCrsEventKey.setItems, items);
-}
-
-export const getCrsItems = (mapId: string) =>
-  getStore<MapCrsStore>(mapId, MAP_STORE_KEY.CRS).items;
-
-export const getCrsItem = (mapId: string) =>
-  getStore<MapCrsStore>(mapId, MAP_STORE_KEY.CRS).item;
-
-export const getCrs = (mapId: string) =>
-  getStore<MapCrsStore>(mapId, MAP_STORE_KEY.CRS).crs;
-
-export function setCrs(mapId: string, crs: string | undefined | null) {
-  if (!crs) {
-    crs = '4326';
-  }
-  logHelper(logger, mapId, 'store').debug('setCrs', crs);
-  getStore<MapCrsStore>(mapId, MAP_STORE_KEY.CRS).crs = crs;
-  const crsItem = getStore<MapCrsStore>(mapId, MAP_STORE_KEY.CRS).items.find(
-    (x) => x.epsg == crs,
-  );
-  getStore<MapCrsStore>(mapId, MAP_STORE_KEY.CRS).item = crsItem;
-  const emitter = getStore<MittType<MittTypeMapCrs>>(mapId, MAP_STORE_KEY.MITT);
-  emitter.emit(MittTypeMapCrsEventKey.setCurrent, crsItem);
-}
+export const useMapCrsStore = (mapId: string) =>
+  defineStore<MapCrsStore>(['map:core', mapId, MAP_STORE_KEY.CRS], () => {
+    logHelper(logger, mapId, 'store').debug('init');
+    return {
+      crs: '4326',
+      items: item_init.slice(),
+      item: item_init[0],
+    };
+  })();
diff --git a/libs/map/core/src/extra/event/hook/useEvent.ts b/libs/map/core/src/extra/event/hook/useEvent.ts
index 39641b2..8bb6dfa 100644
--- a/libs/map/core/src/extra/event/hook/useEvent.ts
+++ b/libs/map/core/src/extra/event/hook/useEvent.ts
@@ -2,9 +2,10 @@ import { logHelper, MapSimple } from '@hungpvq/shared-map';
 import { MapEventType } from 'maplibre-gl';
 import { computed, onBeforeUnmount, onMounted } from 'vue';
 import { getMap } from '../../../store';
+import { useMapMittStore } from '../../mitt';
 import { logger } from '../logger';
-import { addListenerMap, getCurrentEvent, removeListenerMap } from '../store';
-import { IEvent } from '../types';
+import { useMapEventStore } from '../store';
+import { IEvent, MittTypeMapEvent, MittTypeMapEventEventKey } from '../types';
 
 export function useEventMap(mapId: string, event: IEvent, immediate = false) {
   const { add, remove, isActive } = setEventMap(mapId, event);
@@ -19,16 +20,35 @@ export function useEventMap(mapId: string, event: IEvent, immediate = false) {
   return { add, remove, isActive };
 }
 export function setEventMap(mapId: string, event: IEvent) {
+  const store = useMapEventStore(mapId);
+  const emitter = useMapMittStore<MittTypeMapEvent>(mapId);
   const add = () => {
     logHelper(logger, mapId, 'hook', 'useEventMap').debug('add', event);
-    addListenerMap(mapId, event);
+    logHelper(logger, mapId, 'store').debug('addListenerMap', event);
+    store.items.unshift(event);
+    emitter.emit(MittTypeMapEventEventKey.add, event);
+    emitter.emit(MittTypeMapEventEventKey.setItems, store.items);
   };
   const remove = () => {
     logHelper(logger, mapId, 'hook', 'useEventMap').debug('remove', event);
-    removeListenerMap(mapId, event);
+    if (!store || !store.items || store.items.length < 1) {
+      return;
+    }
+    const events = store.items;
+    const event_index = events.findIndex((x) => x.id === event.id);
+    if (event_index < 0) {
+      return;
+    }
+    store.items.splice(event_index, 1);
+    emitter.emit(MittTypeMapEventEventKey.remove, event);
+    emitter.emit(MittTypeMapEventEventKey.setItems, store.items);
   };
+  function getCurrentEvent(event_map_type: string) {
+    return (store.current || {})[event_map_type];
+  }
+
   const isActive = computed(() => {
-    const c_event = getCurrentEvent(mapId, event.event_map_type);
+    const c_event = getCurrentEvent(event.event_map_type);
     return c_event && c_event.id === event.id;
   });
   return { add, remove, isActive };
diff --git a/libs/map/core/src/extra/event/hook/useEventMapItems.ts b/libs/map/core/src/extra/event/hook/useEventMapItems.ts
index c1253b2..66b7821 100644
--- a/libs/map/core/src/extra/event/hook/useEventMapItems.ts
+++ b/libs/map/core/src/extra/event/hook/useEventMapItems.ts
@@ -1,8 +1,6 @@
 import { onMounted, onUnmounted, shallowRef } from 'vue';
-import { getStore } from '../../../store';
-import { MittType } from '../../../types';
-import { MAP_STORE_KEY } from '../../../types/key';
-import { getEvents } from '../store';
+import { useMapMittStore } from '../../mitt';
+import { useMapEventStore } from '../store';
 import { IEvent, MittTypeMapEvent, MittTypeMapEventEventKey } from '../types';
 
 export const useEventMapItems = (
@@ -13,11 +11,13 @@ export const useEventMapItems = (
     onChange?: (p_item: IEvent[]) => void;
   } = {},
 ) => {
-  const items = shallowRef(getEvents(mapId));
-  const emitter = getStore<MittType<MittTypeMapEvent>>(
-    mapId,
-    MAP_STORE_KEY.MITT,
-  );
+  const store = useMapEventStore(mapId);
+  function getEvents() {
+    return store.items;
+  }
+
+  const items = shallowRef(getEvents());
+  const emitter = useMapMittStore<MittTypeMapEvent>(mapId);
   function updateItems(p_items: IEvent[]) {
     items.value = p_items;
     onChange && onChange(p_items);
diff --git a/libs/map/core/src/extra/event/modules/ActionControl.vue b/libs/map/core/src/extra/event/modules/ActionControl.vue
index f35c33a..fa2651b 100644
--- a/libs/map/core/src/extra/event/modules/ActionControl.vue
+++ b/libs/map/core/src/extra/event/modules/ActionControl.vue
@@ -5,14 +5,17 @@ import { groupBy } from 'lodash';
 import { onMounted } from 'vue';
 import { useMap, withMapProps } from '../../../hooks';
 import ModuleContainer from '../../../modules/ModuleContainer/ModuleContainer.vue';
+import { useMapMittStore } from '../../mitt';
 import { useEventMapItems } from '../hook';
 import { logger } from '../logger';
-import { setCurrentEvent } from '../store';
-import { IEvent } from '../types';
+import { useMapEventStore } from '../store';
+import { IEvent, MittTypeMapEvent, MittTypeMapEventEventKey } from '../types';
 const props = defineProps({
   ...withMapProps,
 });
 const { callMap, mapId, moduleContainerProps } = useMap(props);
+const store = useMapEventStore(mapId.value);
+const emitter = useMapMittStore<MittTypeMapEvent>(mapId.value);
 const current_listener: Record<string, Record<string, IEvent | undefined>> = {};
 const { items } = useEventMapItems(mapId.value, {
   onChange: (value) => {
@@ -22,6 +25,19 @@ const { items } = useEventMapItems(mapId.value, {
 onMounted(() => {
   updateEventMap(items.value);
 });
+function setCurrentEvent(
+  mapId: string,
+  event_map_type: string,
+  event?: IEvent,
+) {
+  logHelper(logger, mapId, 'store').debug(
+    'setCurrentEvent',
+    event_map_type,
+    event,
+  );
+  store.current[event_map_type] = event;
+  emitter.emit(MittTypeMapEventEventKey.setCurrent, event);
+}
 function updateEventMap(events: IEvent[]) {
   const listeners = groupBy<IEvent>(events, (event) => {
     return event.event_map_type;
diff --git a/libs/map/core/src/extra/event/store.ts b/libs/map/core/src/extra/event/store.ts
index 4bf6ebd..c7a8f87 100644
--- a/libs/map/core/src/extra/event/store.ts
+++ b/libs/map/core/src/extra/event/store.ts
@@ -1,6 +1,5 @@
 import { logHelper } from '@hungpvq/shared-map';
-import { addStore, addToQueue, getStore } from '../../store';
-import { MittType } from '../../types';
+import { defineStore } from '@hungpvq/shared-store';
 import { MAP_STORE_KEY } from '../../types/key';
 import { logger } from './logger';
 import { IEvent, MittTypeMapEvent, MittTypeMapEventEventKey } from './types';
@@ -9,72 +8,11 @@ export type MapEventStore = {
   items: IEvent[];
   current: { [key: string]: IEvent | undefined };
 };
-function initMapEvent(mapId: string) {
-  logHelper(logger, mapId, 'store').debug('init');
-  addStore<MapEventStore>(mapId, MAP_STORE_KEY.EVENT, {
-    items: [],
-    current: {},
-  });
-}
-addToQueue(MAP_STORE_KEY.EVENT, initMapEvent);
-
-export async function addListenerMap(mapId: string, event: IEvent) {
-  logHelper(logger, mapId, 'store').debug('addListenerMap', event);
-  const store = getStore<MapEventStore>(mapId, MAP_STORE_KEY.EVENT);
-  store.items.unshift(event);
-  const emitter = getStore<MittType<MittTypeMapEvent>>(
-    mapId,
-    MAP_STORE_KEY.MITT,
-  );
-  emitter.emit(MittTypeMapEventEventKey.add, event);
-  emitter.emit(MittTypeMapEventEventKey.setItems, store.items);
-}
-
-export async function removeListenerMap(mapId: string, event: IEvent) {
-  logHelper(logger, mapId, 'store').debug('removeListenerMap', event);
-  const store = getStore<MapEventStore>(mapId, MAP_STORE_KEY.EVENT);
-  if (!store || !store.items || store.items.length < 1) {
-    return;
-  }
-  const events = store.items;
-  const event_index = events.findIndex((x) => x.id === event.id);
-  if (event_index < 0) {
-    return;
-  }
-  store.items.splice(event_index, 1);
-  const emitter = getStore<MittType<MittTypeMapEvent>>(
-    mapId,
-    MAP_STORE_KEY.MITT,
-  );
-  emitter.emit(MittTypeMapEventEventKey.remove, event);
-  emitter.emit(MittTypeMapEventEventKey.setItems, store.items);
-}
-
-export function getCurrentEvent(mapId: string, event_map_type: string) {
-  return (getStore<MapEventStore>(mapId, MAP_STORE_KEY.EVENT).current || {})[
-    event_map_type
-  ];
-}
-
-export function getEvents(mapId: string) {
-  return getStore<MapEventStore>(mapId, MAP_STORE_KEY.EVENT).items;
-}
-
-export function setCurrentEvent(
-  mapId: string,
-  event_map_type: string,
-  event?: IEvent,
-) {
-  logHelper(logger, mapId, 'store').debug(
-    'setCurrentEvent',
-    event_map_type,
-    event,
-  );
-  const store = getStore<MapEventStore>(mapId, MAP_STORE_KEY.EVENT);
-  store.current[event_map_type] = event;
-  const emitter = getStore<MittType<MittTypeMapEvent>>(
-    mapId,
-    MAP_STORE_KEY.MITT,
-  );
-  emitter.emit(MittTypeMapEventEventKey.setCurrent, event);
-}
+export const useMapEventStore = (mapId: string) =>
+  defineStore<MapEventStore>(['map:core', mapId, MAP_STORE_KEY.EVENT], () => {
+    logHelper(logger, mapId, 'store').debug('init');
+    return {
+      items: [],
+      current: {},
+    };
+  })();
diff --git a/libs/map/core/src/extra/image/index.md b/libs/map/core/src/extra/image/index.md
index ee4b5f4..38e30cb 100644
--- a/libs/map/core/src/extra/image/index.md
+++ b/libs/map/core/src/extra/image/index.md
@@ -9,14 +9,15 @@ category: Extra
 ## Usage
 
 ```ts
-import { imageStore, type MapImageStore } from '@hungpvq/vue-map-core';
+import { useMapImage } from '@hungpvq/vue-map-core';
 ```
 
 ## imageStore
 
 ```ts
-import { imageStore, type MapImageStore } from '@hungpvq/vue-map-core';
-imageStore.addImage(
+import { useMapImage } from '@hungpvq/vue-map-core';
+const imageHandle = useMapImage()
+imageHandle.addImage(
   mapId: string,
   key: string,
   image_url: string,
diff --git a/libs/map/core/src/extra/image/index.ts b/libs/map/core/src/extra/image/index.ts
index d6d2b99..11af5fb 100644
--- a/libs/map/core/src/extra/image/index.ts
+++ b/libs/map/core/src/extra/image/index.ts
@@ -1,2 +1,2 @@
 export * from './hooks';
-export * as imageStore from './store';
+export { useMapImage } from './store';
diff --git a/libs/map/core/src/extra/image/store.ts b/libs/map/core/src/extra/image/store.ts
index ab6226e..82a4c5e 100644
--- a/libs/map/core/src/extra/image/store.ts
+++ b/libs/map/core/src/extra/image/store.ts
@@ -1,6 +1,6 @@
 import { logHelper, MapSimple } from '@hungpvq/shared-map';
-import { addToQueue } from '../../store/queue';
-import { addStore, getMap, getStore } from '../../store/store';
+import { defineStore } from '@hungpvq/shared-store';
+import { useMapStore } from '../../store/store';
 import { MAP_STORE_KEY } from '../../types/key';
 import { addImageForMap } from './helpers';
 import { logger } from './logger';
@@ -17,29 +17,38 @@ export type MapImageStore = {
     }
   >;
 };
-export function initMapImage(mapId: string) {
-  logHelper(logger, mapId, 'store').debug('init');
-  addStore(mapId, MAP_STORE_KEY.IMAGE, { images: {} });
-}
-addToQueue(MAP_STORE_KEY.IMAGE, initMapImage);
-
-export async function addImage(
-  mapId: string,
-  key: string,
-  image_url: string,
-  option: any = {},
-) {
-  logHelper(logger, mapId, 'store').debug('addImage', key, image_url, option);
-  const storeImage = getStore<MapImageStore>(mapId, MAP_STORE_KEY.IMAGE);
-  storeImage.images[key] = {
-    path: image_url,
-    id: key,
-    name: key,
-    is_sprite: false,
-    category: 'custom',
+export const useMapImageStore = (mapId: string) =>
+  defineStore<MapImageStore>(['map:core', mapId, MAP_STORE_KEY.IMAGE], () => {
+    logHelper(logger, mapId, 'store').debug('init');
+    return { images: {} };
+  })();
+export const useMapImage = (mapId: string) => {
+  const store = useMapImageStore(mapId);
+  const storeMap = useMapStore(mapId);
+  return {
+    async addImage(
+      mapId: string,
+      key: string,
+      image_url: string,
+      option: any = {},
+    ) {
+      logHelper(logger, mapId, 'store').debug(
+        'addImage',
+        key,
+        image_url,
+        option,
+      );
+      store.images[key] = {
+        path: image_url,
+        id: key,
+        name: key,
+        is_sprite: false,
+        category: 'custom',
+      };
+      const promises = storeMap.getMap(async (map: MapSimple) =>
+        addImageForMap(map, key, image_url, option),
+      );
+      return promises;
+    },
   };
-  const promises = getMap(mapId, async (map: MapSimple) =>
-    addImageForMap(map, key, image_url, option),
-  );
-  return promises;
-}
+};
diff --git a/libs/map/core/src/extra/index.ts b/libs/map/core/src/extra/index.ts
index 64dfd0f..010039e 100644
--- a/libs/map/core/src/extra/index.ts
+++ b/libs/map/core/src/extra/index.ts
@@ -3,3 +3,4 @@ export * from './crs';
 export * from './event';
 export * from './image';
 export * from './lang';
+export * from './mitt';
diff --git a/libs/map/core/src/extra/lang/hook.ts b/libs/map/core/src/extra/lang/hook.ts
index fc5fd5a..692b728 100644
--- a/libs/map/core/src/extra/lang/hook.ts
+++ b/libs/map/core/src/extra/lang/hook.ts
@@ -1,25 +1,16 @@
 import { computed, onMounted, onUnmounted, shallowRef } from 'vue';
-import { getStore } from '../../store';
-import { MittType } from '../../types';
-import { MAP_STORE_KEY } from '../../types/key';
-import {
-  getMapLang,
-  setMapLang,
-  setMapLocaleDefault,
-  setMapTranslate,
-} from './store';
+import { useMapMittStore } from '../mitt';
+import { useMapLocale } from './store';
 import { MittTypeMapLang, MittTypeMapLangEventKey } from './types';
 
 const propCache = new Map<string, any>();
 
 export function useLang(mapId: string) {
   if (!mapId) throw new Error('mapId is required');
-
-  const storeLang = shallowRef(getMapLang(mapId));
-  const emitter = getStore<MittType<MittTypeMapLang>>(
-    mapId,
-    MAP_STORE_KEY.MITT,
-  );
+  const { getMapLang, setMapLang, setMapLocaleDefault, setMapTranslate } =
+    useMapLocale(mapId);
+  const storeLang = shallowRef(getMapLang());
+  const emitter = useMapMittStore<MittTypeMapLang>(mapId);
   onMounted(() => {
     emitter.on(MittTypeMapLangEventKey.setLocale, update);
     emitter.on(MittTypeMapLangEventKey.setTranslate, update);
@@ -29,7 +20,7 @@ export function useLang(mapId: string) {
     emitter.off(MittTypeMapLangEventKey.setTranslate, update);
   });
   function update() {
-    storeLang.value = getMapLang(mapId);
+    storeLang.value = getMapLang();
   }
 
   function transLocal(key: string, params?: Record<string, any>) {
@@ -60,17 +51,17 @@ export function useLang(mapId: string) {
   });
 
   function setLocale(locale: any) {
-    setMapLang(mapId, locale);
+    setMapLang(locale);
   }
 
   function setLocaleDefault(locale: any) {
-    setMapLocaleDefault(mapId, locale);
+    setMapLocaleDefault(locale);
   }
 
   function setTranslate(
     translate: (key: string, params?: Record<string, any>) => string,
   ) {
-    setMapTranslate(mapId, translate);
+    setMapTranslate(translate);
   }
 
   return { trans, setLocale, setLocaleDefault, setTranslate };
diff --git a/libs/map/core/src/extra/lang/store.ts b/libs/map/core/src/extra/lang/store.ts
index 25e5138..1cf5cf0 100644
--- a/libs/map/core/src/extra/lang/store.ts
+++ b/libs/map/core/src/extra/lang/store.ts
@@ -1,9 +1,8 @@
 import { logHelper } from '@hungpvq/shared-map';
+import { defineStore } from '@hungpvq/shared-store';
 import { merge } from 'lodash';
-import { addStore, getStore } from '../../store';
-import { addToQueue } from '../../store/queue';
-import { MittType } from '../../types';
 import { MAP_STORE_KEY } from '../../types/key';
+import { useMapMittStore } from '../mitt';
 import { logger } from './logger';
 import {
   MapLangLocale,
@@ -18,57 +17,44 @@ export type MapLocateStore = {
   translate?: (key: string, params?: MapLangLocale) => string;
 };
 
-function initMapLang(mapId: string) {
-  logHelper(logger, mapId, 'store').debug('init');
-  addStore<MapLocateStore>(mapId, MAP_STORE_KEY.LANG, {
-    locale: {},
-    localeDefault: {},
-  });
-}
+export const useMapLocaleStore = (mapId: string) =>
+  defineStore<MapLocateStore>(['map:core', mapId, MAP_STORE_KEY.LANG], () => {
+    logHelper(logger, mapId, 'store').debug('init');
+    return {
+      locale: {},
+      localeDefault: {},
+    };
+  })();
+export const useMapLocale = (mapId: string) => {
+  const store = useMapLocaleStore(mapId);
 
-export function getMapLang(mapId: string) {
-  const store = getStore<MapLocateStore>(mapId, MAP_STORE_KEY.LANG);
-  if (!store) {
-    initMapLang(mapId);
-    return getStore<MapLocateStore>(mapId, MAP_STORE_KEY.LANG);
-  }
-  return store;
-}
+  function setMapLang(locale: MapLangLocale) {
+    logHelper(logger, mapId, 'store').debug('setMapLang', locale);
 
-export function setMapLang(mapId: string, locale: MapLangLocale) {
-  logHelper(logger, mapId, 'store').debug('setMapLang', locale);
-  const store = getMapLang(mapId);
-  if (store) {
-    store.locale = merge({}, store.locale, locale);
+    if (store) {
+      store.locale = merge({}, store.locale, locale);
+    }
+    const emitter = useMapMittStore<MittTypeMapLang>(mapId);
+    emitter?.emit(MittTypeMapLangEventKey.setLocale, locale);
   }
-  const emitter = getStore<MittType<MittTypeMapLang>>(
-    mapId,
-    MAP_STORE_KEY.MITT,
-  );
-  emitter?.emit(MittTypeMapLangEventKey.setLocale, locale);
-}
 
-export function setMapLocaleDefault(mapId: string, locale: MapLangLocale) {
-  const store = getMapLang(mapId);
-  if (store) {
-    store.localeDefault = merge({}, store.localeDefault, locale);
+  function setMapLocaleDefault(locale: MapLangLocale) {
+    if (store) {
+      store.localeDefault = merge({}, store.localeDefault, locale);
+    }
   }
-}
 
-export function setMapTranslate(
-  mapId: string,
-  translate: MapTranslateFunction,
-) {
-  logHelper(logger, mapId, 'store').debug('setMapTranslate', translate);
-  const store = getMapLang(mapId);
-  if (store) {
-    store.translate = translate;
-  }
-  const emitter = getStore<MittType<MittTypeMapLang>>(
-    mapId,
-    MAP_STORE_KEY.MITT,
-  );
-  emitter?.emit(MittTypeMapLangEventKey.setTranslate, translate);
-}
+  function setMapTranslate(translate: MapTranslateFunction) {
+    logHelper(logger, mapId, 'store').debug('setMapTranslate', translate);
 
-addToQueue(MAP_STORE_KEY.LANG, initMapLang);
+    if (store) {
+      store.translate = translate;
+    }
+    const emitter = useMapMittStore<MittTypeMapLang>(mapId);
+    emitter?.emit(MittTypeMapLangEventKey.setTranslate, translate);
+  }
+  function getMapLang() {
+    return store;
+  }
+  return { getMapLang, setMapTranslate, setMapLocaleDefault, setMapLang };
+};
diff --git a/libs/map/core/src/extra/mitt/index.ts b/libs/map/core/src/extra/mitt/index.ts
index 476a06d..3311ebe 100644
--- a/libs/map/core/src/extra/mitt/index.ts
+++ b/libs/map/core/src/extra/mitt/index.ts
@@ -1,19 +1,20 @@
 import { loggerFactory } from '@hungpvq/shared-log';
 import { logHelper } from '@hungpvq/shared-map';
-import mitt, { Emitter } from 'mitt';
-import { addStore, addToQueue } from '../../store';
+import { defineStore } from '@hungpvq/shared-store';
+import mitt, { Emitter, EventType } from 'mitt';
 import { MAP_STORE_KEY } from '../../types/key';
 const loggerEvent = loggerFactory
   .createLogger()
   .setNamespace('map:' + MAP_STORE_KEY.MITT, 2);
-loggerFactory.disableEverything();
-export function initStoreMitt(mapId: string) {
-  const eventHandle = mitt();
-  logHelper(loggerEvent, mapId, 'store').debug('init');
-  addStore<Emitter<any>>(mapId, MAP_STORE_KEY.MITT, eventHandle);
-  eventHandle.on('*', (key, ...params: any) => {
-    logHelper(loggerEvent, mapId, 'store').debug(`[${String(key)}]`, params);
-  });
-}
 
-addToQueue(MAP_STORE_KEY.MITT, initStoreMitt);
+export const useMapMittStore = <T extends Record<EventType, unknown> = any>(
+  mapId: string,
+) =>
+  defineStore<Emitter<T>>(['map:core', mapId, MAP_STORE_KEY.MITT], () => {
+    const eventHandle = mitt<T>();
+    logHelper(loggerEvent, mapId, 'store').debug('init');
+    eventHandle.on('*', (key, ...params: any) => {
+      logHelper(loggerEvent, mapId, 'store').debug(`[${String(key)}]`, params);
+    });
+    return eventHandle;
+  })();
diff --git a/libs/map/core/src/modules/Map.vue b/libs/map/core/src/modules/Map.vue
index a7e9444..311fcd5 100644
--- a/libs/map/core/src/modules/Map.vue
+++ b/libs/map/core/src/modules/Map.vue
@@ -6,7 +6,7 @@ import { DraggableContainer } from '@hungpvq/vue-draggable';
 import mapboxgl, { MapOptions } from 'maplibre-gl';
 import { computed, onMounted, onUnmounted, provide, ref } from 'vue';
 import ActionControl from '../extra/event/modules/ActionControl.vue';
-import { initMap, removeMap, store } from '../store/store';
+import { useMapContainer } from '../store/store';
 if (!mapboxgl) {
   throw new Error('mapboxgl is not installed.');
 }
@@ -66,6 +66,7 @@ const isSupport = ref(isWebglSupported());
 const loaded = ref(false);
 let map: mapboxgl.Map | undefined = undefined;
 const id = ref(getUUIDv4());
+const store = useMapContainer(id.value);
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 onMounted(() => {
   const initOptions = Object.assign({}, DEFAULTOPTION, props.initOptions);
@@ -82,10 +83,10 @@ onMounted(() => {
     ...initOptions,
   });
   (map as any).id = id.value;
-  initMap(store, id.value, map as MapSimple);
+  store.initMap(map as MapSimple);
   map.once('load', () => {
-    loaded.value = true;
     emit('map-loaded', map! as MapSimple);
+    loaded.value = true;
   });
 });
 onUnmounted(() => {
@@ -94,7 +95,7 @@ onUnmounted(() => {
     emit('map-destroy', map as MapSimple);
   }
   map = undefined;
-  removeMap(store, id.value);
+  store.removeMap();
 });
 
 const draggableTo = computed(() => {
diff --git a/libs/map/core/src/store/index.md b/libs/map/core/src/store/index.md
index c61591e..f040cfb 100644
--- a/libs/map/core/src/store/index.md
+++ b/libs/map/core/src/store/index.md
@@ -9,24 +9,11 @@ category: Store
 ## Usage
 
 ```ts
-import { addStore, getMap, getStore, addToQueue } from '@hungpvq/vue-map-core';
+import { addStore, getMap, getStore } from '@hungpvq/vue-map-core';
 ```
 
 ## Create new store
 
 ```ts
-import { addStore, getStore, addToQueue } from '@hungpvq/vue-map-core';
-export const KEY = 'layer';
-export type MapLayerStore = {
-  layers: Record<string, any>;
-  layerIds: Ref<string[]>;
-};
-export function initMapLayer(mapId: string) {
-  addStore<MapLayerStore>(mapId, KEY, { layers: {}, layerIds: ref([]) });
-}
-addToQueue(KEY, initMapLayer);
-export function getLayerIds(mapId: string) {
-  const store = getStore<MapLayerStore>(mapId, KEY);
-  return store.layerIds;
-}
+
 ```
diff --git a/libs/map/core/src/store/index.ts b/libs/map/core/src/store/index.ts
index c407d9d..d406816 100644
--- a/libs/map/core/src/store/index.ts
+++ b/libs/map/core/src/store/index.ts
@@ -1,2 +1 @@
-export * from './queue';
 export * from './store';
diff --git a/libs/map/core/src/store/logger.ts b/libs/map/core/src/store/logger.ts
index a373820..ced3a76 100644
--- a/libs/map/core/src/store/logger.ts
+++ b/libs/map/core/src/store/logger.ts
@@ -1,2 +1,5 @@
 import { loggerFactory } from '@hungpvq/shared-log';
+import { MAP_STORE_KEY } from '../types/key';
+loggerFactory.disable('map:' + MAP_STORE_KEY.MITT);
+loggerFactory.disableEverything();
 export const logger = loggerFactory.createLogger().setNamespace('map:core', 2);
diff --git a/libs/map/core/src/store/queue.ts b/libs/map/core/src/store/queue.ts
deleted file mode 100644
index 96cc0d4..0000000
--- a/libs/map/core/src/store/queue.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { createStore } from '@hungpvq/shared';
-
-export type PendingFunction = (mapId: string) => void;
-const store = createStore<{
-  pendingFunctions: Record<string, PendingFunction>;
-  pendingRemoveFunctions: Record<string, PendingFunction>;
-  mapIds: Record<string, Record<string, boolean>>;
-}>('map.queue', {
-  pendingFunctions: {},
-  pendingRemoveFunctions: {},
-  mapIds: {},
-});
-const pendingFunctions = store.pendingFunctions;
-const pendingRemoveFunctions = store.pendingRemoveFunctions;
-const mapIds = store.mapIds;
-export function addToQueue(
-  key: string,
-  func: PendingFunction,
-  funcRemove?: PendingFunction
-) {
-  pendingFunctions[key] = func;
-  if (funcRemove) pendingRemoveFunctions[key] = funcRemove;
-  runPending();
-}
-export function runPending() {
-  for (const mapId in mapIds) {
-    if (Object.prototype.hasOwnProperty.call(mapIds, mapId)) {
-      const mapRun = mapIds[mapId];
-
-      for (const key in pendingFunctions) {
-        if (
-          Object.prototype.hasOwnProperty.call(pendingFunctions, key) &&
-          !mapRun[key]
-        ) {
-          const pendingFunction = pendingFunctions[key];
-          pendingFunction(mapId);
-          mapRun[key] = true;
-        }
-      }
-    }
-  }
-}
-
-export function addMapIdToQueue(mapId: string) {
-  mapIds[mapId] = {};
-  runPending();
-}
-export function removeMapIdFromQueue(mapId: string) {
-  for (const key in pendingRemoveFunctions) {
-    const mapRun = mapIds[mapId];
-    if (
-      Object.prototype.hasOwnProperty.call(pendingRemoveFunctions, key) &&
-      !mapRun[key]
-    ) {
-      const pendingRemoveFunction = pendingRemoveFunctions[key];
-      pendingRemoveFunction(mapId);
-      mapRun[key] = true;
-    }
-  }
-  mapIds[mapId] = {};
-}
diff --git a/libs/map/core/src/store/store.ts b/libs/map/core/src/store/store.ts
index 01b1467..1eaff38 100644
--- a/libs/map/core/src/store/store.ts
+++ b/libs/map/core/src/store/store.ts
@@ -1,10 +1,10 @@
 import { createStore } from '@hungpvq/shared';
 import { logHelper, MapFCOnUseMap, MapSimple } from '@hungpvq/shared-map';
+import { defineStore } from '@hungpvq/shared-store';
 import { MapStore } from '../types';
 import { logger } from './logger';
-import { addMapIdToQueue, removeMapIdFromQueue } from './queue';
 type MapRootStore = Record<string, MapStore>;
-const store = createStore<MapRootStore>('map.core', {});
+const store = createStore<MapRootStore>('map:core', {});
 export function getMapStore(id: string) {
   const map = store[id];
   if (!map) {
@@ -38,28 +38,6 @@ export function getIsMulti(id: string): boolean {
 export function getMaps(id: string): MapSimple[] {
   return getMapStore(id)?.maps;
 }
-export function removeMap(store: MapRootStore, id: string) {
-  logHelper(logger, id, 'store').debug('removeMap');
-  delete store[id];
-  removeMapIdFromQueue(id);
-}
-
-export function initMap(store: MapRootStore, id: string, map: MapSimple) {
-  logHelper(logger, id, 'store').debug('init', map);
-  store[id] = {
-    map,
-  };
-  addMapIdToQueue(id);
-}
-
-export function initMaps(store: MapRootStore, id: string, maps: MapSimple[]) {
-  logHelper(logger, id, 'store').debug('init maps', maps);
-  store[id] = {
-    maps,
-    isMulti: maps.length > 1,
-  };
-  addMapIdToQueue(id);
-}
 
 export function getMap(id: string, cb?: MapFCOnUseMap) {
   const map = getMapStore(id)?.map as MapSimple;
@@ -77,3 +55,65 @@ export function getMap(id: string, cb?: MapFCOnUseMap) {
     cb(map);
   }
 }
+
+export const useMapGLobalStore = defineStore('map:core', () => {
+  const store: Record<string, MapStore> = {};
+  return store;
+});
+export const useMapStore = (mapId: string) => {
+  const store = useMapGLobalStore();
+  function getMapStore() {
+    const map = store[mapId];
+    if (!map) {
+      return;
+      // throw 'Not found map for id ' + id;
+    }
+    return map;
+  }
+  return {
+    getIsMulti(): boolean {
+      return !!getMapStore()?.isMulti;
+    },
+    getMaps(): MapSimple[] {
+      return getMapStore()?.maps;
+    },
+    getMap(cb?: MapFCOnUseMap) {
+      const map = getMapStore()?.map as MapSimple;
+      const maps = getMapStore()?.maps as MapSimple[];
+      if (maps) {
+        maps.forEach((map) => {
+          cb && cb(map);
+        });
+      }
+      if (!map) {
+        return;
+        // throw 'Not found map for id ' + id;
+      }
+      if (cb) {
+        cb(map);
+      }
+    },
+  };
+};
+export const useMapContainer = (mapId: string) => {
+  const store = useMapGLobalStore();
+  return {
+    initMaps(maps: MapSimple[]) {
+      logHelper(logger, mapId, 'store').debug('init maps', maps);
+      store[mapId] = {
+        maps,
+        isMulti: maps.length > 1,
+      };
+    },
+    initMap(map: MapSimple) {
+      logHelper(logger, mapId, 'store').debug('init', map);
+      store[mapId] = {
+        map,
+      };
+    },
+    removeMap() {
+      logHelper(logger, mapId, 'store').debug('removeMap');
+      delete store[mapId];
+    },
+  };
+};
diff --git a/libs/map/core/src/types/index.ts b/libs/map/core/src/types/index.ts
index 7716d45..b85a99a 100644
--- a/libs/map/core/src/types/index.ts
+++ b/libs/map/core/src/types/index.ts
@@ -3,4 +3,5 @@ import type { Emitter, EventType } from 'mitt';
 export * from './store';
 
 export const MITT_KEY = 'mitt';
+
 export type MittType<T extends Record<EventType, unknown>> = Emitter<T>;
diff --git a/libs/map/core/vite.config.ts b/libs/map/core/vite.config.ts
index 7c22b00..65e9d67 100644
--- a/libs/map/core/vite.config.ts
+++ b/libs/map/core/vite.config.ts
@@ -51,6 +51,7 @@ export default defineConfig({
         '@mapbox/mapbox-gl-sync-move',
         'mitt',
         '@hungpvq/shared-log',
+        '@hungpvq/shared-store',
       ],
       output: {
         // Provide global variables to use in the UMD build
diff --git a/libs/map/dataset/package.json b/libs/map/dataset/package.json
index 795ceb0..4320b16 100644
--- a/libs/map/dataset/package.json
+++ b/libs/map/dataset/package.json
@@ -33,6 +33,7 @@
     "maplibre-gl": "^5.4.0",
     "vuedraggable": "^4.1.0",
     "@hungpvq/shared-file": ">=0.0.1",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "@hungpvq/shared-store": ">=0.0.1"
   }
 }
diff --git a/libs/map/dataset/src/model/data-management/model.ts b/libs/map/dataset/src/model/data-management/model.ts
index 3639a79..a819174 100644
--- a/libs/map/dataset/src/model/data-management/model.ts
+++ b/libs/map/dataset/src/model/data-management/model.ts
@@ -4,7 +4,7 @@ import booleanIntersects from '@turf/boolean-intersects';
 import { point as pointTurf } from '@turf/turf';
 import type { Feature } from 'geojson';
 import LayerDetail from '../../modules/LayerDetail/LayerDetail.vue';
-import { addComponent, setFeatureHighlight } from '../../store';
+import { useMapDatasetComponent, useMapDatasetHighlight } from '../../store';
 import { isDatasetSourceMap } from '../../utils/check';
 import {
   convertFeatureToItem,
@@ -50,7 +50,9 @@ export function createDataManagementMapboxComponent<
   };
 
   const showDetail = (mapId: string, detail: D) => {
-    addComponent(mapId, {
+    const { setFeatureHighlight } = useMapDatasetHighlight(mapId);
+    const { addComponent } = useMapDatasetComponent(mapId);
+    addComponent({
       component: () => LayerDetail,
       attr: {
         item: detail,
@@ -59,12 +61,7 @@ export function createDataManagementMapboxComponent<
       },
       check: 'detail',
     });
-    setFeatureHighlight(
-      mapId,
-      convertItemToFeature(detail),
-      'detail',
-      dataComponent,
-    );
+    setFeatureHighlight(convertItemToFeature(detail), 'detail', dataComponent);
   };
 
   const dataComponent = createNamedComponent('DataManagementMapboxComponent', {
diff --git a/libs/map/dataset/src/model/part-menu.model.ts b/libs/map/dataset/src/model/part-menu.model.ts
index 16a6153..5984520 100644
--- a/libs/map/dataset/src/model/part-menu.model.ts
+++ b/libs/map/dataset/src/model/part-menu.model.ts
@@ -13,7 +13,7 @@ import type {
 } from '../interfaces';
 import LayerDetail from '../modules/LayerDetail/LayerDetail.vue';
 import StyleControl from '../modules/StyleControl/style-control.vue';
-import { addComponent, setFeatureHighlight } from '../store';
+import { useMapDatasetComponent, useMapDatasetHighlight } from '../store';
 import { findSiblingOrNearestLeaf } from './dataset.visitors';
 import ToggleShow from './menu/toggle-show.vue';
 
@@ -93,11 +93,11 @@ export function createMenuItemToBoundActionForItem() {
     name: 'Fly to',
     icon: mdiCrosshairsGps,
     click: (layer, mapId, value) => {
+      const { setFeatureHighlight } = useMapDatasetHighlight(mapId);
       getMap(mapId, (map) => {
         fitBounds(map, value.geometry);
         const { geometry, ...properties } = value;
         setFeatureHighlight(
-          mapId,
           {
             type: 'Feature',
             geometry,
@@ -136,8 +136,9 @@ export function createMenuItemShowDetailInfoSource() {
         layer,
         (dataset) => dataset.type == 'source',
       ) as IMapboxSourceView | null;
-      if (source)
-        addComponent(mapId, {
+      if (source) {
+        const { addComponent } = useMapDatasetComponent(mapId);
+        addComponent({
           component: () => LayerDetail,
           attr: {
             item: source.getDataInfo(),
@@ -146,6 +147,7 @@ export function createMenuItemShowDetailInfoSource() {
           },
           check: 'detail',
         });
+      }
     },
   });
 }
@@ -155,7 +157,8 @@ export function createMenuItemStyleEdit() {
     name: 'Edit style',
     icon: mdiFormatLineStyle,
     click: (layer, mapId) => {
-      addComponent(mapId, {
+      const { addComponent } = useMapDatasetComponent(mapId);
+      addComponent({
         component: () => StyleControl,
         attr: {
           item: layer,
@@ -166,7 +169,7 @@ export function createMenuItemStyleEdit() {
 }
 
 export function createMenuItemToggleShow(
-  menu: Partial<MenuItemBottomOrExtra<any>>,
+  menu: Partial<MenuItemBottomOrExtra<any>> = {},
 ) {
   return createMenuItem({
     type: 'item',
diff --git a/libs/map/dataset/src/modules/ComponentManagementControl/ComponentManagementControl.vue b/libs/map/dataset/src/modules/ComponentManagementControl/ComponentManagementControl.vue
index 81c0e39..5dc0c8c 100644
--- a/libs/map/dataset/src/modules/ComponentManagementControl/ComponentManagementControl.vue
+++ b/libs/map/dataset/src/modules/ComponentManagementControl/ComponentManagementControl.vue
@@ -12,9 +12,7 @@ import { useMap, withMapProps } from '@hungpvq/vue-map-core';
 import { computed, getCurrentInstance, ref, watch } from 'vue';
 import {
   type ComponentItem,
-  getAllComponentIds,
-  getComponentStore,
-  removeComponent,
+  useMapDatasetComponent,
 } from '../../store/component';
 
 const instance = getCurrentInstance();
@@ -22,13 +20,15 @@ const props = defineProps({
   ...withMapProps,
 });
 const { mapId } = useMap(props);
-const store = getComponentStore(mapId.value);
+const { getAllComponentIds, getStore, removeComponent } =
+  useMapDatasetComponent(mapId.value);
+const store = getStore();
 
 function onRemoveComponent(item: ComponentItem) {
-  removeComponent(mapId.value, item.id);
+  removeComponent(item.id);
 }
 const storeComponents = computed(() => {
-  return getAllComponentIds(mapId.value)?.value || [];
+  return getAllComponentIds()?.value || [];
 });
 const components = ref<ComponentItem[]>([]);
 // Watch for changes in components and update the view
@@ -39,6 +39,6 @@ watch(
     instance?.proxy?.$forceUpdate();
     // Force update to re-render components
   },
-  { deep: true }
+  { deep: true },
 );
 </script>
diff --git a/libs/map/dataset/src/modules/CreateControl/CreateControl.vue b/libs/map/dataset/src/modules/CreateControl/CreateControl.vue
index 0142a53..454972b 100644
--- a/libs/map/dataset/src/modules/CreateControl/CreateControl.vue
+++ b/libs/map/dataset/src/modules/CreateControl/CreateControl.vue
@@ -15,14 +15,15 @@ import {
   useMap,
 } from '@hungpvq/vue-map-core';
 import { computed, onMounted, ref } from 'vue';
-import { addDataset } from '../../store';
+import { useMapDataset } from '../../store';
 import { ConfigNo } from './config';
 import { LAYER_TYPES, LayerHelper } from './helper';
 const props = defineProps({
   show: Boolean,
 });
-const { mapId, moduleContainerProps, callMap } = useMap(props);
+const { mapId, moduleContainerProps } = useMap(props);
 const { trans } = useLang(mapId.value);
+const { addDataset } = useMapDataset(mapId.value);
 const emit = defineEmits(['update:show']);
 const c_show = computed({
   get() {
@@ -66,9 +67,7 @@ function onAddLayer(form) {
     return;
   }
   let layer = handle(form.config);
-  callMap((map) => {
-    addDataset(map.id, layer);
-  });
+  addDataset(layer);
   reset();
   c_show.value = false;
 }
diff --git a/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue b/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue
index edcbe5c..9269ef0 100644
--- a/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue
+++ b/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue
@@ -16,11 +16,10 @@ import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiCursorPointer, mdiHandPointingUp, mdiSelect } from '@mdi/js';
 import { MapMouseEvent, type PointLike } from 'maplibre-gl';
 import { computed, onMounted, reactive, ref, watch } from 'vue';
-import type { IDataset } from '../../interfaces/dataset.base';
 import type { IIdentifyView, MenuAction } from '../../interfaces/dataset.parts';
 import { handleMultiIdentify } from '../../model';
-import { getAllComponentsByType, getDatasetIds } from '../../store';
-import { setFeatureHighlight } from '../../store/highlight';
+import { useMapDataset } from '../../store';
+import { useMapDatasetHighlight } from '../../store/highlight';
 import MenuItem from './menu/index.vue';
 const path = {
   icon: mdiHandPointingUp,
@@ -32,6 +31,8 @@ const props = defineProps({
   immediately: Boolean,
 });
 const { mapId, moduleContainerProps } = useMap(props);
+const { getAllComponentsByType, getDatasetIds } = useMapDataset(mapId.value);
+const { setFeatureHighlight } = useMapDatasetHighlight(mapId.value);
 const { trans, setLocale } = useLang(mapId.value);
 const { format: formatCoordinate } = useCoordinate(mapId.value);
 setLocale({
@@ -47,14 +48,14 @@ setLocale({
 });
 const views = ref<Array<IIdentifyView>>([]);
 const datasetIds = computed(() => {
-  return getDatasetIds(mapId.value).value;
+  return getDatasetIds().value;
 });
 watch(
   datasetIds,
   () => {
     updateList();
   },
-  { deep: true }
+  { deep: true },
 );
 onMounted(() => {
   updateList();
@@ -66,8 +67,7 @@ function updateList() {
   getViewFromStore();
 }
 function getViewFromStore() {
-  views.value =
-    getAllComponentsByType<IIdentifyView>(mapId.value, 'identify') || [];
+  views.value = getAllComponentsByType<IIdentifyView>('identify') || [];
 }
 const hasViews = computed(() => {
   return views.value.length > 0;
@@ -83,7 +83,7 @@ const {
   isActive: isEventClickBox,
 } = useEventMap(
   mapId.value,
-  (new EventBboxRanger() as any).setHandler(onBboxSelect)
+  (new EventBboxRanger() as any).setHandler(onBboxSelect),
 );
 
 const origin = reactive({ latitude: 0, longitude: 0 });
@@ -115,7 +115,7 @@ const hasSelectedPoint = computed(() => {
   return origin.latitude !== 0 || origin.longitude !== 0;
 });
 function onSelectFeatures(
-  features: { identify: IIdentifyView; features: any[] }[]
+  features: { identify: IIdentifyView; features: any[] }[],
 ) {
   result.items = features;
   if (
@@ -137,7 +137,7 @@ async function onGetFeatures(pointOrBox?: PointLike | [PointLike, PointLike]) {
     const features = await handleMultiIdentify(
       cUsedIdentify.value,
       mapId.value,
-      pointOrBox
+      pointOrBox,
     );
     const elapsedTime = Date.now() - startTime;
     if (elapsedTime < 500) {
@@ -155,7 +155,7 @@ function toggleShow() {
 }
 function close() {
   onRemoveIdentify();
-  setFeatureHighlight(mapId.value, undefined, 'identify');
+  setFeatureHighlight(undefined, 'identify');
   onSelectFeatures([]);
 }
 function onRemoveIdentify() {
@@ -202,7 +202,7 @@ function onRemoveBox() {
 function onMenuAction(
   identify: IIdentifyView,
   menu: MenuAction<IIdentifyView>,
-  item: any
+  item: any,
 ) {
   if (menu.type != 'item' || !identify) {
     return;
diff --git a/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue b/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue
index ba177ee..2c9ae80 100644
--- a/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue
+++ b/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue
@@ -10,21 +10,22 @@ import { computed, onMounted, reactive, ref, watch } from 'vue';
 import type { IDataset } from '../../interfaces/dataset.base';
 import type { IIdentifyView, MenuAction } from '../../interfaces/dataset.parts';
 import { handleMultiIdentifyGetFirst } from '../../model';
-import { getAllComponentsByType, getDatasetIds } from '../../store';
+import { useMapDataset } from '../../store';
 const props = defineProps({
   ...withMapProps,
 });
 const { mapId } = useMap(props);
+const { getAllComponentsByType, getDatasetIds } = useMapDataset(mapId.value);
 const views = ref<Array<IIdentifyView & IDataset>>([]);
 const datasetIds = computed(() => {
-  return getDatasetIds(mapId.value).value;
+  return getDatasetIds().value;
 });
 watch(
   datasetIds,
   () => {
     updateList();
   },
-  { deep: true }
+  { deep: true },
 );
 onMounted(() => {
   updateList();
@@ -34,8 +35,7 @@ function updateList() {
 }
 function getViewFromStore() {
   views.value =
-    getAllComponentsByType<IIdentifyView & IDataset>(mapId.value, 'identify') ||
-    [];
+    getAllComponentsByType<IIdentifyView & IDataset>('identify') || [];
 }
 const {
   add: addEventClick,
@@ -71,7 +71,7 @@ async function onGetFeatures(pointOrBox?: PointLike | [PointLike, PointLike]) {
     const feature = await handleMultiIdentifyGetFirst(
       cUsedIdentify.value,
       mapId.value,
-      pointOrBox
+      pointOrBox,
     );
     onSelectFeatures(feature);
   } finally {
@@ -82,7 +82,7 @@ async function onGetFeatures(pointOrBox?: PointLike | [PointLike, PointLike]) {
 function onMenuAction(
   identify: IIdentifyView & IDataset,
   menu: MenuAction<IIdentifyView & IDataset>,
-  item: any
+  item: any,
 ) {
   if (menu.type != 'item' || !identify) {
     return;
diff --git a/libs/map/dataset/src/modules/LayerControl/part/LayerList.vue b/libs/map/dataset/src/modules/LayerControl/part/LayerList.vue
index 9d44e1b..8dd614a 100644
--- a/libs/map/dataset/src/modules/LayerControl/part/LayerList.vue
+++ b/libs/map/dataset/src/modules/LayerControl/part/LayerList.vue
@@ -19,15 +19,11 @@ import type {
   MenuAction,
 } from '../../../interfaces';
 import { applyToAllLeaves, runAllComponentsWithCheck } from '../../../model';
-import {
-  getAllComponentsByType,
-  getDatasetIds,
-  removeComponent,
-} from '../../../store';
+import { useMapDataset } from '../../../store';
 import { isMapboxLayerView } from '../../../utils/check';
+import ButtonToggleShowALl from './ButtonToggleAllShow.vue';
 import DraggableGroupList from './DraggableList/draggable-list.vue';
 import LayerItem from './item/layer-item.vue';
-import ButtonToggleShowALl from './ButtonToggleAllShow.vue';
 const props = defineProps({
   ...withMapProps,
   disabledDrag: Boolean,
@@ -50,9 +46,11 @@ const path = {
   layer: { create: mdiPlus },
 };
 const { callMap, mapId } = useMap(props);
+const { getAllComponentsByType, getDatasetIds, removeComponent } =
+  useMapDataset(mapId.value);
 const views = ref<Array<IListViewUI>>([]);
 const datasetIds = computed(() => {
-  return getDatasetIds(mapId.value).value;
+  return getDatasetIds().value;
 });
 watch(
   datasetIds,
@@ -99,7 +97,7 @@ function onRemoveGroupLayer(group: IGroupListViewUI<IListViewUI>) {
     return;
   }
   group.children.forEach((view: IListViewUI) => {
-    removeComponent(mapId.value, view);
+    removeComponent(view);
   });
 }
 function onUpdateLayer(view: IListViewUI) {
@@ -120,7 +118,7 @@ function onUpdateLayer(view: IListViewUI) {
 }
 function onRemoveLayer(view: IListViewUI) {
   if (!view) return;
-  removeComponent(mapId.value, view);
+  removeComponent(view);
   updateList();
 }
 function updateList() {
@@ -134,7 +132,7 @@ function updateTree() {
 }
 function getViewFromStore() {
   views.value =
-    getAllComponentsByType<IListViewUI>(mapId.value, 'list').sort(
+    getAllComponentsByType<IListViewUI>('list').sort(
       (a, b) => b.index - a.index,
     ) || [];
 }
@@ -146,7 +144,7 @@ function onRemoveAllLayer() {
     return;
   }
   views.value.forEach((view) => {
-    removeComponent(mapId.value, view);
+    removeComponent(view);
   });
   updateList();
 }
diff --git a/libs/map/dataset/src/modules/LayerControl/part/LayerListReadonly.vue b/libs/map/dataset/src/modules/LayerControl/part/LayerListReadonly.vue
index 5a0325c..73933bb 100644
--- a/libs/map/dataset/src/modules/LayerControl/part/LayerListReadonly.vue
+++ b/libs/map/dataset/src/modules/LayerControl/part/LayerListReadonly.vue
@@ -18,7 +18,7 @@ import type {
   MenuAction,
 } from '../../../interfaces';
 import { applyToAllLeaves, runAllComponentsWithCheck } from '../../../model';
-import { getAllComponentsByType } from '../../../store';
+import { useMapDataset } from '../../../store';
 import { isMapboxLayerView } from '../../../utils/check';
 import { convertListToTree, Group, Item, TreeItem } from '../../../utils/tree';
 import RecursiveList from '../../List/RecursiveList.vue';
@@ -37,6 +37,7 @@ const path = {
   layer: { create: mdiPlus },
 };
 const { callMap, mapId } = useMap(props);
+const { getAllComponentsByType } = useMapDataset(mapId.value);
 const views = ref<Array<IListViewUI>>([]);
 onMounted(() => {
   updateList();
@@ -56,7 +57,7 @@ function onUpdateLayer(view: IListViewUI) {
             dataset.setOpacity(map, view.opacity);
           }
         },
-      ]
+      ],
     );
   });
 }
@@ -76,8 +77,8 @@ function updateTree() {
 }
 function getViewFromStore() {
   views.value =
-    getAllComponentsByType<IListViewUI>(mapId.value, 'list').sort(
-      (a, b) => b.index - a.index
+    getAllComponentsByType<IListViewUI>('list').sort(
+      (a, b) => b.index - a.index,
     ) || [];
 }
 const contextMenuRef = ref<
@@ -122,7 +123,7 @@ function onLayerAction({
   if (!action) return;
   if (action.type !== 'item') return;
   if (!item) return;
-  action.click(item, mapId.value, item);
+  if ('click' in action) action.click(item, mapId.value, item);
 }
 </script>
 <template lang="">
diff --git a/libs/map/dataset/src/modules/LayerDetail/LayerDetail.vue b/libs/map/dataset/src/modules/LayerDetail/LayerDetail.vue
index 6704d3c..e9fe28e 100644
--- a/libs/map/dataset/src/modules/LayerDetail/LayerDetail.vue
+++ b/libs/map/dataset/src/modules/LayerDetail/LayerDetail.vue
@@ -7,7 +7,7 @@ export default {
 <script setup>
 import { DraggableItemPopup } from '@hungpvq/vue-draggable';
 import { ModuleContainer, useLang, useMap } from '@hungpvq/vue-map-core';
-import { setFeatureHighlight } from '../../store';
+import { useMapDatasetHighlight } from '../../store';
 import TableTdLayer from './table-td-layer.vue';
 defineProps({
   item: {},
@@ -18,6 +18,7 @@ defineProps({
   },
 });
 const { mapId } = useMap();
+const { setFeatureHighlight } = useMapDatasetHighlight(mapId.value);
 const { trans } = useLang(mapId.value);
 const emit = defineEmits(['close']);
 function onUpdateShow(val) {
@@ -26,7 +27,7 @@ function onUpdateShow(val) {
   }
 }
 function onClose() {
-  setFeatureHighlight(mapId.value, undefined, 'detail');
+  setFeatureHighlight(undefined, 'detail');
 }
 </script>
 <template>
diff --git a/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue b/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue
index acf1a41..4e39577 100644
--- a/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue
+++ b/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue
@@ -15,10 +15,7 @@ import { Marker } from 'maplibre-gl';
 import { computed, watch } from 'vue';
 import { IMapboxLayerView } from '../../interfaces';
 import { findSiblingOrNearestLeaf } from '../../model/dataset.visitors';
-import {
-  getDatesetHighlight,
-  getFeatureHighlight,
-} from '../../store/highlight';
+import { useMapDatasetHighlight } from '../../store/highlight';
 
 const props = defineProps({
   ...withMapProps,
@@ -39,14 +36,17 @@ const sourceId = 'source-highlighted';
 const layerId = 'layer-highlighted';
 let marker: Marker | undefined = undefined;
 const { mapId, callMap } = useMap(props);
+const { getFeatureHighlight, getDatesetHighlight } = useMapDatasetHighlight(
+  mapId.value,
+);
 
 const storeFeature = computed(() => {
-  return getFeatureHighlight(mapId.value)?.value;
+  return getFeatureHighlight();
 });
 
 const updateSource = (
   map: MapSimple,
-  geojsonData?: GeoJSON.Feature<GeoJSON.Geometry>
+  geojsonData?: GeoJSON.Feature<GeoJSON.Geometry>,
 ) => {
   const source = map.getSource(sourceId) as GeoJSONSource;
   if (source) {
@@ -54,7 +54,7 @@ const updateSource = (
       geojsonData || {
         type: 'FeatureCollection' as const,
         features: [],
-      }
+      },
     );
   } else {
     map.addSource(sourceId, {
@@ -82,7 +82,7 @@ const updateLayer = (map: MapSimple) => {
 
 const updateMarker = (
   map: MapSimple,
-  geojsonData: GeoJSONSourceSpecification['data']
+  geojsonData: GeoJSONSourceSpecification['data'],
 ) => {
   marker?.remove();
   marker = undefined;
@@ -108,11 +108,11 @@ const updateMarker = (
 };
 
 function updateHighlight(geojsonData?: GeoJSON.Feature<GeoJSON.Geometry>) {
-  const dataset = getDatesetHighlight(mapId.value);
+  const dataset = getDatesetHighlight();
   if (dataset) {
     const source = findSiblingOrNearestLeaf(
       dataset,
-      (dataset) => dataset.type == 'layer'
+      (dataset) => dataset.type == 'layer',
     ) as unknown as IMapboxLayerView;
     if (source && 'hightLight' in source) {
       callMap((map: MapSimple) => {
@@ -131,8 +131,8 @@ function updateHighlight(geojsonData?: GeoJSON.Feature<GeoJSON.Geometry>) {
 watch(
   storeFeature,
   () => {
-    updateHighlight(storeFeature.value);
+    updateHighlight(storeFeature.value?.value);
   },
-  { deep: true }
+  { deep: true },
 );
 </script>
diff --git a/libs/map/dataset/src/store/component.ts b/libs/map/dataset/src/store/component.ts
index 11fb9f5..d37cf14 100644
--- a/libs/map/dataset/src/store/component.ts
+++ b/libs/map/dataset/src/store/component.ts
@@ -1,5 +1,5 @@
 import { logHelper } from '@hungpvq/shared-map';
-import { addStore, addToQueue, getStore } from '@hungpvq/vue-map-core';
+import { defineStore } from '@hungpvq/shared-store';
 import type { Ref } from 'vue';
 import { ref } from 'vue';
 import { logger } from '../logger';
@@ -24,64 +24,61 @@ function generateId(prefix = 'component'): string {
     .substring(2, 11)}`;
 }
 
-function initMapStore(mapId: string) {
-  logHelper(logger, mapId, 'store-component').debug('init');
-  const components: ComponentItem[] = [];
-  const componentIds = ref<string[]>([]);
+export const useMapDatasetComponentStore = (mapId: string) =>
+  defineStore<MapDatasetComponentStore>(['map:core', mapId, KEY], () => {
+    logHelper(logger, mapId, 'store').debug('init');
+    const components: ComponentItem[] = [];
+    const componentIds = ref<string[]>([]);
+    return {
+      components,
+      componentIds,
+    };
+  })();
 
-  const store: MapDatasetComponentStore = {
-    components,
-    componentIds,
-  };
-
-  addStore<MapDatasetComponentStore>(mapId, KEY, store);
-}
-
-addToQueue(KEY, initMapStore);
-
-export function getComponentStore(mapId: string) {
-  return getStore<MapDatasetComponentStore>(mapId, KEY);
-}
-export function getAllComponentIds(mapId: string) {
-  return getComponentStore(mapId)?.componentIds;
-}
-
-export function addComponent(
-  mapId: string,
-  component: Omit<ComponentItem, 'id'>,
-) {
-  const store = getComponentStore(mapId);
-  if (!store) return;
+export const useMapDatasetComponent = (mapId: string) => {
+  const store = useMapDatasetComponentStore(mapId);
+  function getStore() {
+    return store;
+  }
+  function getAllComponentIds() {
+    return store.componentIds;
+  }
+  function addComponent(component: Omit<ComponentItem, 'id'>) {
+    if (!store) return;
 
-  logHelper(logger, mapId, 'store-component').debug('addComponent', {
-    component,
-    store,
-  });
-  if (component.check) {
-    const index = store.components.findIndex((x) => x.check == component.check);
-    if (index >= 0) {
-      const id = store.components[index].id;
-      Object.assign(store.components[index], component);
-      store.componentIds.value.splice(index, 1);
-      store.componentIds.value.push(id);
-      return id;
+    logHelper(logger, mapId, 'store-component').debug('addComponent', {
+      component,
+      store,
+    });
+    if (component.check) {
+      const index = store.components.findIndex(
+        (x) => x.check == component.check,
+      );
+      if (index >= 0) {
+        const id = store.components[index].id;
+        Object.assign(store.components[index], component);
+        store.componentIds.value.splice(index, 1);
+        store.componentIds.value.push(id);
+        return id;
+      }
     }
+    const id = generateId();
+    store.components.push({
+      ...component,
+      id,
+    });
+    store.componentIds.value.push(id);
+    return id;
   }
-  const id = generateId();
-  store.components.push({
-    ...component,
-    id,
-  });
-  store.componentIds.value.push(id);
-  return id;
-}
-export function removeComponent(mapId: string, id: string) {
-  const store = getComponentStore(mapId);
-  if (!store) return;
-  logHelper(logger, mapId, 'store-component').debug('removeComponent', {
-    id,
-    store,
-  });
-  store.components = store.components.filter((x) => x.id !== id);
-  store.componentIds.value = store.componentIds.value.filter((x) => x !== id);
-}
+  function removeComponent(id: string) {
+    if (!store) return;
+    logHelper(logger, mapId, 'store-component').debug('removeComponent', {
+      id,
+      store,
+    });
+    store.components = store.components.filter((x) => x.id !== id);
+    store.componentIds.value = store.componentIds.value.filter((x) => x !== id);
+  }
+
+  return { getStore, getAllComponentIds, addComponent, removeComponent };
+};
diff --git a/libs/map/dataset/src/store/highlight.ts b/libs/map/dataset/src/store/highlight.ts
index 170dece..7c55ed2 100644
--- a/libs/map/dataset/src/store/highlight.ts
+++ b/libs/map/dataset/src/store/highlight.ts
@@ -1,5 +1,6 @@
 import { logHelper, type MapSimple } from '@hungpvq/shared-map';
-import { addStore, addToQueue, getMap, getStore } from '@hungpvq/vue-map-core';
+import { defineStore } from '@hungpvq/shared-store';
+import { useMapStore } from '@hungpvq/vue-map-core';
 import type { Ref } from 'vue';
 import { ref } from 'vue';
 import type { IDataset, IMapboxLayerView } from '../interfaces';
@@ -14,76 +15,81 @@ export type MapDatasetHighlightStore = {
   dataset?: IDataset;
 };
 
-function initMapStore(mapId: string) {
-  logHelper(logger, mapId, 'store-highlight').debug('init');
-  const store: MapDatasetHighlightStore = {
-    feature: ref(undefined),
-    source: ref(undefined),
-    dataset: undefined,
-  };
-
-  addStore<MapDatasetHighlightStore>(mapId, KEY, store);
-}
-
-addToQueue(KEY, initMapStore);
-
-export function getDatasetHighlightStore(mapId: string) {
-  return getStore<MapDatasetHighlightStore>(mapId, KEY);
-}
-
-export function setFeatureHighlight(
-  mapId: string,
-  feature: GeoJSON.Feature<GeoJSON.Geometry> | undefined,
-  source: string,
-  dataset?: IDataset,
-) {
-  const store = getDatasetHighlightStore(mapId);
-  if (!store) return;
+export const useMapDatasetHighlightStore = (mapId: string) =>
+  defineStore<MapDatasetHighlightStore>(
+    ['map:core', mapId, 'store-highlight'],
+    () => {
+      logHelper(logger, mapId, 'store').debug('init');
+      return {
+        feature: ref(undefined),
+        source: ref(undefined),
+        dataset: undefined,
+      };
+    },
+  )();
+export const useMapDatasetHighlight = (mapId: string) => {
+  const store = useMapDatasetHighlightStore(mapId);
+  const { getMap } = useMapStore(mapId);
+  function getStore() {
+    return store;
+  }
+  function setFeatureHighlight(
+    feature: GeoJSON.Feature<GeoJSON.Geometry> | undefined,
+    source: string,
+    dataset?: IDataset,
+  ) {
+    if (!store) return;
 
-  logHelper(logger, mapId, 'store-highlight').debug('setFeatureHighlight', {
-    store,
-    feature,
-    source,
-    dataset,
-  });
-  // If setting from same source source and feature exists, clear it
-  if (!feature && store.source.value === source && store.feature.value) {
-    store.feature.value = undefined;
-    store.source.value = undefined;
-    if (store.dataset) {
-      const source = findSiblingOrNearestLeaf(
-        store.dataset,
-        (dataset) => dataset.type == 'layer',
-      ) as unknown as IMapboxLayerView;
-      if (source && 'hightLight' in source) {
-        getMap(mapId, (map: MapSimple) => {
-          source.hightLight?.(map, undefined);
-        });
-        return;
+    logHelper(logger, mapId, 'store-highlight').debug('setFeatureHighlight', {
+      store,
+      feature,
+      source,
+      dataset,
+    });
+    // If setting from same source source and feature exists, clear it
+    if (!feature && store.source.value === source && store.feature.value) {
+      store.feature.value = undefined;
+      store.source.value = undefined;
+      if (store.dataset) {
+        const source = findSiblingOrNearestLeaf(
+          store.dataset,
+          (dataset) => dataset.type == 'layer',
+        ) as unknown as IMapboxLayerView;
+        if (source && 'hightLight' in source) {
+          getMap((map: MapSimple) => {
+            source.hightLight?.(map, undefined);
+          });
+          return;
+        }
       }
+      store.dataset = undefined;
+      return;
     }
-    store.dataset = undefined;
-    return;
+    store.dataset = dataset;
+    store.feature.value = feature;
+    store.source.value = source;
   }
-  store.dataset = dataset;
-  store.feature.value = feature;
-  store.source.value = source;
-}
 
-export function getFeatureHighlight(mapId: string) {
-  const store = getDatasetHighlightStore(mapId);
-  if (!store) return;
-  return store.feature;
-}
+  function getFeatureHighlight() {
+    if (!store) return;
+    return store.feature;
+  }
+
+  function getHighlightSource() {
+    if (!store) return;
+    return store.source;
+  }
 
-export function getHighlightSource(mapId: string) {
-  const store = getDatasetHighlightStore(mapId);
-  if (!store) return;
-  return store.source;
-}
+  function getDatesetHighlight() {
+    if (!store) return;
+    return store.dataset;
+  }
 
-export function getDatesetHighlight(mapId: string) {
-  const store = getDatasetHighlightStore(mapId);
-  if (!store) return;
-  return store.dataset;
-}
+  return {
+    getStore,
+    setFeatureHighlight,
+    getHighlightSource,
+    getDatesetHighlight,
+    getFeatureHighlight,
+  };
+};
diff --git a/libs/map/dataset/src/store/index.ts b/libs/map/dataset/src/store/index.ts
index 44ea226..8d87233 100644
--- a/libs/map/dataset/src/store/index.ts
+++ b/libs/map/dataset/src/store/index.ts
@@ -1,5 +1,6 @@
 import { logHelper, type MapSimple } from '@hungpvq/shared-map';
-import { addStore, addToQueue, getMap, getStore } from '@hungpvq/vue-map-core';
+import { defineStore } from '@hungpvq/shared-store';
+import { useMapStore } from '@hungpvq/vue-map-core';
 import type { Ref } from 'vue';
 import { ref } from 'vue';
 import type { IListViewUI } from '../interfaces';
@@ -16,100 +17,108 @@ export type MapLayerStore = {
   datasets: Record<string, IDataset>;
   datasetIds: Ref<string[]>;
 };
-export function initMapLayer(mapId: string) {
-  logHelper(logger, mapId, 'store').debug('init');
-  addStore<MapLayerStore>(mapId, KEY, { datasets: {}, datasetIds: ref([]) });
-}
-addToQueue(KEY, initMapLayer);
-export async function addDataset(mapId: string, layer: IDataset) {
-  const store = getStoreDataset(mapId);
-  if (!store) {
-    return;
+export const useMapDatasetStore = (mapId: string) =>
+  defineStore<MapLayerStore>(['map:core', mapId, KEY], () => {
+    logHelper(logger, mapId, 'store').debug('init');
+    return { datasets: {}, datasetIds: ref([]) };
+  })();
+
+export const useMapDataset = (mapId: string) => {
+  const store = useMapDatasetStore(mapId);
+  const { getMap } = useMapStore(mapId);
+  async function addDataset(layer: IDataset) {
+    if (!store) {
+      return;
+    }
+    const currentLists = getAllComponentsByType<IListViewUI>('list');
+    const allComponentsOfType = findAllComponentsByType(
+      layer,
+      'list',
+    ) as Array<IListViewUI>;
+    store.datasets[layer.id] = layer;
+    allComponentsOfType.forEach((list, i) => {
+      list.index = i + 1 + currentLists.length;
+    });
+    store.datasetIds.value.push(layer.id);
+    getMap(async (map: MapSimple) => {
+      applyToAllLeaves(layer, [
+        (leaf) => {
+          if (isDatasetMap(leaf)) {
+            leaf.addToMap(map);
+          }
+        },
+      ]);
+    });
+    logHelper(logger, mapId, 'store').debug('addDataset', {
+      store,
+      dataset: layer,
+    });
   }
-  const currentLists = getAllComponentsByType<IListViewUI>(mapId, 'list');
-  const allComponentsOfType = findAllComponentsByType(
-    layer,
-    'list',
-  ) as Array<IListViewUI>;
-  store.datasets[layer.id] = layer;
-  allComponentsOfType.forEach((list, i) => {
-    list.index = i + 1 + currentLists.length;
-  });
-  store.datasetIds.value.push(layer.id);
-  getMap(mapId, async (map: MapSimple) => {
-    applyToAllLeaves(layer, [
-      (leaf) => {
-        if (isDatasetMap(leaf)) {
-          leaf.addToMap(map);
-        }
-      },
-    ]);
-  });
-  logHelper(logger, mapId, 'store').debug('addDataset', {
-    store,
-    dataset: layer,
-  });
-}
-export function removeDataset(mapId: string, layer: IDataset) {
-  const store = getStoreDataset(mapId);
-  if (!store) {
-    return;
+  function removeDataset(mapId: string, layer: IDataset) {
+    if (!store) {
+      return;
+    }
+    delete store.datasets[layer.id];
+    getMap(async (map: MapSimple) => {
+      applyToAllLeaves(layer, [
+        (leaf) => {
+          if (isDatasetMap(leaf)) {
+            leaf.removeFromMap(map);
+          }
+        },
+      ]);
+    });
+    logHelper(logger, mapId, 'store').debug('removeDataset', {
+      store,
+      dataset: layer,
+    });
   }
-  delete store.datasets[layer.id];
-  getMap(mapId, async (map: MapSimple) => {
-    applyToAllLeaves(layer, [
-      (leaf) => {
-        if (isDatasetMap(leaf)) {
-          leaf.removeFromMap(map);
-        }
-      },
-    ]);
-  });
-  logHelper(logger, mapId, 'store').debug('removeDataset', {
-    store,
-    dataset: layer,
-  });
-}
-export function removeComponent(mapId: string, component: IDataset) {
-  logHelper(logger, mapId, 'store').debug('removeComponent', component);
-  const parent = component.getParent() || component;
-  getMap(mapId, async (map: MapSimple) => {
-    if (isDatasetMap(component)) {
-      component.removeFromMap(map);
+  function removeComponent(component: IDataset) {
+    logHelper(logger, mapId, 'store').debug('removeComponent', component);
+    const parent = component.getParent() || component;
+    getMap(async (map: MapSimple) => {
+      if (isDatasetMap(component)) {
+        component.removeFromMap(map);
+      }
+      applyToAllLeaves(parent, [
+        (leaf) => {
+          if (isDatasetMap(leaf)) {
+            leaf.removeFromMap(map);
+          }
+        },
+      ]);
+    });
+    // Remove component from parent
+    if (parent && isComposite(parent)) {
+      parent.remove(component);
     }
-    applyToAllLeaves(parent, [
-      (leaf) => {
-        if (isDatasetMap(leaf)) {
-          leaf.removeFromMap(map);
-        }
-      },
-    ]);
-  });
-  // Remove component from parent
-  if (parent && isComposite(parent)) {
-    parent.remove(component);
   }
-}
-export function getStoreDataset(mapId: string) {
-  const store = getStore<MapLayerStore>(mapId, KEY);
-  return store;
-}
-export function getAllComponentsByType<T>(mapId: string, targetType: string) {
-  const store = getStoreDataset(mapId);
-  if (!store) {
-    return [];
+  function getStoreDataset() {
+    return store;
+  }
+  function getAllComponentsByType<T>(targetType: string) {
+    if (!store) {
+      return [];
+    }
+    const views: T[] = [];
+    (Object.values(store.datasets || {}) || []).forEach((dataset) => {
+      const allComponentsOfType = findAllComponentsByType(dataset, targetType);
+      views.push(...(allComponentsOfType as T[]));
+    });
+    return views;
   }
-  const views: T[] = [];
-  (Object.values(store.datasets || {}) || []).forEach((dataset) => {
-    const allComponentsOfType = findAllComponentsByType(dataset, targetType);
-    views.push(...(allComponentsOfType as T[]));
-  });
-  return views;
-}
 
-export function getDatasetIds(mapId: string) {
-  const store = getStore<MapLayerStore>(mapId, KEY);
-  return store.datasetIds;
-}
+  function getDatasetIds() {
+    return store.datasetIds;
+  }
+  return {
+    addDataset,
+    getDatasetIds,
+    removeComponent,
+    removeDataset,
+    getStoreDataset,
+    getAllComponentsByType,
+  };
+};
 export * from './component';
 export * from './highlight';
diff --git a/libs/map/dataset/vite.config.ts b/libs/map/dataset/vite.config.ts
index f05cdaf..483e662 100644
--- a/libs/map/dataset/vite.config.ts
+++ b/libs/map/dataset/vite.config.ts
@@ -55,6 +55,7 @@ export default defineConfig({
         '@hungpvq/shared-file',
         'lodash',
         '@hungpvq/shared-log',
+        '@hungpvq/shared-store',
       ],
       output: {
         // Provide global variables to use in the UMD build
diff --git a/libs/map/draw/package.json b/libs/map/draw/package.json
index 7dc6c2f..0691114 100644
--- a/libs/map/draw/package.json
+++ b/libs/map/draw/package.json
@@ -30,6 +30,7 @@
     "@hungpvq/shared": ">=0.0.1",
     "@hungpvq/shared-map": ">=0.0.1",
     "@hungpvq/vue-map-core": ">=0.0.1",
+    "@hungpvq/shared-store": ">=0.0.1",
     "@hungpvq/shared-log": ">=0.0.1",
     "@jamescoyle/vue-icon": "^0.1.2",
     "@mapbox/mapbox-gl-draw": ">=1.4.3",
diff --git a/libs/map/draw/src/modules/DrawControl/DrawControl.vue b/libs/map/draw/src/modules/DrawControl/DrawControl.vue
index f541f04..4999884 100644
--- a/libs/map/draw/src/modules/DrawControl/DrawControl.vue
+++ b/libs/map/draw/src/modules/DrawControl/DrawControl.vue
@@ -26,12 +26,22 @@ import {
 import { MapMouseEvent } from 'maplibre-gl';
 import { computed, ref, watch } from 'vue';
 import { DrawingTypeName } from '..';
-import {
+import { useMapDraw } from '../../store';
+import type { DrawOption } from '../../types';
+import layers from './theme';
+const props = defineProps({
+  ...withMapProps,
+  drawOptions: Object,
+});
+const drawOptions = props.drawOptions as DrawOption;
+const { mapId, moduleContainerProps, callMap } = useMap(props);
+const {
+  initDrawControl,
   activateDraw,
+  deactivateDraw,
   callDraw,
   cancelDraw,
   checkAndCallDone,
-  deactivateDraw,
   draw,
   getDrawAction,
   getDrawControl,
@@ -39,20 +49,11 @@ import {
   getDrawIsRegisterId,
   getDrawIsShow,
   getDrawSupport,
-  initDrawControl,
   saveDraw,
   setFeature,
-} from '../../store';
-import type { DrawOption } from '../../types';
-import layers from './theme';
-const props = defineProps({
-  ...withMapProps,
-  drawOptions: Object,
-});
-const drawOptions = props.drawOptions as DrawOption;
-const { mapId, moduleContainerProps, callMap } = useMap(props);
+} = useMapDraw(mapId.value);
 const isShow = computed(() => {
-  return getDrawIsShow(mapId.value);
+  return getDrawIsShow();
 });
 watch(isShow, (newValue) => {
   callMap((map) => {
@@ -81,26 +82,26 @@ let control = new MapboxDraw({
 });
 function onDrawCreated(event: DrawCreateEvent) {
   for (const feature of event.features) {
-    setFeature(mapId.value, 'added', feature);
+    setFeature('added', feature);
   }
-  checkAndCallDone(mapId.value, register_id.value!);
+  checkAndCallDone(register_id.value!);
   onSelectMethod('select');
 }
 function onDrawUpdated(event: DrawUpdateEvent) {
   for (const feature of event.features) {
-    setFeature(mapId.value, 'updated', feature);
+    setFeature('updated', feature);
   }
-  checkAndCallDone(mapId.value, register_id.value!);
+  checkAndCallDone(register_id.value!);
   onSelectMethod('select');
 }
 function onDrawDeleted(event: DrawDeleteEvent) {
   for (const feature of event.features) {
-    setFeature(mapId.value, 'deleted', feature);
+    setFeature('deleted', feature);
   }
-  checkAndCallDone(mapId.value, register_id.value!);
+  checkAndCallDone(register_id.value!);
   onSelectMethod('select');
 }
-initDrawControl(mapId.value, control);
+initDrawControl(control);
 const path = {
   add: mdiPlus,
   delete: mdiDeleteOutline,
@@ -124,34 +125,34 @@ function onSelectMethod(value: 'select' | 'delete' | 'create') {
   }
 }
 const register_id = computed(() => {
-  return getDrawIsRegisterId(mapId.value);
+  return getDrawIsRegisterId();
 });
 function onDraw(type: string) {
-  activateDraw(mapId.value, register_id.value!);
-  draw(mapId.value, register_id.value!, type);
+  activateDraw(register_id.value!);
+  draw(register_id.value!, type);
 }
 const isActivated = computed(() => {
-  return getDrawIsActivated(mapId.value);
+  return getDrawIsActivated();
 });
 const drawSupport = computed(() => {
-  return getDrawSupport(mapId.value);
+  return getDrawSupport();
 });
 const isDraw = computed(() => {
   return isActivated.value;
 });
 function onSave() {
-  saveDraw(mapId.value, register_id.value!);
+  saveDraw(register_id.value!);
 }
 function onCancel() {
-  cancelDraw(mapId.value);
+  cancelDraw();
 }
 function close() {
-  deactivateDraw(mapId.value);
+  deactivateDraw();
   removeEventClick();
 }
 async function onMapClick(e: MapMouseEvent) {
-  const action = getDrawAction(mapId.value);
-  const control = getDrawControl(mapId.value);
+  const action = getDrawAction();
+  const control = getDrawControl();
   const features =
     (await (action.getFeatures &&
       action.getFeatures([e.lngLat.lng, e.lngLat.lat]))) || [];
@@ -159,8 +160,8 @@ async function onMapClick(e: MapMouseEvent) {
     case 'select': {
       const feature_ids = control?.add({ type: 'FeatureCollection', features });
       if (feature_ids && feature_ids.length > 0) {
-        activateDraw(mapId.value, register_id.value!);
-        draw(mapId.value, register_id.value!, 'direct_select', undefined, {
+        activateDraw(register_id.value!);
+        draw(register_id.value!, 'direct_select', undefined, {
           featureId: feature_ids[0],
         });
       }
@@ -205,7 +206,7 @@ function onInitDraw() {
   if (!drawOptions) {
     return;
   }
-  callDraw(mapId.value, drawOptions);
+  callDraw(drawOptions);
 }
 </script>
 <template setup>
diff --git a/libs/map/draw/src/modules/InspectControl/InspectControl.vue b/libs/map/draw/src/modules/InspectControl/InspectControl.vue
index 64cfc61..fdcde76 100644
--- a/libs/map/draw/src/modules/InspectControl/InspectControl.vue
+++ b/libs/map/draw/src/modules/InspectControl/InspectControl.vue
@@ -21,7 +21,7 @@ import {
   type StyleSpecification,
 } from 'maplibre-gl';
 import { computed, ref, shallowRef } from 'vue';
-import { getDrawIsShow } from '../../store';
+import { useMapDraw } from '../../store';
 import { brightColor } from './colors';
 import {
   getSourcesFromMap,
@@ -51,13 +51,14 @@ const _popup = shallowRef(
   new Popup({
     closeButton: false,
     closeOnClick: false,
-  })
+  }),
 );
 const { callMap, mapId, moduleContainerProps } = useMap(
   props,
   onInit,
-  onDestroy
+  onDestroy,
 );
+const { getDrawIsShow } = useMapDraw(mapId.value);
 const { trans, setLocaleDefault } = useLang(mapId.value);
 const showInspect = ref(props.showInspectDefault);
 setLocaleDefault({
@@ -72,11 +73,11 @@ const eventMouseMove = new EventMouseMove().setHandler(onMapMouseMove);
 const _popupBlocked = ref(false);
 const { add: addEventClick, remove: removeEventClick } = setEventMap(
   mapId.value,
-  event
+  event,
 );
 const { add: addEventMouseMove, remove: removeEventMouseMove } = setEventMap(
   mapId.value,
-  eventMouseMove
+  eventMouseMove,
 );
 function onMapMouseMove(e: MapMouseEvent) {
   if (showInspect.value) {
@@ -210,14 +211,14 @@ function render(map: MapSimple) {
 function _inspectStyle(map: MapSimple) {
   const coloredLayers = generateColoredLayers(
     sources,
-    props.assignLayerColor as (layerId: string, alpha: number) => string
+    props.assignLayerColor as (layerId: string, alpha: number) => string,
   );
   return props.buildInspectStyle(map.getStyle(), coloredLayers, {
     backgroundColor: props.backgroundColor,
   });
 }
 const isDrawShow = computed(() => {
-  return getDrawIsShow(mapId.value);
+  return getDrawIsShow();
 });
 </script>
 <template>
diff --git a/libs/map/draw/src/store/index.ts b/libs/map/draw/src/store/index.ts
index f5c5135..e5ac68f 100644
--- a/libs/map/draw/src/store/index.ts
+++ b/libs/map/draw/src/store/index.ts
@@ -1,6 +1,6 @@
 import { getUUIDv4 } from '@hungpvq/shared';
 import { logHelper } from '@hungpvq/shared-map';
-import { addStore, addToQueue, getStore } from '@hungpvq/vue-map-core';
+import { defineStore } from '@hungpvq/shared-store';
 import type { Feature, FeatureCollection, GeoJSON } from 'geojson';
 import { reactive } from 'vue';
 import { logger } from '../logger';
@@ -11,251 +11,241 @@ import {
   MapDrawStore,
 } from '../types';
 export const KEY = 'draw';
-export function initMapDraw(mapId: string) {
-  logHelper(logger, mapId, 'store').debug('init');
-  addStore<MapDrawStore>(mapId, KEY, {
-    control: null,
-    state: reactive({
-      activated: false,
-      register_id: undefined,
-      show: false,
-      draw_support: [],
-      cleanAfterDone: false,
-    }),
-    featuresAdded: {},
-    featuresUpdated: {},
-    featuresDeleted: {},
-    action: {},
-  });
-}
-addToQueue(KEY, initMapDraw);
 
-function getDrawStore(map_id: string): MapDrawStore {
-  return getStore<MapDrawStore>(map_id, KEY);
-}
-export const initDrawControl = (map_id: string, control: any) => {
-  logHelper(logger, map_id, 'store').debug('initDrawControl', control);
-  getDrawStore(map_id).control = control;
-};
-
-export const activateDraw = (
-  map_id: string,
-  register_id: string,
-  geojson?: GeoJSON,
-) => {
-  if (!register_id) {
-    throw new Error('Need register id');
-  }
-  logHelper(logger, map_id, 'store').debug(
-    'activateDraw',
-    register_id,
-    geojson,
-  );
-  const store = getDrawStore(map_id);
-  const state = store.state;
-  const control = store.control;
-  state.register_id = register_id;
-  state.activated = true;
-  control.changeMode('simple_select');
-  if (geojson) {
-    control.add(geojson);
-  }
-};
-export const deactivateDraw = (map_id: string) => {
-  logHelper(logger, map_id, 'store').debug('deactivateDraw');
-  const store = getDrawStore(map_id);
-  const control = store.control;
-  const result: DrawSaveFcParams = convertData(store);
-  store.action.save && store.action.save(result.geojson);
-  store.action.close && store.action.close();
-  store.state.draw_support = [];
-  const state = store.state;
-  state.show = false;
-  store.action = {};
-  state.register_id = undefined;
-  state.activated = false;
-  store.callback = undefined;
-  store.featuresAdded = {};
-  store.featuresUpdated = {};
-  store.featuresDeleted = {};
-  control?.deleteAll();
-};
-function checkDrawId(map_id: string, register_id: string) {
-  const store = getDrawStore(map_id);
-  const state = store.state;
-  if (!state.activated) {
-    throw new Error('Need to call activateDraw first');
-  }
-  if (state.register_id && state.register_id !== register_id) {
-    throw new Error('register id not match');
+export const useMapDrawStore = (mapId: string) =>
+  defineStore<MapDrawStore>(['map:core', mapId, KEY], () => {
+    logHelper(logger, mapId, 'store').debug('init');
+    return {
+      control: null,
+      state: reactive({
+        activated: false,
+        register_id: undefined,
+        show: false,
+        draw_support: [],
+        cleanAfterDone: false,
+      }),
+      featuresAdded: {},
+      featuresUpdated: {},
+      featuresDeleted: {},
+      action: {},
+    };
+  })();
+export const useMapDraw = (mapId: string) => {
+  const store = useMapDrawStore(mapId);
+  const initDrawControl = (control: any) => {
+    logHelper(logger, mapId, 'store').debug('initDrawControl', control);
+    store.control = control;
+  };
+  const activateDraw = (register_id: string, geojson?: GeoJSON) => {
+    if (!register_id) {
+      throw new Error('Need register id');
+    }
+    logHelper(logger, mapId, 'store').debug(
+      'activateDraw',
+      register_id,
+      geojson,
+    );
+    const state = store.state;
+    const control = store.control;
+    state.register_id = register_id;
+    state.activated = true;
+    control.changeMode('simple_select');
+    if (geojson) {
+      control.add(geojson);
+    }
+  };
+  const deactivateDraw = () => {
+    logHelper(logger, mapId, 'store').debug('deactivateDraw');
+    const control = store.control;
+    const result: DrawSaveFcParams = convertData(store);
+    store.action.save && store.action.save(result.geojson);
+    store.action.close && store.action.close();
+    store.state.draw_support = [];
+    const state = store.state;
+    state.show = false;
+    store.action = {};
+    state.register_id = undefined;
+    state.activated = false;
+    store.callback = undefined;
+    store.featuresAdded = {};
+    store.featuresUpdated = {};
+    store.featuresDeleted = {};
+    control?.deleteAll();
+  };
+  function checkDrawId(register_id: string) {
+    const state = store.state;
+    if (!state.activated) {
+      throw new Error('Need to call activateDraw first');
+    }
+    if (state.register_id && state.register_id !== register_id) {
+      throw new Error('register id not match');
+    }
   }
-}
-export const draw = (
-  map_id: string,
-  register_id: string,
-  type: string,
-  callback?: DrawSaveFc,
-  options?: any,
-) => {
-  logHelper(logger, map_id, 'store').debug('draw', {
-    register_id,
-    type,
-    callback,
-    options,
-  });
-  const store = getDrawStore(map_id);
-  checkDrawId(map_id, register_id);
-  const control = store.control;
-  store.callback = callback;
-  control.changeMode(type, options);
-};
-function convertData(store: MapDrawStore): DrawSaveFcParams {
-  const control = store.control;
-  const drawControlDeletedFeatures = store.featuresDeleted;
-  const drawControlAddedFeatures = store.featuresAdded;
-  const drawControlUpdatedFeatures = store.featuresUpdated;
-  const result: DrawSaveFcParams = {
-    added: {},
-    updated: {},
-    deleted: drawControlDeletedFeatures,
-    geojson: {
-      type: 'FeatureCollection',
-      features: [],
-    },
+  const draw = (
+    register_id: string,
+    type: string,
+    callback?: DrawSaveFc,
+    options?: any,
+  ) => {
+    logHelper(logger, mapId, 'store').debug('draw', {
+      register_id,
+      type,
+      callback,
+      options,
+    });
+    checkDrawId(register_id);
+    const control = store.control;
+    store.callback = callback;
+    control.changeMode(type, options);
   };
-  const collection = control.getAll() as FeatureCollection;
-  collection.features.forEach((feature) => {
-    const id_feature = feature.id!;
-    if (drawControlAddedFeatures[id_feature]) {
-      result.added[id_feature] = feature;
-      if (!feature.properties) {
-        feature.properties = {};
+  function convertData(store: MapDrawStore): DrawSaveFcParams {
+    const control = store.control;
+    const drawControlDeletedFeatures = store.featuresDeleted;
+    const drawControlAddedFeatures = store.featuresAdded;
+    const drawControlUpdatedFeatures = store.featuresUpdated;
+    const result: DrawSaveFcParams = {
+      added: {},
+      updated: {},
+      deleted: drawControlDeletedFeatures,
+      geojson: {
+        type: 'FeatureCollection',
+        features: [],
+      },
+    };
+    const collection = control.getAll() as FeatureCollection;
+    collection.features.forEach((feature) => {
+      const id_feature = feature.id!;
+      if (drawControlAddedFeatures[id_feature]) {
+        result.added[id_feature] = feature;
+        if (!feature.properties) {
+          feature.properties = {};
+        }
+        feature.properties.id = feature.id;
+      } else if (drawControlUpdatedFeatures[id_feature]) {
+        result.updated[id_feature] = feature;
       }
-      feature.properties.id = feature.id;
-    } else if (drawControlUpdatedFeatures[id_feature]) {
-      result.updated[id_feature] = feature;
-    }
-  });
-  result.geojson = collection;
-  return result;
-}
-export const saveDraw = (
-  map_id: string,
-  register_id: string,
-  callback?: DrawSaveFc,
-) => {
-  const store = getDrawStore(map_id);
-  const state = store.state;
-  const action = store.action;
-  checkDrawId(map_id, register_id);
-
-  if (callback && !(callback instanceof Function)) {
-    throw new Error('Callback is not available');
+    });
+    result.geojson = collection;
+    return result;
   }
-  const result: DrawSaveFcParams = convertData(store);
+  const saveDraw = (register_id: string, callback?: DrawSaveFc) => {
+    const state = store.state;
+    const action = store.action;
+    checkDrawId(register_id);
 
-  logHelper(logger, map_id, 'store').debug('saveDraw', {
-    register_id,
-    result,
-  });
-  if (action.deleteFeatures) {
-    action.deleteFeatures(Object.values(result.deleted));
-  }
-  if (action.addFeatures) {
-    action.addFeatures(Object.values(result.added));
-  }
-  if (action.updateFeatures) {
-    action.updateFeatures(Object.values(result.updated));
-  }
-  if (action.reset) {
-    action.reset();
-  }
+    if (callback && !(callback instanceof Function)) {
+      throw new Error('Callback is not available');
+    }
+    const result: DrawSaveFcParams = convertData(store);
 
-  callback && callback(result);
-  state.activated = false;
-  clearDraw(map_id);
-  // deactivateDraw(map_id);
-};
-export function cancelDraw(map_id: string) {
-  logHelper(logger, map_id, 'store').debug('cancelDraw');
-  const store = getDrawStore(map_id);
-  const state = store.state;
-  clearDraw(map_id);
-  state.activated = false;
-  // deactivateDraw(map_id);
-}
-export const clearDraw = (map_id: string) => {
-  logHelper(logger, map_id, 'store').debug('clearDraw');
-  const store = getDrawStore(map_id);
-  const state = store.state;
-  store.featuresAdded = {};
-  store.featuresAdded = {};
-  store.featuresDeleted = {};
-  if (state.cleanAfterDone) {
-    store.control.deleteAll();
+    logHelper(logger, mapId, 'store').debug('saveDraw', {
+      register_id,
+      result,
+    });
+    if (action.deleteFeatures) {
+      action.deleteFeatures(Object.values(result.deleted));
+    }
+    if (action.addFeatures) {
+      action.addFeatures(Object.values(result.added));
+    }
+    if (action.updateFeatures) {
+      action.updateFeatures(Object.values(result.updated));
+    }
+    if (action.reset) {
+      action.reset();
+    }
+
+    callback && callback(result);
+    state.activated = false;
+    clearDraw();
+    // deactivateDraw(mapId);
+  };
+  function cancelDraw() {
+    logHelper(logger, mapId, 'store').debug('cancelDraw');
+    const state = store.state;
+    clearDraw();
+    state.activated = false;
+    // deactivateDraw(mapId);
   }
-  store.control.changeMode('simple_select');
-};
-export function setFeature(
-  map_id: string,
-  type: 'added' | 'updated' | 'deleted',
-  feature: Feature,
-) {
-  logHelper(logger, map_id, 'store').debug('setFeature', { type, feature });
-  const store = getDrawStore(map_id);
-  switch (type) {
-    case 'added':
-      store.featuresAdded[feature.id!] = true;
-      break;
+  const clearDraw = () => {
+    logHelper(logger, mapId, 'store').debug('clearDraw');
+    const state = store.state;
+    store.featuresAdded = {};
+    store.featuresAdded = {};
+    store.featuresDeleted = {};
+    if (state.cleanAfterDone) {
+      store.control.deleteAll();
+    }
+    store.control.changeMode('simple_select');
+  };
+  function setFeature(type: 'added' | 'updated' | 'deleted', feature: Feature) {
+    logHelper(logger, mapId, 'store').debug('setFeature', { type, feature });
+    switch (type) {
+      case 'added':
+        store.featuresAdded[feature.id!] = true;
+        break;
 
-    case 'updated':
-      if (store.featuresAdded[feature.id!]) return;
-      store.featuresUpdated[feature.id!] = true;
-      break;
-    case 'deleted':
-      if (store.featuresAdded[feature.id!]) return;
-      store.featuresDeleted[feature.id!] = feature;
-      break;
+      case 'updated':
+        if (store.featuresAdded[feature.id!]) return;
+        store.featuresUpdated[feature.id!] = true;
+        break;
+      case 'deleted':
+        if (store.featuresAdded[feature.id!]) return;
+        store.featuresDeleted[feature.id!] = feature;
+        break;
 
-    default:
-      break;
+      default:
+        break;
+    }
   }
-}
-export function checkAndCallDone(map_id: string, register_id: string) {
-  const store = getDrawStore(map_id);
-  if (store.callback) {
-    saveDraw(map_id, register_id, store.callback);
-    store.callback = undefined;
+  function checkAndCallDone(register_id: string) {
+    if (store.callback) {
+      saveDraw(register_id, store.callback);
+      store.callback = undefined;
+    }
+  }
+  function callDraw(option: DrawOption) {
+    logHelper(logger, mapId, 'store').debug('callDraw', { option });
+    const register_id = getUUIDv4();
+    const state = store.state;
+    const action = store.action;
+    state.register_id = register_id;
+    state.show = true;
+    state.cleanAfterDone = !!option.cleanAfterDone;
+    state.draw_support = option.draw_support;
+    action.addFeatures = option.addFeatures;
+    action.updateFeatures = option.updateFeatures;
+    action.deleteFeatures = option.deleteFeatures;
+    action.getFeatures = option.getFeatures;
+    action.reset = option.reset;
+    action.save = option.save;
+    return register_id;
   }
-}
-export function callDraw(map_id: string, option: DrawOption) {
-  logHelper(logger, map_id, 'store').debug('callDraw', { option });
-  const register_id = getUUIDv4();
-  const store = getDrawStore(map_id);
-  const state = store.state;
-  const action = store.action;
-  state.register_id = register_id;
-  state.show = true;
-  state.cleanAfterDone = !!option.cleanAfterDone;
-  state.draw_support = option.draw_support;
-  action.addFeatures = option.addFeatures;
-  action.updateFeatures = option.updateFeatures;
-  action.deleteFeatures = option.deleteFeatures;
-  action.getFeatures = option.getFeatures;
-  action.reset = option.reset;
-  action.save = option.save;
-  return register_id;
-}
 
-export const getDrawIsActivated = (map_id: string) =>
-  getDrawStore(map_id).state.activated;
-export const getDrawSupport = (map_id: string) =>
-  getDrawStore(map_id).state.draw_support;
+  const getDrawIsActivated = () => store.state.activated;
+  const getDrawSupport = () => store.state.draw_support;
+
+  const getDrawIsRegisterId = () => store.state.register_id;
 
-export const getDrawIsRegisterId = (map_id: string) =>
-  getDrawStore(map_id).state.register_id;
+  const getDrawIsShow = () => store.state.show;
+  const getDrawAction = () => store.action;
+  const getDrawControl = () => store.control;
 
-export const getDrawIsShow = (map_id: string) =>
-  getDrawStore(map_id).state.show;
-export const getDrawAction = (map_id: string) => getDrawStore(map_id).action;
-export const getDrawControl = (map_id: string) => getDrawStore(map_id).control;
+  return {
+    initDrawControl,
+    activateDraw,
+    deactivateDraw,
+    callDraw,
+    setFeature,
+    checkAndCallDone,
+    getDrawSupport,
+    cancelDraw,
+    draw,
+    saveDraw,
+    getDrawIsActivated,
+    getDrawIsRegisterId,
+    getDrawIsShow,
+    getDrawAction,
+    getDrawControl,
+  };
+};
diff --git a/libs/map/draw/vite.config.ts b/libs/map/draw/vite.config.ts
index 61f989c..7c77f7f 100644
--- a/libs/map/draw/vite.config.ts
+++ b/libs/map/draw/vite.config.ts
@@ -51,6 +51,7 @@ export default defineConfig({
         '@hungpvq/vue-draggable',
         '@hungpvq/content-menu',
         '@hungpvq/shared-log',
+        '@hungpvq/shared-store',
       ],
       output: {
         // Provide global variables to use in the UMD build
diff --git a/libs/map/measurement/src/modules/MeasurementControl.vue b/libs/map/measurement/src/modules/MeasurementControl.vue
index 49bc372..78411d2 100644
--- a/libs/map/measurement/src/modules/MeasurementControl.vue
+++ b/libs/map/measurement/src/modules/MeasurementControl.vue
@@ -87,17 +87,18 @@ import {
   MapSimple,
   convertGeometry,
   fitBounds,
+  logHelper,
 } from '@hungpvq/shared-map';
 import {
   EventClick,
   MapControlButton,
   MapControlGroupButton,
   ModuleContainer,
-  crsStore,
-  imageStore,
   setEventMap,
   useLang,
   useMap,
+  useMapCrsItems,
+  useMapImage,
   withMapProps,
 } from '@hungpvq/vue-map-core';
 import SvgIcon from '@jamescoyle/vue-icon';
@@ -114,6 +115,7 @@ import {
 } from '@mdi/js';
 import { MapMouseEvent } from 'maplibre-gl';
 import { nextTick, ref } from 'vue';
+import { logger } from '../logger';
 import MeasurementSettingPopup from './MeasurementSettingPopup.vue';
 import {
   MapMarkerView,
@@ -128,10 +130,6 @@ import { FormView } from './helper/_viewForm';
 import imageArrow from './img/arrow.png';
 import imageRounded from './img/rounded.png';
 import { IViewSettingField } from './types';
-import { logger } from '../logger';
-import { logHelper } from '@hungpvq/shared-map';
-const { getCrsItems } = crsStore;
-const { addImage } = imageStore;
 let handler = MeasurementHandle();
 const DEFAULT_COLOR_HIGHLIGHT = '#004E98';
 const props = defineProps({
@@ -160,7 +158,9 @@ const { callMap, mapId, moduleContainerProps } = useMap(
   onInit,
   onDestroy,
 );
+const crsHandle = useMapCrsItems(mapId.value);
 const { trans, setLocaleDefault } = useLang(mapId.value);
+const imageHandle = useMapImage(mapId.value);
 setLocaleDefault({
   map: {
     measurement: {
@@ -216,8 +216,8 @@ const { add: addEventClick, remove: removeEventClick } = setEventMap(
   event,
 );
 function onInit(map: MapSimple) {
-  addImage(map.id!, 'azimuth-arrow', imageArrow, { sdf: true });
-  addImage(map.id!, 'measurment-round', imageRounded, {
+  imageHandle.addImage(map.id!, 'azimuth-arrow', imageArrow, { sdf: true });
+  imageHandle.addImage(map.id!, 'measurment-round', imageRounded, {
     content: [4, 4, 12, 12],
     stretchX: [[6, 10]],
     stretchY: [[6, 10]],
@@ -348,7 +348,7 @@ function onInit(map: MapSimple) {
   handler.addView(markerView);
   handler.addView(formView);
 
-  logHelper(logger, mapId, 'control', 'MeasurementControl').debug(
+  logHelper(logger, mapId.value, 'control', 'MeasurementControl').debug(
     'init',
     handler,
   );
@@ -360,7 +360,7 @@ function onDestroy() {
   clear();
 }
 function onMapClick(event: MapMouseEvent) {
-  logHelper(logger, mapId, 'control', 'MeasurementControl').debug(
+  logHelper(logger, mapId.value, 'control', 'MeasurementControl').debug(
     'onMapClick',
     event,
   );
@@ -382,7 +382,7 @@ function checkMeasureRun(type: string) {
 }
 function onMeasureDistance() {
   if (!checkMeasureRun('distance')) return;
-  logHelper(logger, mapId, 'control', 'MeasurementControl').debug(
+  logHelper(logger, mapId.value, 'control', 'MeasurementControl').debug(
     'setAction',
     'distance',
   );
@@ -391,7 +391,7 @@ function onMeasureDistance() {
 }
 function onMeasureArea() {
   if (!checkMeasureRun('area')) return;
-  logHelper(logger, mapId, 'control', 'MeasurementControl').debug(
+  logHelper(logger, mapId.value, 'control', 'MeasurementControl').debug(
     'setAction',
     'area',
   );
@@ -400,7 +400,7 @@ function onMeasureArea() {
 }
 function onMeasureAzimuth() {
   if (!checkMeasureRun('azimuth')) return;
-  logHelper(logger, mapId, 'control', 'MeasurementControl').debug(
+  logHelper(logger, mapId.value, 'control', 'MeasurementControl').debug(
     'setAction',
     'azimuth',
   );
@@ -409,11 +409,11 @@ function onMeasureAzimuth() {
 }
 function onMeasureMarker() {
   if (!checkMeasureRun('point')) return;
-  logHelper(logger, mapId, 'control', 'MeasurementControl').debug(
+  logHelper(logger, mapId.value, 'control', 'MeasurementControl').debug(
     'setAction',
     'point',
   );
-  handler.setAction(new MeasurePoint(getCrsItems(mapId.value)));
+  handler.setAction(new MeasurePoint(crsHandle.items.value));
   handler.start();
 }
 function toggleSetting() {
diff --git a/libs/map/print/package.json b/libs/map/print/package.json
index 2b3d65c..f7b3089 100644
--- a/libs/map/print/package.json
+++ b/libs/map/print/package.json
@@ -33,6 +33,7 @@
     "@hungpvq/shared-map": ">=0.0.1",
     "@hungpvq/shared-log": ">=0.0.1",
     "file-saver": "^2.0.5",
-    "maplibre-gl": "^5.4.0"
+    "maplibre-gl": "^5.4.0",
+    "@hungpvq/shared-store": ">=0.0.1"
   }
 }
diff --git a/libs/map/print/src/modules/PrintAdvancedControl.vue b/libs/map/print/src/modules/PrintAdvancedControl.vue
index de0c16c..bba3a73 100644
--- a/libs/map/print/src/modules/PrintAdvancedControl.vue
+++ b/libs/map/print/src/modules/PrintAdvancedControl.vue
@@ -20,7 +20,7 @@ import {
 } from '@mdi/js';
 import { saveAs } from 'file-saver';
 import { onBeforeUnmount, ref } from 'vue';
-import { initPrint, type PrintOption } from '../store';
+import { useMapPrint, type PrintOption } from '../store';
 import {
   CrosshairManager,
   PrintableAreaManager,
@@ -68,8 +68,9 @@ const print = ref({
 onBeforeUnmount(() => {
   onClosePrint();
 });
+const { initPrint } = useMapPrint(mapId.value);
 function onInit() {
-  initPrint(mapId.value, {
+  initPrint({
     show: (options) => onShowPrint(options),
     close: () => onClosePrint(),
     save: (cb) => onSave(cb),
@@ -96,7 +97,7 @@ async function onSave(cb?: (image: string) => Promise<void>) {
       print.value.loading = true;
       let image = await exportMapboxWithOptions(
         map,
-        printableArea.getCutSize()
+        printableArea.getCutSize(),
       );
       if (cb) {
         cb(image);
diff --git a/libs/map/print/src/store/index.ts b/libs/map/print/src/store/index.ts
index 0c6cd29..0f661ae 100644
--- a/libs/map/print/src/store/index.ts
+++ b/libs/map/print/src/store/index.ts
@@ -1,5 +1,5 @@
 import { logHelper } from '@hungpvq/shared-map';
-import { addStore, addToQueue, getStore } from '@hungpvq/vue-map-core';
+import { defineStore } from '@hungpvq/shared-store';
 import { logger } from '../logger';
 
 export const KEY = 'print';
@@ -8,52 +8,46 @@ export type PrintOption = {
   orientation: 'portrait' | 'landscape';
   format: 'pdf' | 'png' | 'jpg';
 };
-export type MapEventStore = {
-  show: (props: PrintOption) => void;
-  close: () => void;
-  save: (cb?: (image: string) => Promise<void>) => void;
-  saveAll: (cb?: (image: string) => Promise<void>) => void;
+export type MapPrintStore = {
+  show?: (props: PrintOption) => void;
+  close?: () => void;
+  save?: (cb?: (image: string) => Promise<void>) => void;
+  saveAll?: (cb?: (image: string) => Promise<void>) => void;
 };
-function initMapPrint(mapId: string) {
-  addStore<MapEventStore>(mapId, KEY, undefined);
-}
-addToQueue(KEY, initMapPrint);
-export const initPrint = (
-  mapId: string,
-  { show, close, save, saveAll }: MapEventStore,
-) => {
-  logHelper(logger, mapId, 'store').debug('init');
-  addStore<MapEventStore>(mapId, KEY, { show, close, save, saveAll });
-};
-export function showPrint(
-  mapId: string,
-  options: PrintOption = {
-    ratio: 1,
-    orientation: 'portrait',
-    format: 'png',
-  },
-) {
-  logHelper(logger, mapId, 'store').debug('showPrint', options);
-  const store = getStore<MapEventStore>(mapId, KEY);
-  store.show(options);
-}
-export function closePrint(mapId: string) {
-  const store = getStore<MapEventStore>(mapId, KEY);
-  store.close();
-}
 
-export function savePrint(
-  mapId: string,
-  cb?: (image: string) => Promise<void>,
-) {
-  logHelper(logger, mapId, 'store').debug('savePrint', cb);
-  const store = getStore<MapEventStore>(mapId, KEY);
-  store.save(cb);
-}
-export function saveAllPrint(
-  mapId: string,
-  cb?: (image: string) => Promise<void>,
-) {
-  const store = getStore<MapEventStore>(mapId, KEY);
-  store.saveAll(cb);
+export const useMapPrintStore = (mapId: string) =>
+  defineStore<MapPrintStore>(['map:core', mapId, KEY], () => {
+    logHelper(logger, mapId, 'store').debug('init');
+    return {};
+  })();
+
+export function useMapPrint(mapId: string) {
+  const store = useMapPrintStore(mapId);
+  function initPrint({ show, close, save, saveAll }: MapPrintStore) {
+    store.show = show;
+    store.close = close;
+    store.save = save;
+    store.saveAll = saveAll;
+  }
+  function closePrint() {
+    store.close?.();
+  }
+  function showPrint(
+    options: PrintOption = {
+      ratio: 1,
+      orientation: 'portrait',
+      format: 'png',
+    },
+  ) {
+    store.show?.(options);
+  }
+  function savePrint(cb?: (image: string) => Promise<void>) {
+    logHelper(logger, mapId, 'store').debug('savePrint', cb);
+    store.save?.(cb);
+  }
+  function saveAllPrint(cb?: (image: string) => Promise<void>) {
+    logHelper(logger, mapId, 'store').debug('saveAllPrint', cb);
+    store.saveAll?.(cb);
+  }
+  return { showPrint, closePrint, savePrint, saveAllPrint, initPrint };
 }
diff --git a/libs/map/print/vite.config.ts b/libs/map/print/vite.config.ts
index 4869a2a..d359592 100644
--- a/libs/map/print/vite.config.ts
+++ b/libs/map/print/vite.config.ts
@@ -50,6 +50,7 @@ export default defineConfig({
         '@hungpvq/vue-map-core',
         '@hungpvq/vue-draggable',
         '@hungpvq/shared-log',
+        '@hungpvq/shared-store',
       ],
       output: {
         // Provide global variables to use in the UMD build
diff --git a/libs/share/store/.eslintrc.json b/libs/share/store/.eslintrc.json
new file mode 100644
index 0000000..0af2803
--- /dev/null
+++ b/libs/share/store/.eslintrc.json
@@ -0,0 +1,30 @@
+{
+  "extends": ["../../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/eslint.config.{js,cjs,mjs}"]
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/libs/share/store/README.md b/libs/share/store/README.md
new file mode 100644
index 0000000..0d13b7e
--- /dev/null
+++ b/libs/share/store/README.md
@@ -0,0 +1,11 @@
+# shared-store
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build shared-store` to build the library.
+
+## Running unit tests
+
+Run `nx test shared-store` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/share/store/jest.config.ts b/libs/share/store/jest.config.ts
new file mode 100644
index 0000000..13cce49
--- /dev/null
+++ b/libs/share/store/jest.config.ts
@@ -0,0 +1,10 @@
+export default {
+  displayName: 'shared-store',
+  preset: '../../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../../coverage/libs/share/store',
+};
diff --git a/libs/share/store/package.json b/libs/share/store/package.json
new file mode 100644
index 0000000..4a72598
--- /dev/null
+++ b/libs/share/store/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@hungpvq/shared-store",
+  "version": "0.0.1",
+  "author": {
+    "name": "hung.pv"
+  },
+  "bugs": "https://github.com/hung4564/vue-library/issues",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hung4564/vue-library"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.4",
+    "@vue/reactivity": "^3.5.16"
+  }
+}
diff --git a/libs/share/store/project.json b/libs/share/store/project.json
new file mode 100644
index 0000000..2b2b601
--- /dev/null
+++ b/libs/share/store/project.json
@@ -0,0 +1,33 @@
+{
+  "name": "shared-store",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/share/store/src",
+  "projectType": "library",
+  "release": {
+    "version": {
+      "generatorOptions": {
+        "packageRoot": "dist/{projectRoot}",
+        "currentVersionResolver": "git-tag",
+        "fallbackCurrentVersionResolver": "disk"
+      }
+    }
+  },
+  "tags": ["share", "store"],
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/share/store",
+        "main": "libs/share/store/src/index.ts",
+        "tsConfig": "libs/share/store/tsconfig.lib.json",
+        "assets": ["libs/share/store/*.md"]
+      }
+    },
+    "nx-release-publish": {
+      "options": {
+        "packageRoot": "dist/{projectRoot}"
+      }
+    }
+  }
+}
diff --git a/libs/share/store/src/index.ts b/libs/share/store/src/index.ts
new file mode 100644
index 0000000..e3d031c
--- /dev/null
+++ b/libs/share/store/src/index.ts
@@ -0,0 +1,2 @@
+export * from './plugin';
+export * from './store';
diff --git a/libs/share/store/src/plugin/index.ts b/libs/share/store/src/plugin/index.ts
new file mode 100644
index 0000000..3fca097
--- /dev/null
+++ b/libs/share/store/src/plugin/index.ts
@@ -0,0 +1,36 @@
+import { App, inject } from 'vue';
+import { AppStore } from '../store/createStore';
+const STORE_KEY = Symbol('@hungpvq/store');
+export function createStoreRegistryPlugin() {
+  const store = AppStore.getInstance();
+
+  return {
+    install(app: App) {
+      app.provide(STORE_KEY, store);
+    },
+  };
+}
+
+export function useStoreRegistry() {
+  const registry = inject<AppStore>(STORE_KEY) || AppStore.getInstance();
+  if (!registry)
+    throw new Error(
+      'Store registry not found. Did you forget to app.use(createStoreRegistryPlugin())?',
+    );
+  return registry;
+}
+
+type StoreDefinition<T = any> = () => T;
+export function defineStore<T>(
+  id: string | string[],
+  setup: StoreDefinition<T>,
+): () => T {
+  return function useStore(): T {
+    const storeRegistry = useStoreRegistry();
+    if (!storeRegistry.has(id)) {
+      const store = setup();
+      storeRegistry.set(id, store);
+    }
+    return storeRegistry.get(id) as T;
+  };
+}
diff --git a/libs/share/store/src/store/createStore.ts b/libs/share/store/src/store/createStore.ts
new file mode 100644
index 0000000..7cc9c0e
--- /dev/null
+++ b/libs/share/store/src/store/createStore.ts
@@ -0,0 +1,130 @@
+type GlobalStore = Record<string, unknown>;
+
+export class AppStore {
+  private static instance: AppStore;
+  private state: GlobalStore = {};
+  private constructor() {
+    if (typeof window !== 'undefined') {
+      const win = window as Window & { $_hungpv_store?: GlobalStore };
+      win.$_hungpv_store ??= {};
+      this.state = win.$_hungpv_store;
+    } else {
+      this.state = {};
+    }
+  }
+  public static getInstance(): AppStore {
+    if (!AppStore.instance) {
+      AppStore.instance = new AppStore();
+    }
+    return AppStore.instance;
+  }
+
+  public getState(): GlobalStore {
+    return this.state;
+  }
+  private updateWindowStore() {
+    if (typeof window !== 'undefined') {
+      const win = window as Window & { $_hungpv_store?: GlobalStore };
+      win.$_hungpv_store = this.state;
+    }
+  }
+  public get<T>(path: string | string[]): T | undefined {
+    this.updateWindowStore();
+
+    const keys = Array.isArray(path) ? path : [path];
+    let current: any = this.state;
+
+    for (const key of keys) {
+      if (
+        typeof current !== 'object' ||
+        current === null ||
+        !(key in current)
+      ) {
+        return undefined;
+      }
+      current = current[key];
+    }
+
+    return current as T;
+  }
+
+  public set<T>(keys: string | string[], value: T): T {
+    if (typeof keys === 'string') {
+      this.state[keys] = value;
+    } else {
+      if (Array.isArray(keys)) {
+        setValueByPath(this.state, keys, value);
+      }
+    }
+
+    this.updateWindowStore();
+
+    return value;
+  }
+  public has(path: string | string[]): boolean {
+    const keys = Array.isArray(path) ? path : [path];
+    let current: any = this.state;
+
+    for (const key of keys) {
+      if (
+        typeof current !== 'object' ||
+        current === null ||
+        !(key in current)
+      ) {
+        return false;
+      }
+      current = current[key];
+    }
+
+    return true;
+  }
+
+  public delete(path: string | string[]): boolean {
+    const keys = Array.isArray(path) ? path : [path];
+    let current: any = this.state;
+
+    for (let i = 0; i < keys.length - 1; i++) {
+      const key = keys[i];
+      if (
+        typeof current !== 'object' ||
+        current === null ||
+        !(key in current)
+      ) {
+        return false;
+      }
+      current = current[key];
+    }
+
+    const lastKey = keys[keys.length - 1];
+    if (typeof current === 'object' && current !== null && lastKey in current) {
+      return delete current[lastKey];
+    }
+
+    return false;
+  }
+}
+function setValueByPath(
+  obj: Record<string, any>,
+  keys: string[],
+  value: any,
+): Record<string, any> {
+  let current = obj;
+
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+
+    if (i === keys.length - 1) {
+      current[key] = value;
+    } else {
+      if (
+        !(key in current) ||
+        typeof current[key] !== 'object' ||
+        current[key] === null
+      ) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+  }
+  return current;
+}
diff --git a/libs/share/store/src/store/index.ts b/libs/share/store/src/store/index.ts
new file mode 100644
index 0000000..3a538bb
--- /dev/null
+++ b/libs/share/store/src/store/index.ts
@@ -0,0 +1 @@
+import { computed, reactive, readonly } from '@vue/reactivity';
diff --git a/libs/share/store/tsconfig.json b/libs/share/store/tsconfig.json
new file mode 100644
index 0000000..86622ac
--- /dev/null
+++ b/libs/share/store/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "importHelpers": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/libs/share/store/tsconfig.lib.json b/libs/share/store/tsconfig.lib.json
new file mode 100644
index 0000000..4befa7f
--- /dev/null
+++ b/libs/share/store/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/share/store/tsconfig.spec.json b/libs/share/store/tsconfig.spec.json
new file mode 100644
index 0000000..ab55b7c
--- /dev/null
+++ b/libs/share/store/tsconfig.spec.json
@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "moduleResolution": "node10",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/nx.json b/nx.json
index 488cedd..ff1ece6 100644
--- a/nx.json
+++ b/nx.json
@@ -96,6 +96,12 @@
       },
       "automaticFromRef": true
     },
-    "projects": ["libs/share/*", "libs/ui/*", "libs/map/*", "libs/*"]
+    "projects": [
+      "libs/share/*",
+      "libs/ui/*",
+      "libs/map/*",
+      "libs/*",
+      "shared-store"
+    ]
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 6bab8a0..25a9749 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@turf/turf": "^6.5.0",
         "@types/file-saver": "^2.0.7",
         "@types/js-yaml": "^4.0.9",
+        "@vue/reactivity": "^3.5.16",
         "codemirror": "^6.0.1",
         "file-saver": "^2.0.5",
         "geojson-validation": "^1.0.2",
@@ -86,7 +87,7 @@
         "eslint-plugin-vue": "^9.16.1",
         "husky": "^9.0.11",
         "jest": "29.7.0",
-        "jest-environment-node": "^29.4.1",
+        "jest-environment-node": "^29.7.0",
         "jiti": "2.4.2",
         "jsdom": "~22.1.0",
         "jsonc-eslint-parser": "^2.1.0",
@@ -9720,13 +9721,18 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
-      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "version": "3.5.16",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.16.tgz",
+      "integrity": "sha512-FG5Q5ee/kxhIm1p2bykPpPwqiUBV3kFySsHEQha5BJvjXdZTUfmya7wP7zC39dFuZAcf/PD5S4Lni55vGLMhvA==",
       "dependencies": {
-        "@vue/shared": "3.5.13"
+        "@vue/shared": "3.5.16"
       }
     },
+    "node_modules/@vue/reactivity/node_modules/@vue/shared": {
+      "version": "3.5.16",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.16.tgz",
+      "integrity": "sha512-c/0fWy3Jw6Z8L9FmTyYfkpM5zklnqqa9+a6dz3DvONRKW2NEbh46BP0FHuLFSWi2TnQEtp91Z6zOWNrU6QiyPg=="
+    },
     "node_modules/@vue/runtime-core": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
@@ -9736,6 +9742,14 @@
         "@vue/shared": "3.5.13"
       }
     },
+    "node_modules/@vue/runtime-core/node_modules/@vue/reactivity": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "dependencies": {
+        "@vue/shared": "3.5.13"
+      }
+    },
     "node_modules/@vue/runtime-dom": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
@@ -9747,6 +9761,14 @@
         "csstype": "^3.1.3"
       }
     },
+    "node_modules/@vue/runtime-dom/node_modules/@vue/reactivity": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "dependencies": {
+        "@vue/shared": "3.5.13"
+      }
+    },
     "node_modules/@vue/server-renderer": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
diff --git a/package.json b/package.json
index e51724a..28f7dcd 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@turf/turf": "^6.5.0",
     "@types/file-saver": "^2.0.7",
     "@types/js-yaml": "^4.0.9",
+    "@vue/reactivity": "^3.5.16",
     "codemirror": "^6.0.1",
     "file-saver": "^2.0.5",
     "geojson-validation": "^1.0.2",
@@ -109,7 +110,7 @@
     "eslint-plugin-vue": "^9.16.1",
     "husky": "^9.0.11",
     "jest": "29.7.0",
-    "jest-environment-node": "^29.4.1",
+    "jest-environment-node": "^29.7.0",
     "jiti": "2.4.2",
     "jsdom": "~22.1.0",
     "jsonc-eslint-parser": "^2.1.0",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 965b367..0a6a21b 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -22,6 +22,7 @@
       "@hungpvq/shared-file": ["libs/share/file/src/index.ts"],
       "@hungpvq/shared-log": ["libs/share/log/src/index.ts"],
       "@hungpvq/shared-map": ["libs/map/shared/src/index.ts"],
+      "@hungpvq/shared-store": ["libs/share/store/src/index.ts"],
       "@hungpvq/ui-core": ["libs/ui/core/src/index.ts"],
       "@hungpvq/vue-draggable": ["libs/draggable/src/index.ts"],
       "@hungpvq/vue-map-basemap": ["libs/map/basemap/src/index.ts"],

From daa5729f6a8663b14b158aac9d9823498587bd89 Mon Sep 17 00:00:00 2001
From: "hung.pv" <hung.pv@eofactory.ai>
Date: Tue, 3 Jun 2025 22:01:54 +0700
Subject: [PATCH 2/5] feat: new menu

---
 .../basemap/src/modules/BaseMapControl.vue    |  10 +-
 .../dataset/src/interfaces/dataset.parts.ts   |  51 +++++--
 .../src/model/data-management/model.ts        |  49 +++++--
 libs/map/dataset/src/model/menu/handle.ts     |  71 ++++++++++
 libs/map/dataset/src/model/menu/index.ts      |   2 +
 libs/map/dataset/src/model/menu/store.ts      |  17 +++
 libs/map/dataset/src/model/part-menu.model.ts | 105 ++++++++------
 .../IdentifyControl/IdentifyControl.vue       |   6 +-
 .../IdentifyShowFirstControl.vue              |   6 +-
 .../src/modules/LayerControl/LayerControl.vue |   5 +-
 .../modules/LayerControl/part/LayerList.vue   |   8 +-
 .../LayerControl/part/LayerListReadonly.vue   |   6 +-
 .../src/modules/LayerMenuDefaultHandle.vue    |  37 +++++
 libs/share/store/src/plugin/index.ts          |  10 +-
 libs/share/store/src/store/createStore.ts     | 130 -----------------
 libs/share/store/src/store/index.ts           | 131 +++++++++++++++++-
 16 files changed, 412 insertions(+), 232 deletions(-)
 create mode 100644 libs/map/dataset/src/model/menu/handle.ts
 create mode 100644 libs/map/dataset/src/model/menu/index.ts
 create mode 100644 libs/map/dataset/src/model/menu/store.ts
 create mode 100644 libs/map/dataset/src/modules/LayerMenuDefaultHandle.vue
 delete mode 100644 libs/share/store/src/store/createStore.ts

diff --git a/libs/map/basemap/src/modules/BaseMapControl.vue b/libs/map/basemap/src/modules/BaseMapControl.vue
index 56738e7..e245a3a 100644
--- a/libs/map/basemap/src/modules/BaseMapControl.vue
+++ b/libs/map/basemap/src/modules/BaseMapControl.vue
@@ -75,6 +75,7 @@
   </ModuleContainer>
 </template>
 <script lang="ts" setup>
+import { logHelper } from '@hungpvq/shared-map';
 import { DraggableItemPopup } from '@hungpvq/vue-draggable';
 import {
   MapCard,
@@ -88,12 +89,11 @@ import {
 } from '@hungpvq/vue-map-core';
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiLayersOutline } from '@mdi/js';
-import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useBaseMap } from '../hooks';
+import { logger } from '../logger';
 import type { BaseMapItem } from '../types';
 import defaultbasemap from './basemap';
-import { logger } from '../logger';
-import { logHelper } from '@hungpvq/shared-map';
 const props = defineProps({
   ...withMapProps,
   baseMaps: {
@@ -152,7 +152,7 @@ const path = {
 };
 const show = ref(false);
 function onClick(baseMap: any) {
-  logHelper(logger, mapId, 'control', 'BaseMapControl').debug(
+  logHelper(logger, mapId.value, 'control', 'BaseMapControl').debug(
     'onClick',
     baseMap,
   );
@@ -162,7 +162,7 @@ function onToggleList() {
   show.value = !show.value;
 }
 onMounted(() => {
-  init(props.baseMaps, props.defaultBaseMap);
+  init(props.baseMaps as BaseMapItem[], props.defaultBaseMap);
 });
 onBeforeUnmount(() => {
   remove();
diff --git a/libs/map/dataset/src/interfaces/dataset.parts.ts b/libs/map/dataset/src/interfaces/dataset.parts.ts
index 5774b02..d22ba3f 100644
--- a/libs/map/dataset/src/interfaces/dataset.parts.ts
+++ b/libs/map/dataset/src/interfaces/dataset.parts.ts
@@ -1,3 +1,4 @@
+import type { MaybeRefOrGetter } from '@hungpvq/shared';
 import type { Color, MapSimple } from '@hungpvq/shared-map';
 import type { IDrawHandler } from '@hungpvq/vue-map-core';
 import type { BBox } from 'geojson';
@@ -5,6 +6,25 @@ import type { PointLike, SourceSpecification } from 'maplibre-gl';
 import type { IDataset } from './dataset.base';
 import type { IDatasetMap } from './dataset.map';
 
+export type MenuItemHandle<T> = (layer: T, map_id: string, value?: any) => any;
+export type MenuItemClick<T> =
+  | string
+  | MenuItemHandle<T>
+  | string[]
+  | Array<
+      | string
+      | [
+          string,
+          (
+            | [T, string, any]
+            | ((
+                layer: T,
+                mapId: string,
+                value?: any,
+              ) => [T, string, any] | undefined)
+          ),
+        ]
+    >;
 /**
  * Menu Action Types
  * These types define the structure of menu items and actions in the dataset
@@ -14,19 +34,21 @@ import type { IDatasetMap } from './dataset.map';
 type MenuCommon = {
   order?: number;
   id?: string;
+  disabled?: MaybeRefOrGetter<boolean>;
+  hidden?: MaybeRefOrGetter<boolean>;
 };
 
 /** Divider menu item type */
-type MenuDivider = MenuCommon & {
+export type MenuDivider = MenuCommon & {
   location?: 'extra' | 'menu' | 'bottom';
   type: 'divider';
 };
 
 /** Common properties for all menu items */
-type MenuItemCommon<T> = MenuCommon & {
+export type MenuItemCommon<T> = MenuCommon & {
   type: 'item';
   class?: string;
-  click: (layer: T, map_id: string, value?: any) => any;
+  click: MenuItemClick<T>;
 };
 
 /** Menu item type for bottom or extra location */
@@ -48,12 +70,17 @@ export type MenuItemCustomComponentBottomOrExtra<T> = Omit<
 };
 
 /** Menu item type for menu location */
-type MenuItemContentMenu<T> = MenuItemCommon<T> & {
+export type MenuItemContentMenu<T> = MenuItemCommon<T> & {
   type: 'item';
   location: 'menu';
   name: string;
   icon?: string;
 };
+export type MenuAction<T> =
+  | MenuDivider
+  | MenuItemBottomOrExtra<T>
+  | MenuItemContentMenu<T>
+  | MenuItemCustomComponentBottomOrExtra<T>;
 
 /**
  * View Interface Types
@@ -104,7 +131,7 @@ export type IMapboxLayerView = IDatasetMap & {
   updateValue(map: MapSimple, value: any): void;
   hightLight?(
     map: MapSimple,
-    geojsonData: GeoJSON.Feature<GeoJSON.Geometry> | undefined
+    geojsonData: GeoJSON.Feature<GeoJSON.Geometry> | undefined,
   ): void;
 };
 export type IIdentifyViewBase<T extends IDataset = IDataset> = IDataset &
@@ -112,7 +139,7 @@ export type IIdentifyViewBase<T extends IDataset = IDataset> = IDataset &
     config: { field_name?: string; field_id?: string };
     getFeatures: (
       mapId: string,
-      pointOrBox?: PointLike | [PointLike, PointLike]
+      pointOrBox?: PointLike | [PointLike, PointLike],
     ) => Promise<{ id: string; name: string; data: any }[]>; // Feature's result type
   };
 
@@ -127,13 +154,13 @@ export type IIdentifyViewWithMerge<T extends IDataset = IDataset> =
     mergePayload(
       identifies: IIdentifyView<T>[], // Dùng IIdentifyView thay cho IIdentifyViewBase
       mapId: string,
-      pointOrBox?: PointLike | [PointLike, PointLike]
+      pointOrBox?: PointLike | [PointLike, PointLike],
     ): any; // Đảm bảo return kiểu hợp lý cho payload
 
     splitResponse(
       identifies: IIdentifyView<T>[], // Dùng IIdentifyView thay cho IIdentifyViewBase
       payload: any, // Kiểu của payload từ merge
-      response: any // Response từ getMergedFeatures
+      response: any, // Response từ getMergedFeatures
     ): IdentifyResult[]; // Trả về array kết quả từng identify
 
     getMergedFeatures(identifies: IIdentifyView<T>[], payload: any): any; // Trả về kết quả đã merge
@@ -156,18 +183,12 @@ export type IActionForView<T extends IDataset = IDataset> = {
   removeMenu: (id: string) => void;
   updateMenu: (
     id: string,
-    updater: (menu: MenuAction<T>) => MenuAction<T>
+    updater: (menu: MenuAction<T>) => MenuAction<T>,
   ) => void;
   getMenu(id: string): MenuAction<T> | undefined;
   hasMenu(id: string): boolean;
 };
 
-export type MenuAction<T> =
-  | MenuDivider
-  | MenuItemBottomOrExtra<T>
-  | MenuItemContentMenu<T>
-  | MenuItemCustomComponentBottomOrExtra<T>;
-
 export type IMetadataView = {
   metadata?: { loading?: boolean; bbox?: BBox };
 };
diff --git a/libs/map/dataset/src/model/data-management/model.ts b/libs/map/dataset/src/model/data-management/model.ts
index a819174..21aa726 100644
--- a/libs/map/dataset/src/model/data-management/model.ts
+++ b/libs/map/dataset/src/model/data-management/model.ts
@@ -3,8 +3,8 @@ import type { MapSimple } from '@hungpvq/shared-map';
 import booleanIntersects from '@turf/boolean-intersects';
 import { point as pointTurf } from '@turf/turf';
 import type { Feature } from 'geojson';
+import type { MenuAction } from '../../interfaces';
 import LayerDetail from '../../modules/LayerDetail/LayerDetail.vue';
-import { useMapDatasetComponent, useMapDatasetHighlight } from '../../store';
 import { isDatasetSourceMap } from '../../utils/check';
 import {
   convertFeatureToItem,
@@ -12,6 +12,7 @@ import {
 } from '../../utils/convert';
 import { createNamedComponent } from '../base';
 import { findSiblingOrNearestLeaf } from '../dataset.visitors';
+import { handleMenuAction, handleMenuActionClick } from '../menu';
 import { createDatasetPartDataManagementComponent } from './base';
 
 export function createDataManagementMapboxComponent<
@@ -50,18 +51,40 @@ export function createDataManagementMapboxComponent<
   };
 
   const showDetail = (mapId: string, detail: D) => {
-    const { setFeatureHighlight } = useMapDatasetHighlight(mapId);
-    const { addComponent } = useMapDatasetComponent(mapId);
-    addComponent({
-      component: () => LayerDetail,
-      attr: {
-        item: detail,
-        fields: config.fields,
-        view: dataComponent,
-      },
-      check: 'detail',
-    });
-    setFeatureHighlight(convertItemToFeature(detail), 'detail', dataComponent);
+    handleMenuActionClick(
+      [
+        [
+          'addComponent',
+          [
+            dataComponent,
+            mapId,
+            {
+              component: () => LayerDetail,
+              attr: {
+                item: detail,
+                fields: config.fields,
+                view: dataComponent,
+              },
+              check: 'detail',
+            },
+          ],
+        ],
+        [
+          'highlight',
+          [
+            dataComponent,
+            mapId,
+            {
+              detail: convertItemToFeature(detail),
+              key: 'detail',
+            },
+          ],
+        ],
+      ],
+      dataComponent,
+      mapId,
+      detail,
+    );
   };
 
   const dataComponent = createNamedComponent('DataManagementMapboxComponent', {
diff --git a/libs/map/dataset/src/model/menu/handle.ts b/libs/map/dataset/src/model/menu/handle.ts
new file mode 100644
index 0000000..92499a7
--- /dev/null
+++ b/libs/map/dataset/src/model/menu/handle.ts
@@ -0,0 +1,71 @@
+import type { IDataset, MenuAction, MenuItemCommon } from '../../interfaces';
+import { getMenuHandler } from './store';
+
+export function handleMenuAction<T extends IDataset = IDataset>(
+  menu: MenuAction<T>,
+  layer: T,
+  mapId: string,
+  value: any,
+) {
+  if (menu.type !== 'item') return;
+
+  const click = (menu as MenuItemCommon<T>).click;
+
+  handleMenuActionClick(click, layer, mapId, value);
+}
+
+export function handleMenuActionClick<T extends IDataset = IDataset>(
+  click: MenuItemCommon<T>['click'],
+  layer: T,
+  mapId: string,
+  value: any,
+) {
+  if (typeof click === 'function') {
+    // Trường hợp: hàm trực tiếp
+    click(layer, mapId, value);
+  } else if (typeof click === 'string') {
+    // Trường hợp: key string
+    const handler = getMenuHandler(click);
+    handler?.(layer, mapId, value);
+  } else if (Array.isArray(click)) {
+    for (const entry of click) {
+      if (typeof entry === 'string') {
+        // Trường hợp: entry là key string
+        const handler = getMenuHandler(entry);
+        handler?.(layer, mapId, value);
+      } else if (Array.isArray(entry) && typeof entry[0] === 'string') {
+        // entry là tuple [key, transformer]
+        const [key, transformer] = entry;
+
+        let result: [T, string, any] | undefined;
+
+        if (Array.isArray(transformer)) {
+          // transformer là tuple sẵn [layer, mapId, value]
+          result = transformer as [T, string, any];
+        } else if (typeof transformer === 'function') {
+          // transformer là transformer function
+          result = transformer(layer, mapId, value);
+        }
+
+        if (!result) {
+          console.warn(
+            `[handleMenuAction] result for key: ${key}`,
+            layer,
+            mapId,
+            value,
+          );
+        } else {
+          const [customLayer, customMapId, customValue] = result;
+          const handler = getMenuHandler(key);
+          if (handler) handler(customLayer, customMapId, customValue);
+          else
+            console.warn(`[handleMenuAction] No handler found for key: ${key}`);
+        }
+      } else {
+        console.warn('[handleMenuAction] Invalid entry in click array:', entry);
+      }
+    }
+  } else {
+    console.warn('[onMenuAction] Invalid menu click handler:', click);
+  }
+}
diff --git a/libs/map/dataset/src/model/menu/index.ts b/libs/map/dataset/src/model/menu/index.ts
new file mode 100644
index 0000000..d0a854d
--- /dev/null
+++ b/libs/map/dataset/src/model/menu/index.ts
@@ -0,0 +1,2 @@
+export * from './handle';
+export * from './store';
diff --git a/libs/map/dataset/src/model/menu/store.ts b/libs/map/dataset/src/model/menu/store.ts
new file mode 100644
index 0000000..38ecdc8
--- /dev/null
+++ b/libs/map/dataset/src/model/menu/store.ts
@@ -0,0 +1,17 @@
+import { GlobalStoreService } from '@hungpvq/shared-store';
+import type { MenuItemHandle } from '../../interfaces';
+
+const handlerMap = GlobalStoreService.getInstance();
+export const KEY = 'dataset-action';
+export function registerMenuHandler<TContext = any>(
+  key: string,
+  fn: MenuItemHandle<TContext>,
+) {
+  handlerMap.set([KEY, key], fn);
+}
+
+export function getMenuHandler<TContext = any>(
+  key: string,
+): MenuItemHandle<TContext> | undefined {
+  return handlerMap.get([KEY, key]);
+}
diff --git a/libs/map/dataset/src/model/part-menu.model.ts b/libs/map/dataset/src/model/part-menu.model.ts
index 5984520..fd48989 100644
--- a/libs/map/dataset/src/model/part-menu.model.ts
+++ b/libs/map/dataset/src/model/part-menu.model.ts
@@ -13,7 +13,6 @@ import type {
 } from '../interfaces';
 import LayerDetail from '../modules/LayerDetail/LayerDetail.vue';
 import StyleControl from '../modules/StyleControl/style-control.vue';
-import { useMapDatasetComponent, useMapDatasetHighlight } from '../store';
 import { findSiblingOrNearestLeaf } from './dataset.visitors';
 import ToggleShow from './menu/toggle-show.vue';
 
@@ -92,22 +91,27 @@ export function createMenuItemToBoundActionForItem() {
     type: 'item',
     name: 'Fly to',
     icon: mdiCrosshairsGps,
-    click: (layer, mapId, value) => {
-      const { setFeatureHighlight } = useMapDatasetHighlight(mapId);
-      getMap(mapId, (map) => {
-        fitBounds(map, value.geometry);
-        const { geometry, ...properties } = value;
-        setFeatureHighlight(
-          {
-            type: 'Feature',
-            geometry,
-            properties,
-          },
-          'identify',
-          layer,
-        );
-      });
-    },
+    click: [
+      ['fitBounds', (layer, mapId, value) => [layer, mapId, value.geometry]],
+      [
+        'highlight',
+        (layer, mapId, value) => {
+          const { geometry, ...properties } = value;
+          return [
+            layer,
+            mapId,
+            {
+              detail: {
+                type: 'Feature',
+                geometry,
+                properties,
+              },
+              key: 'identify',
+            },
+          ];
+        },
+      ],
+    ],
   });
 }
 export function createMenuItemShowDetailForItem() {
@@ -131,24 +135,31 @@ export function createMenuItemShowDetailInfoSource() {
     type: 'item',
     name: 'Info',
     icon: mdiInformation,
-    click: (layer, mapId) => {
-      const source = findSiblingOrNearestLeaf(
-        layer,
-        (dataset) => dataset.type == 'source',
-      ) as IMapboxSourceView | null;
-      if (source) {
-        const { addComponent } = useMapDatasetComponent(mapId);
-        addComponent({
-          component: () => LayerDetail,
-          attr: {
-            item: source.getDataInfo(),
-            fields: source.getFieldsInfo(),
-            view: layer,
-          },
-          check: 'detail',
-        });
-      }
-    },
+    click: [
+      [
+        'addComponent',
+        (layer, mapId) => {
+          const source = findSiblingOrNearestLeaf(
+            layer,
+            (dataset) => dataset.type == 'source',
+          ) as IMapboxSourceView | null;
+          if (source)
+            return [
+              layer,
+              mapId,
+              {
+                component: () => LayerDetail,
+                attr: {
+                  item: source.getDataInfo(),
+                  fields: source.getFieldsInfo(),
+                  view: layer,
+                },
+                check: 'detail',
+              },
+            ];
+        },
+      ],
+    ],
   });
 }
 export function createMenuItemStyleEdit() {
@@ -156,15 +167,21 @@ export function createMenuItemStyleEdit() {
     type: 'item',
     name: 'Edit style',
     icon: mdiFormatLineStyle,
-    click: (layer, mapId) => {
-      const { addComponent } = useMapDatasetComponent(mapId);
-      addComponent({
-        component: () => StyleControl,
-        attr: {
-          item: layer,
-        },
-      });
-    },
+    click: [
+      [
+        'addComponent',
+        (layer, mapId) => [
+          layer,
+          mapId,
+          {
+            component: () => StyleControl,
+            attr: {
+              item: layer,
+            },
+          },
+        ],
+      ],
+    ],
   });
 }
 
diff --git a/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue b/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue
index 9269ef0..1dc0c16 100644
--- a/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue
+++ b/libs/map/dataset/src/modules/IdentifyControl/IdentifyControl.vue
@@ -18,6 +18,7 @@ import { MapMouseEvent, type PointLike } from 'maplibre-gl';
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import type { IIdentifyView, MenuAction } from '../../interfaces/dataset.parts';
 import { handleMultiIdentify } from '../../model';
+import { handleMenuAction } from '../../model/menu';
 import { useMapDataset } from '../../store';
 import { useMapDatasetHighlight } from '../../store/highlight';
 import MenuItem from './menu/index.vue';
@@ -204,10 +205,7 @@ function onMenuAction(
   menu: MenuAction<IIdentifyView>,
   item: any,
 ) {
-  if (menu.type != 'item' || !identify) {
-    return;
-  }
-  if ('click' in menu) menu.click(identify, mapId.value, item);
+  handleMenuAction(menu, identify, mapId.value, item);
 }
 onMounted(() => {
   if (props.immediately) onUseMapClick();
diff --git a/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue b/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue
index 2c9ae80..6b82b1b 100644
--- a/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue
+++ b/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue
@@ -10,6 +10,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue';
 import type { IDataset } from '../../interfaces/dataset.base';
 import type { IIdentifyView, MenuAction } from '../../interfaces/dataset.parts';
 import { handleMultiIdentifyGetFirst } from '../../model';
+import { handleMenuAction } from '../../model/menu';
 import { useMapDataset } from '../../store';
 const props = defineProps({
   ...withMapProps,
@@ -84,10 +85,7 @@ function onMenuAction(
   menu: MenuAction<IIdentifyView & IDataset>,
   item: any,
 ) {
-  if (menu.type != 'item' || !identify) {
-    return;
-  }
-  if ('click' in menu) menu.click(identify, mapId.value, item);
+  handleMenuAction(menu, identify, mapId.value, item);
 }
 onMounted(() => {
   addEventClick();
diff --git a/libs/map/dataset/src/modules/LayerControl/LayerControl.vue b/libs/map/dataset/src/modules/LayerControl/LayerControl.vue
index 6c77d87..dd4aee4 100644
--- a/libs/map/dataset/src/modules/LayerControl/LayerControl.vue
+++ b/libs/map/dataset/src/modules/LayerControl/LayerControl.vue
@@ -5,6 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { DraggableItemSideBar } from '@hungpvq/vue-draggable';
 import {
   makeShowProps,
   MapControlButton,
@@ -14,8 +15,6 @@ import {
   useShow,
   withMapProps,
 } from '@hungpvq/vue-map-core';
-
-import { DraggableItemSideBar } from '@hungpvq/vue-draggable';
 import SvgIcon from '@jamescoyle/vue-icon';
 import {
   mdiDelete,
@@ -25,6 +24,7 @@ import {
   mdiPlus,
 } from '@mdi/js';
 import CreateControl from '../CreateControl/CreateControl.vue';
+import LayerMenuDefaultHandle from '../LayerMenuDefaultHandle.vue';
 import LayerList from './part/LayerList.vue';
 
 const props = defineProps({
@@ -123,6 +123,7 @@ function openAddLayer() {
     </template>
     <CreateControl v-model:show="showCreate" />
     <slot />
+    <LayerMenuDefaultHandle />
   </ModuleContainer>
 </template>
 
diff --git a/libs/map/dataset/src/modules/LayerControl/part/LayerList.vue b/libs/map/dataset/src/modules/LayerControl/part/LayerList.vue
index 8dd614a..b35bf03 100644
--- a/libs/map/dataset/src/modules/LayerControl/part/LayerList.vue
+++ b/libs/map/dataset/src/modules/LayerControl/part/LayerList.vue
@@ -19,6 +19,7 @@ import type {
   MenuAction,
 } from '../../../interfaces';
 import { applyToAllLeaves, runAllComponentsWithCheck } from '../../../model';
+import { handleMenuAction } from '../../../model/menu';
 import { useMapDataset } from '../../../store';
 import { isMapboxLayerView } from '../../../utils/check';
 import ButtonToggleShowALl from './ButtonToggleAllShow.vue';
@@ -187,12 +188,7 @@ function onLayerAction({
   action: MenuAction<IListViewUI>;
   item: IListViewUI;
 }) {
-  if (!action) return;
-  if (action.type !== 'item') return;
-  if (!item) return;
-  if ('click' in action) {
-    action.click(item, mapId.value, item);
-  }
+  handleMenuAction(action, item, mapId.value, item);
 }
 </script>
 <template lang="">
diff --git a/libs/map/dataset/src/modules/LayerControl/part/LayerListReadonly.vue b/libs/map/dataset/src/modules/LayerControl/part/LayerListReadonly.vue
index 73933bb..75b9a4a 100644
--- a/libs/map/dataset/src/modules/LayerControl/part/LayerListReadonly.vue
+++ b/libs/map/dataset/src/modules/LayerControl/part/LayerListReadonly.vue
@@ -18,6 +18,7 @@ import type {
   MenuAction,
 } from '../../../interfaces';
 import { applyToAllLeaves, runAllComponentsWithCheck } from '../../../model';
+import { handleMenuAction } from '../../../model/menu';
 import { useMapDataset } from '../../../store';
 import { isMapboxLayerView } from '../../../utils/check';
 import { convertListToTree, Group, Item, TreeItem } from '../../../utils/tree';
@@ -120,10 +121,7 @@ function onLayerAction({
   action: MenuAction<IListViewUI>;
   item: IListViewUI;
 }) {
-  if (!action) return;
-  if (action.type !== 'item') return;
-  if (!item) return;
-  if ('click' in action) action.click(item, mapId.value, item);
+  handleMenuAction(action, item, mapId.value, item);
 }
 </script>
 <template lang="">
diff --git a/libs/map/dataset/src/modules/LayerMenuDefaultHandle.vue b/libs/map/dataset/src/modules/LayerMenuDefaultHandle.vue
new file mode 100644
index 0000000..9b98ebf
--- /dev/null
+++ b/libs/map/dataset/src/modules/LayerMenuDefaultHandle.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { fitBounds } from '@hungpvq/shared-map';
+import { useMap, withMapProps } from '@hungpvq/vue-map-core';
+import { registerMenuHandler } from '../model/menu';
+import { useMapDatasetComponent, useMapDatasetHighlight } from '../store';
+
+const props = defineProps({
+  ...withMapProps,
+});
+const { mapId, callMap } = useMap(props);
+const { addComponent } = useMapDatasetComponent(mapId.value);
+const { setFeatureHighlight } = useMapDatasetHighlight(mapId.value);
+registerMenuHandler('addComponent', (layer, mapId: string, component: any) => {
+  addComponent(component);
+});
+registerMenuHandler('fitBounds', (layer, mapId: string, geometry: any) => {
+  callMap((map) => {
+    fitBounds(map, geometry);
+  });
+});
+registerMenuHandler(
+  'highlight',
+  (
+    layer,
+    mapId: string,
+    props: {
+      detail: any;
+      key: string;
+    },
+  ) => {
+    setFeatureHighlight(props.detail, props.key, layer);
+  },
+);
+</script>
+<template>
+  <div></div>
+</template>
diff --git a/libs/share/store/src/plugin/index.ts b/libs/share/store/src/plugin/index.ts
index 3fca097..5467af5 100644
--- a/libs/share/store/src/plugin/index.ts
+++ b/libs/share/store/src/plugin/index.ts
@@ -1,8 +1,8 @@
-import { App, inject } from 'vue';
-import { AppStore } from '../store/createStore';
+import { App } from 'vue';
+import { GlobalStoreService } from '../store';
 const STORE_KEY = Symbol('@hungpvq/store');
 export function createStoreRegistryPlugin() {
-  const store = AppStore.getInstance();
+  const store = GlobalStoreService.getInstance();
 
   return {
     install(app: App) {
@@ -12,7 +12,9 @@ export function createStoreRegistryPlugin() {
 }
 
 export function useStoreRegistry() {
-  const registry = inject<AppStore>(STORE_KEY) || AppStore.getInstance();
+  // FIXME: cần xử lý trường hợp inject
+  //const registry = inject<GlobalStoreService>(STORE_KEY) || GlobalStoreService.getInstance();
+  const registry = GlobalStoreService.getInstance();
   if (!registry)
     throw new Error(
       'Store registry not found. Did you forget to app.use(createStoreRegistryPlugin())?',
diff --git a/libs/share/store/src/store/createStore.ts b/libs/share/store/src/store/createStore.ts
deleted file mode 100644
index 7cc9c0e..0000000
--- a/libs/share/store/src/store/createStore.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-type GlobalStore = Record<string, unknown>;
-
-export class AppStore {
-  private static instance: AppStore;
-  private state: GlobalStore = {};
-  private constructor() {
-    if (typeof window !== 'undefined') {
-      const win = window as Window & { $_hungpv_store?: GlobalStore };
-      win.$_hungpv_store ??= {};
-      this.state = win.$_hungpv_store;
-    } else {
-      this.state = {};
-    }
-  }
-  public static getInstance(): AppStore {
-    if (!AppStore.instance) {
-      AppStore.instance = new AppStore();
-    }
-    return AppStore.instance;
-  }
-
-  public getState(): GlobalStore {
-    return this.state;
-  }
-  private updateWindowStore() {
-    if (typeof window !== 'undefined') {
-      const win = window as Window & { $_hungpv_store?: GlobalStore };
-      win.$_hungpv_store = this.state;
-    }
-  }
-  public get<T>(path: string | string[]): T | undefined {
-    this.updateWindowStore();
-
-    const keys = Array.isArray(path) ? path : [path];
-    let current: any = this.state;
-
-    for (const key of keys) {
-      if (
-        typeof current !== 'object' ||
-        current === null ||
-        !(key in current)
-      ) {
-        return undefined;
-      }
-      current = current[key];
-    }
-
-    return current as T;
-  }
-
-  public set<T>(keys: string | string[], value: T): T {
-    if (typeof keys === 'string') {
-      this.state[keys] = value;
-    } else {
-      if (Array.isArray(keys)) {
-        setValueByPath(this.state, keys, value);
-      }
-    }
-
-    this.updateWindowStore();
-
-    return value;
-  }
-  public has(path: string | string[]): boolean {
-    const keys = Array.isArray(path) ? path : [path];
-    let current: any = this.state;
-
-    for (const key of keys) {
-      if (
-        typeof current !== 'object' ||
-        current === null ||
-        !(key in current)
-      ) {
-        return false;
-      }
-      current = current[key];
-    }
-
-    return true;
-  }
-
-  public delete(path: string | string[]): boolean {
-    const keys = Array.isArray(path) ? path : [path];
-    let current: any = this.state;
-
-    for (let i = 0; i < keys.length - 1; i++) {
-      const key = keys[i];
-      if (
-        typeof current !== 'object' ||
-        current === null ||
-        !(key in current)
-      ) {
-        return false;
-      }
-      current = current[key];
-    }
-
-    const lastKey = keys[keys.length - 1];
-    if (typeof current === 'object' && current !== null && lastKey in current) {
-      return delete current[lastKey];
-    }
-
-    return false;
-  }
-}
-function setValueByPath(
-  obj: Record<string, any>,
-  keys: string[],
-  value: any,
-): Record<string, any> {
-  let current = obj;
-
-  for (let i = 0; i < keys.length; i++) {
-    const key = keys[i];
-
-    if (i === keys.length - 1) {
-      current[key] = value;
-    } else {
-      if (
-        !(key in current) ||
-        typeof current[key] !== 'object' ||
-        current[key] === null
-      ) {
-        current[key] = {};
-      }
-      current = current[key];
-    }
-  }
-  return current;
-}
diff --git a/libs/share/store/src/store/index.ts b/libs/share/store/src/store/index.ts
index 3a538bb..940e159 100644
--- a/libs/share/store/src/store/index.ts
+++ b/libs/share/store/src/store/index.ts
@@ -1 +1,130 @@
-import { computed, reactive, readonly } from '@vue/reactivity';
+type GlobalStore = Record<string, unknown>;
+
+export class GlobalStoreService {
+  private static instance: GlobalStoreService;
+  private state: GlobalStore = {};
+  private constructor() {
+    if (typeof window !== 'undefined') {
+      const win = window as Window & { $_hungpv_store?: GlobalStore };
+      win.$_hungpv_store ??= {};
+      this.state = win.$_hungpv_store;
+    } else {
+      this.state = {};
+    }
+  }
+  public static getInstance(): GlobalStoreService {
+    if (!GlobalStoreService.instance) {
+      GlobalStoreService.instance = new GlobalStoreService();
+    }
+    return GlobalStoreService.instance;
+  }
+
+  public getState(): GlobalStore {
+    return this.state;
+  }
+  private updateWindowStore() {
+    if (typeof window !== 'undefined') {
+      const win = window as Window & { $_hungpv_store?: GlobalStore };
+      win.$_hungpv_store = this.state;
+    }
+  }
+  public get<T>(path: string | string[]): T | undefined {
+    this.updateWindowStore();
+
+    const keys = Array.isArray(path) ? path : [path];
+    let current: any = this.state;
+
+    for (const key of keys) {
+      if (
+        typeof current !== 'object' ||
+        current === null ||
+        !(key in current)
+      ) {
+        return undefined;
+      }
+      current = current[key];
+    }
+
+    return current as T;
+  }
+
+  public set<T>(keys: string | string[], value: T): T {
+    if (typeof keys === 'string') {
+      this.state[keys] = value;
+    } else {
+      if (Array.isArray(keys)) {
+        setValueByPath(this.state, keys, value);
+      }
+    }
+
+    this.updateWindowStore();
+
+    return value;
+  }
+  public has(path: string | string[]): boolean {
+    const keys = Array.isArray(path) ? path : [path];
+    let current: any = this.state;
+
+    for (const key of keys) {
+      if (
+        typeof current !== 'object' ||
+        current === null ||
+        !(key in current)
+      ) {
+        return false;
+      }
+      current = current[key];
+    }
+
+    return true;
+  }
+
+  public delete(path: string | string[]): boolean {
+    const keys = Array.isArray(path) ? path : [path];
+    let current: any = this.state;
+
+    for (let i = 0; i < keys.length - 1; i++) {
+      const key = keys[i];
+      if (
+        typeof current !== 'object' ||
+        current === null ||
+        !(key in current)
+      ) {
+        return false;
+      }
+      current = current[key];
+    }
+
+    const lastKey = keys[keys.length - 1];
+    if (typeof current === 'object' && current !== null && lastKey in current) {
+      return delete current[lastKey];
+    }
+
+    return false;
+  }
+}
+function setValueByPath(
+  obj: Record<string, any>,
+  keys: string[],
+  value: any,
+): Record<string, any> {
+  let current = obj;
+
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+
+    if (i === keys.length - 1) {
+      current[key] = value;
+    } else {
+      if (
+        !(key in current) ||
+        typeof current[key] !== 'object' ||
+        current[key] === null
+      ) {
+        current[key] = {};
+      }
+      current = current[key];
+    }
+  }
+  return current;
+}

From b05a46f8cbc64c0e5b81f3e5d974ea4a31355323 Mon Sep 17 00:00:00 2001
From: "hung.pv" <hung.pv.mattech@gmail.com>
Date: Wed, 4 Jun 2025 10:51:43 +0700
Subject: [PATCH 3/5] fix: fix error identify when remove layer

---
 libs/map/dataset/src/model/identify/models.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/map/dataset/src/model/identify/models.ts b/libs/map/dataset/src/model/identify/models.ts
index 70774eb..aa5390c 100644
--- a/libs/map/dataset/src/model/identify/models.ts
+++ b/libs/map/dataset/src/model/identify/models.ts
@@ -71,7 +71,7 @@ export function createIdentifyMapboxComponent(name: string, config?: any) {
         const features: MapGeoJSONFeature[] = map.queryRenderedFeatures(
           pointOrBox,
           {
-            layers: allLayerIds,
+            layers: allLayerIds.filter((id) => map.getLayer(id)),
           },
         );
 
@@ -241,7 +241,7 @@ export async function handleMultiIdentifyGetFirst(
       const features: MapGeoJSONFeature[] = map.queryRenderedFeatures(
         pointOrBox,
         {
-          layers: allLayerIds,
+          layers: allLayerIds.filter((id) => map.getLayer(id)),
         },
       );
       if (features.length > 0) {

From 34c667bdba257d80fdf0648f296248e37df4f20c Mon Sep 17 00:00:00 2001
From: "hung.pv" <hung.pv@eofactory.ai>
Date: Wed, 4 Jun 2025 21:17:03 +0700
Subject: [PATCH 4/5] feat: add new highlight

---
 apps/demo-map/src/views/AllMapView.vue        |  60 +++++
 .../dataset/src/interfaces/dataset.parts.ts   |  24 +-
 libs/map/dataset/src/model/identify/models.ts |  13 +-
 .../IdentifyShowFirstControl.vue              |   6 +-
 .../modules/LayerHighlight/LayerHighlight.vue | 220 +++++++++++-------
 libs/map/dataset/src/store/highlight.ts       |  12 -
 .../dataset/src/utils/layer-simple-builder.ts |   8 +-
 libs/map/shared/src/index.ts                  |   1 +
 libs/map/shared/src/utils/filter.ts           |  20 ++
 libs/share/store/package.json                 |   3 +-
 package-lock.json                             |  14 --
 package.json                                  |   1 -
 12 files changed, 249 insertions(+), 133 deletions(-)
 create mode 100644 libs/map/shared/src/utils/filter.ts

diff --git a/apps/demo-map/src/views/AllMapView.vue b/apps/demo-map/src/views/AllMapView.vue
index fd308df..f018b92 100644
--- a/apps/demo-map/src/views/AllMapView.vue
+++ b/apps/demo-map/src/views/AllMapView.vue
@@ -265,8 +265,68 @@ function onMapLoaded(map: MapSimple) {
   dataset.add(metadata);
   addDataset(dataset);
   addDataset(createDatasetPoint());
+  addDataset(createDatasetLineString());
   // addDataset( dataset_raster);
 }
+function createDatasetLineString() {
+  const dataset = createDataset('Group test', null, true) as DatasetComposite;
+  const source = createDatasetPartGeojsonSourceComponent('source', {
+    type: 'FeatureCollection',
+    features: [],
+  });
+  const groupLayer1 = createDataset(
+    'Group layer 1',
+    null,
+    true,
+  ) as DatasetComposite;
+  const list1: IListViewUI =
+    createDatasetPartListViewUiComponent('test line string');
+  const layer1 = createMultiMapboxLayerComponent('layer area', [
+    new LayerSimpleMapboxBuild()
+      .setStyleType('line')
+      .setColor(list1.color)
+      .build(),
+  ]);
+  groupLayer1.add(layer1);
+  groupLayer1.add(list1);
+  list1.addMenus([
+    createMenuItemToggleShow({ location: 'extra' }),
+    createMenuItemToBoundActionForList(),
+    createMenuItemShowDetailInfoSource(),
+    createMenuItemStyleEdit(),
+  ]);
+  const identify = createIdentifyMapboxComponent('test identify');
+  identify.addMenus([
+    createMenuItemToBoundActionForItem(),
+    createMenuItemShowDetailForItem(),
+  ]);
+  dataset.add(identify);
+  const dataManagement = createDataManagementMapboxComponent(
+    'data management',
+    {
+      fields: [{ text: 'Name', value: 'name' }],
+    },
+  );
+  dataManagement.setItems([
+    {
+      id: '2',
+      name: 'feature 2',
+      geometry: {
+        coordinates: [
+          [104.3289285884349, 21.35998263691249],
+          [105.11257582166496, 21.70421219227839],
+          [105.16699576841705, 21.35998263691249],
+          [104.89489603465671, 21.39038859819064],
+        ],
+        type: 'LineString',
+      },
+    },
+  ]);
+  dataset.add(source);
+  dataset.add(dataManagement);
+  dataset.add(groupLayer1);
+  return dataset;
+}
 function createDatasetPoint() {
   const dataset = createDataset('Group test', null, true) as DatasetComposite;
   const source = createDatasetPartGeojsonSourceComponent('source', {
diff --git a/libs/map/dataset/src/interfaces/dataset.parts.ts b/libs/map/dataset/src/interfaces/dataset.parts.ts
index d22ba3f..01143e9 100644
--- a/libs/map/dataset/src/interfaces/dataset.parts.ts
+++ b/libs/map/dataset/src/interfaces/dataset.parts.ts
@@ -2,7 +2,11 @@ import type { MaybeRefOrGetter } from '@hungpvq/shared';
 import type { Color, MapSimple } from '@hungpvq/shared-map';
 import type { IDrawHandler } from '@hungpvq/vue-map-core';
 import type { BBox } from 'geojson';
-import type { PointLike, SourceSpecification } from 'maplibre-gl';
+import type {
+  LayerSpecification,
+  PointLike,
+  SourceSpecification,
+} from 'maplibre-gl';
 import type { IDataset } from './dataset.base';
 import type { IDatasetMap } from './dataset.map';
 
@@ -129,10 +133,6 @@ export type IMapboxLayerView = IDatasetMap & {
   moveLayer(map: MapSimple, beforeId: string): void;
   getComponentUpdate(): () => any;
   updateValue(map: MapSimple, value: any): void;
-  hightLight?(
-    map: MapSimple,
-    geojsonData: GeoJSON.Feature<GeoJSON.Geometry> | undefined,
-  ): void;
 };
 export type IIdentifyViewBase<T extends IDataset = IDataset> = IDataset &
   IActionForView<T> & {
@@ -167,10 +167,16 @@ export type IIdentifyViewWithMerge<T extends IDataset = IDataset> =
   };
 
 // Define kiểu trả về cho mỗi kết quả sau khi split
-export type IdentifyResult = {
-  identify: IIdentifyView; // Dùng IIdentifyView thay cho IIdentifyViewBase
-  features: { id: string | number; name: string; data: any }[]; // Features của mỗi identify
-};
+export type IdentifyResult =
+  | {
+      identify: IIdentifyView; // Dùng IIdentifyView thay cho IIdentifyViewBase
+      features: { id: string | number; name: string; data: any }[]; // Features của mỗi identify
+    }
+  | {
+      identify: IIdentifyView; // Dùng IIdentifyView thay cho IIdentifyViewBase
+      layer: LayerSpecification;
+      feature: { id: string | number; name: string; data: any }; // Features của mỗi identify
+    };
 // Union type cho IIdentifyView
 export type IIdentifyView<T extends IDataset = IDataset> =
   | IIdentifyViewWithoutMerge<T>
diff --git a/libs/map/dataset/src/model/identify/models.ts b/libs/map/dataset/src/model/identify/models.ts
index aa5390c..388bddb 100644
--- a/libs/map/dataset/src/model/identify/models.ts
+++ b/libs/map/dataset/src/model/identify/models.ts
@@ -254,13 +254,12 @@ export async function handleMultiIdentifyGetFirst(
           x.id;
         resolve({
           identify: datasetPartIdentify,
-          features: [
-            {
-              id,
-              name,
-              data: convertFeatureToItem(x),
-            },
-          ],
+          layer: x.layer,
+          feature: {
+            id,
+            name,
+            data: convertFeatureToItem(x),
+          },
         });
       }
     });
diff --git a/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue b/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue
index 6b82b1b..004cbbb 100644
--- a/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue
+++ b/libs/map/dataset/src/modules/IdentifyControl/IdentifyShowFirstControl.vue
@@ -56,11 +56,11 @@ const result = reactive<{
 });
 function onSelectFeatures(feature: {
   identify: IIdentifyView & IDataset;
-  features: any[];
+  feature: any;
 }) {
-  if (feature && feature.features && feature.features[0]) {
+  if (feature && feature.feature) {
     const menu = feature.identify.getMenu('show-detail');
-    if (menu) onMenuAction(feature.identify, menu, feature.features[0].data);
+    if (menu) onMenuAction(feature.identify, menu, feature.feature.data);
   }
 }
 const cUsedIdentify = computed(() => {
diff --git a/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue b/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue
index 4e39577..b90f969 100644
--- a/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue
+++ b/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue
@@ -4,42 +4,98 @@
 <script setup lang="ts">
 import type { MapSimple } from '@hungpvq/shared-map';
 import { useMap, withMapProps } from '@hungpvq/vue-map-core';
-import type { Feature, FeatureCollection } from '@turf/turf';
-import { center } from '@turf/turf';
 import type {
+  CircleLayerSpecification,
   FillLayerSpecification,
   GeoJSONSource,
-  GeoJSONSourceSpecification,
+  LayerSpecification,
+  LineLayerSpecification,
 } from 'maplibre-gl';
-import { Marker } from 'maplibre-gl';
-import { computed, watch } from 'vue';
-import { IMapboxLayerView } from '../../interfaces';
-import { findSiblingOrNearestLeaf } from '../../model/dataset.visitors';
+import { computed, ref, watch } from 'vue';
 import { useMapDatasetHighlight } from '../../store/highlight';
-
 const props = defineProps({
   ...withMapProps,
-  layer: {
-    type: Object,
-    default: () => ({
-      type: 'line',
-      paint: {
-        'line-color': '#004E98',
-        'line-width': 4,
-        'line-dasharray': [2, 2],
-      },
-    }),
-  },
 });
 
 const sourceId = 'source-highlighted';
 const layerId = 'layer-highlighted';
-let marker: Marker | undefined = undefined;
-const { mapId, callMap } = useMap(props);
-const { getFeatureHighlight, getDatesetHighlight } = useMapDatasetHighlight(
+type LayerKey = 'point' | 'line' | 'polygon';
+const layerIds = ref<Record<LayerKey, string>>({
+  point: `${layerId}-point`,
+  line: `${layerId}-line`,
+  polygon: `${layerId}-polygon`,
+});
+const layers = ref<
+  Record<
+    LayerKey,
+    Partial<
+      FillLayerSpecification | LineLayerSpecification | CircleLayerSpecification
+    >
+  >
+>({
+  point: {
+    type: 'circle',
+    filter: ['==', '$type', 'Point'],
+    paint: {
+      'circle-radius': 6,
+      'circle-color': '#004E98',
+      'circle-opacity': 0.7,
+      'circle-stroke-width': 2,
+      'circle-stroke-color': '#fff',
+    },
+  },
+  line: {
+    type: 'line',
+    filter: ['==', '$type', 'LineString'],
+    paint: {
+      'line-color': '#004E98',
+      'line-width': 4,
+      'line-dasharray': [2, 4],
+    },
+  },
+  polygon: {
+    type: 'fill',
+    filter: ['==', '$type', 'Polygon'],
+    paint: {
+      'fill-color': '#004E98',
+      'fill-opacity': 0.4,
+    },
+  },
+});
+const { mapId, callMap } = useMap(props, onInitMap, onRemoveMap);
+const { getFeatureHighlight, setFeatureHighlight } = useMapDatasetHighlight(
   mapId.value,
 );
+function onInitMap(map: MapSimple) {
+  map.addSource(sourceId, {
+    type: 'geojson',
+    data: {
+      type: 'FeatureCollection' as const,
+      features: [],
+    },
+  });
+  (Object.keys(layerIds.value) as LayerKey[]).forEach((key) => {
+    const layerId = layerIds.value[key];
 
+    if (!map.getLayer(layerId)) {
+      map.addLayer({
+        ...((layers.value as any)[key] as Partial<LayerSpecification>),
+        id: layerId,
+        source: sourceId,
+      } as LayerSpecification);
+    }
+  });
+}
+function onRemoveMap(map: MapSimple) {
+  Object.values(layerIds.value).forEach((id) => {
+    if (map.getLayer(id)) {
+      map.removeLayer(id);
+    }
+  });
+  if (map.getSource(sourceId)) {
+    map.removeSource(sourceId);
+  }
+}
 const storeFeature = computed(() => {
   return getFeatureHighlight();
 });
@@ -56,75 +112,28 @@ const updateSource = (
         features: [],
       },
     );
-  } else {
-    map.addSource(sourceId, {
-      type: 'geojson',
-      data: geojsonData || {
-        type: 'FeatureCollection' as const,
-        features: [],
-      },
-    });
-  }
-};
-
-const updateLayer = (map: MapSimple) => {
-  if (map.getLayer(layerId)) {
-    map.moveLayer(layerId);
-  } else {
-    const layer = { ...props.layer } as FillLayerSpecification;
-    layer.source = sourceId;
-    layer.id = layerId;
-    const topLayerId =
-      map.getStyle().layers?.[map.getStyle().layers.length - 1]?.id;
-    map.addLayer(layer, topLayerId);
   }
 };
 
-const updateMarker = (
-  map: MapSimple,
-  geojsonData: GeoJSONSourceSpecification['data'],
-) => {
-  marker?.remove();
-  marker = undefined;
-
-  if (!geojsonData || typeof geojsonData === 'string') return;
-
-  const hasFeatures =
-    geojsonData.type === 'Feature' ||
-    (geojsonData.type === 'FeatureCollection' &&
-      geojsonData.features?.length > 0);
-
-  if (!hasFeatures) return;
-
-  const markCenter = center(geojsonData as Feature | FeatureCollection);
-  const coordinates = markCenter?.geometry?.coordinates;
+const highlight = (map: MapSimple, durationMs = 5000) => {
+  Object.values(layerIds.value).forEach((id) => {
+    if (map.getLayer(id)) {
+      map.moveLayer(id);
+    }
+  });
+  startAnimation(map);
 
-  if (Array.isArray(coordinates)) {
-    const [lng, lat] = coordinates;
-    marker = new Marker({})
-      .setLngLat([lng, lat] as [number, number])
-      .addTo(map);
+  if (durationMs > 0) {
+    setTimeout(() => {
+      clear(map);
+    }, durationMs);
   }
 };
-
+let animationFrameId: number | null = null;
 function updateHighlight(geojsonData?: GeoJSON.Feature<GeoJSON.Geometry>) {
-  const dataset = getDatesetHighlight();
-  if (dataset) {
-    const source = findSiblingOrNearestLeaf(
-      dataset,
-      (dataset) => dataset.type == 'layer',
-    ) as unknown as IMapboxLayerView;
-    if (source && 'hightLight' in source) {
-      callMap((map: MapSimple) => {
-        source.hightLight?.(map, geojsonData);
-      });
-      return;
-    }
-  }
   callMap((map: MapSimple) => {
     updateSource(map, geojsonData);
-    updateLayer(map);
-    updateMarker(map, geojsonData as any);
+    highlight(map);
   });
 }
 
@@ -135,4 +144,51 @@ watch(
   },
   { deep: true },
 );
+
+let radius = 6;
+let grow = true;
+let dashOffset = 0;
+let blinkAlpha = 0.4;
+let blinkDir = 1;
+
+function animate(map: MapSimple) {
+  radius += grow ? 0.2 : -0.2;
+  if (radius >= 12) grow = false;
+  if (radius <= 6) grow = true;
+  map.setPaintProperty(layerIds.value.point, 'circle-radius', radius);
+
+  dashOffset = (dashOffset + 1) % 1000;
+  map.setPaintProperty(layerIds.value.line, 'line-dasharray', [
+    2,
+    4 + (dashOffset % 10) * 0.1,
+  ]);
+
+  blinkAlpha += blinkDir * 0.05;
+  if (blinkAlpha > 0.8) blinkDir = -1;
+  if (blinkAlpha < 0.2) blinkDir = 1;
+
+  map.setPaintProperty(layerIds.value.polygon, 'fill-opacity', blinkAlpha);
+
+  animationFrameId = requestAnimationFrame(() => animate(map));
+}
+function startAnimation(map: MapSimple) {
+  if (animationFrameId == null) {
+    animate(map);
+  }
+}
+function stopAnimation() {
+  if (animationFrameId != null) {
+    cancelAnimationFrame(animationFrameId);
+    animationFrameId = null;
+  }
+}
+function clear(map: MapSimple) {
+  const source = map.getSource(sourceId) as GeoJSONSource;
+  source.setData({
+    type: 'FeatureCollection',
+    features: [],
+  });
+  setFeatureHighlight(undefined, '', undefined);
+  stopAnimation();
+}
 </script>
diff --git a/libs/map/dataset/src/store/highlight.ts b/libs/map/dataset/src/store/highlight.ts
index 7c55ed2..00330a0 100644
--- a/libs/map/dataset/src/store/highlight.ts
+++ b/libs/map/dataset/src/store/highlight.ts
@@ -50,18 +50,6 @@ export const useMapDatasetHighlight = (mapId: string) => {
     if (!feature && store.source.value === source && store.feature.value) {
       store.feature.value = undefined;
       store.source.value = undefined;
-      if (store.dataset) {
-        const source = findSiblingOrNearestLeaf(
-          store.dataset,
-          (dataset) => dataset.type == 'layer',
-        ) as unknown as IMapboxLayerView;
-        if (source && 'hightLight' in source) {
-          getMap((map: MapSimple) => {
-            source.hightLight?.(map, undefined);
-          });
-          return;
-        }
-      }
       store.dataset = undefined;
       return;
     }
diff --git a/libs/map/dataset/src/utils/layer-simple-builder.ts b/libs/map/dataset/src/utils/layer-simple-builder.ts
index f9a7e24..f1a8e5f 100644
--- a/libs/map/dataset/src/utils/layer-simple-builder.ts
+++ b/libs/map/dataset/src/utils/layer-simple-builder.ts
@@ -19,15 +19,17 @@ export class LayerRasterMapboxBuild implements ILayerMapboxBuild {
     };
   }
 }
+export type LayerStyleType = 'point' | 'line' | 'area' | 'symbol';
+
 export class LayerSimpleMapboxBuild implements ILayerMapboxBuild {
   public color?: Color;
   public opacity?: number;
-  public type = 'point';
+  public type: LayerStyleType = 'point';
   setColor(color: Color | undefined) {
     this.color = color;
     return this;
   }
-  setStyleType(type: string) {
+  setStyleType(type: LayerStyleType) {
     this.type = type;
     return this;
   }
@@ -43,7 +45,7 @@ export class LayerSimpleMapboxBuild implements ILayerMapboxBuild {
 export const getDefaultLayer = (
   type: string,
   color?: Color,
-  opacity?: number
+  opacity?: number,
 ): Omit<
   | LineLayerSpecification
   | FillLayerSpecification
diff --git a/libs/map/shared/src/index.ts b/libs/map/shared/src/index.ts
index 451003a..3fad925 100644
--- a/libs/map/shared/src/index.ts
+++ b/libs/map/shared/src/index.ts
@@ -1,3 +1,4 @@
 export * from './fillBound';
 export * from './log';
 export * from './types';
+export * from './utils/filter';
diff --git a/libs/map/shared/src/utils/filter.ts b/libs/map/shared/src/utils/filter.ts
new file mode 100644
index 0000000..1465eca
--- /dev/null
+++ b/libs/map/shared/src/utils/filter.ts
@@ -0,0 +1,20 @@
+/**
+ * Kết hợp filter cũ với điều kiện ['==', '$type', 'LineString']
+ * @param oldFilter Filter cũ (có thể null)
+ * @returns Filter mới đã kết hợp
+ */
+export function combineWithLineStringType(oldFilter: any[] | null): any[] {
+  const newCondition = ['==', '$type', 'LineString'];
+
+  if (!oldFilter) {
+    return newCondition;
+  }
+
+  if (Array.isArray(oldFilter) && oldFilter[0] === 'all') {
+    // Đã là 'all', chỉ cần thêm điều kiện mới
+    return [...oldFilter, newCondition];
+  }
+
+  // Chưa phải 'all', kết hợp lại
+  return ['all', oldFilter, newCondition];
+}
diff --git a/libs/share/store/package.json b/libs/share/store/package.json
index 4a72598..b2107d5 100644
--- a/libs/share/store/package.json
+++ b/libs/share/store/package.json
@@ -20,7 +20,6 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "vue": "^3.3.4",
-    "@vue/reactivity": "^3.5.16"
+    "vue": "^3.3.4"
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 25a9749..ffcfcb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,6 @@
         "@turf/turf": "^6.5.0",
         "@types/file-saver": "^2.0.7",
         "@types/js-yaml": "^4.0.9",
-        "@vue/reactivity": "^3.5.16",
         "codemirror": "^6.0.1",
         "file-saver": "^2.0.5",
         "geojson-validation": "^1.0.2",
@@ -9720,19 +9719,6 @@
         }
       }
     },
-    "node_modules/@vue/reactivity": {
-      "version": "3.5.16",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.16.tgz",
-      "integrity": "sha512-FG5Q5ee/kxhIm1p2bykPpPwqiUBV3kFySsHEQha5BJvjXdZTUfmya7wP7zC39dFuZAcf/PD5S4Lni55vGLMhvA==",
-      "dependencies": {
-        "@vue/shared": "3.5.16"
-      }
-    },
-    "node_modules/@vue/reactivity/node_modules/@vue/shared": {
-      "version": "3.5.16",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.16.tgz",
-      "integrity": "sha512-c/0fWy3Jw6Z8L9FmTyYfkpM5zklnqqa9+a6dz3DvONRKW2NEbh46BP0FHuLFSWi2TnQEtp91Z6zOWNrU6QiyPg=="
-    },
     "node_modules/@vue/runtime-core": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
diff --git a/package.json b/package.json
index 28f7dcd..757f65b 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,6 @@
     "@turf/turf": "^6.5.0",
     "@types/file-saver": "^2.0.7",
     "@types/js-yaml": "^4.0.9",
-    "@vue/reactivity": "^3.5.16",
     "codemirror": "^6.0.1",
     "file-saver": "^2.0.5",
     "geojson-validation": "^1.0.2",

From 94e6d935299bf5b8800d8c0bde548535bdcf25fd Mon Sep 17 00:00:00 2001
From: "hung.pv" <hung.pv@eofactory.ai>
Date: Fri, 6 Jun 2025 23:11:55 +0700
Subject: [PATCH 5/5] feat: add new highlight

---
 apps/demo-map/src/views/AllMapView.vue        |  4 +-
 libs/map/dataset/src/builder/geojson.ts       |  7 +-
 libs/map/dataset/src/model/highlight/index.ts |  2 +
 .../map/dataset/src/model/highlight/models.ts | 26 ++++++
 libs/map/dataset/src/model/highlight/types.ts | 11 +++
 .../model/identify/identifyMapboxMerged.ts    |  7 +-
 libs/map/dataset/src/model/index.ts           |  1 +
 .../modules/LayerHighlight/LayerHighlight.vue | 81 +++++++++++++------
 libs/map/dataset/src/store/highlight.ts       | 12 ++-
 libs/map/shared/src/utils/filter.ts           | 30 +++----
 10 files changed, 131 insertions(+), 50 deletions(-)
 create mode 100644 libs/map/dataset/src/model/highlight/index.ts
 create mode 100644 libs/map/dataset/src/model/highlight/models.ts
 create mode 100644 libs/map/dataset/src/model/highlight/types.ts

diff --git a/apps/demo-map/src/views/AllMapView.vue b/apps/demo-map/src/views/AllMapView.vue
index f018b92..8f9b4bf 100644
--- a/apps/demo-map/src/views/AllMapView.vue
+++ b/apps/demo-map/src/views/AllMapView.vue
@@ -4,7 +4,6 @@ import {
   useDownloadFile,
   useGeoConvertToFile,
 } from '@hungpvq/shared-file';
-import { loggerFactory } from '@hungpvq/shared-log';
 import { type MapSimple } from '@hungpvq/shared-map';
 import { BaseMapCard, BaseMapControl } from '@hungpvq/vue-map-basemap';
 import {
@@ -25,6 +24,7 @@ import {
   createDataManagementMapboxComponent,
   createDataset,
   createDatasetPartGeojsonSourceComponent,
+  createDatasetPartHighlightComponent,
   createDatasetPartListViewUiComponent,
   createDatasetPartMetadataComponent,
   createDatasetPartRasterSourceComponent,
@@ -345,7 +345,9 @@ function createDatasetPoint() {
       .setColor(list1.color)
       .build(),
   ]);
+  const highlight = createDatasetPartHighlightComponent();
   groupLayer1.add(layer1);
+  groupLayer1.add(highlight);
   groupLayer1.add(list1);
   list1.addMenus([
     createMenuItemToggleShow({ location: 'extra' }),
diff --git a/libs/map/dataset/src/builder/geojson.ts b/libs/map/dataset/src/builder/geojson.ts
index e4d3ee0..3c361fb 100644
--- a/libs/map/dataset/src/builder/geojson.ts
+++ b/libs/map/dataset/src/builder/geojson.ts
@@ -13,11 +13,14 @@ import {
   createMenuItemToBoundActionForItem,
   createMultiMapboxLayerComponent,
 } from '../model';
-import { LayerSimpleMapboxBuild } from '../utils/layer-simple-builder';
+import {
+  LayerSimpleMapboxBuild,
+  type LayerStyleType,
+} from '../utils/layer-simple-builder';
 export type GeojsonDatasetOption = {
   name: string;
   geojson: GeoJSON;
-  type: string;
+  type: LayerStyleType;
   color?: Color;
 };
 export function createGeoJsonDataset(data: GeojsonDatasetOption): IDataset {
diff --git a/libs/map/dataset/src/model/highlight/index.ts b/libs/map/dataset/src/model/highlight/index.ts
new file mode 100644
index 0000000..9723bff
--- /dev/null
+++ b/libs/map/dataset/src/model/highlight/index.ts
@@ -0,0 +1,2 @@
+export * from './models';
+export * from './types';
diff --git a/libs/map/dataset/src/model/highlight/models.ts b/libs/map/dataset/src/model/highlight/models.ts
new file mode 100644
index 0000000..a45f521
--- /dev/null
+++ b/libs/map/dataset/src/model/highlight/models.ts
@@ -0,0 +1,26 @@
+import { createNamedComponent } from '../base';
+import { createDatasetLeaf } from '../dataset.base.function';
+import { findFirstLeafByType } from '../dataset.visitors';
+import type { IHighlightConfig, IHighlightView } from './types';
+
+export function createDatasetPartHighlightComponent<
+  T extends IHighlightConfig = IHighlightConfig,
+>(data?: T): IHighlightView {
+  const base = createDatasetLeaf('', data);
+
+  return createNamedComponent('HighlightComponent', {
+    ...base,
+    get type() {
+      return 'highlight';
+    },
+    highlight: (feature) => {
+      const source = findFirstLeafByType(base, 'source');
+      const source_id = (source as any)?.getSourceId();
+      return {
+        source: source_id,
+        filter: feature ? ['==', 'id', feature?.id] : undefined,
+        ...base.getData(),
+      };
+    },
+  });
+}
diff --git a/libs/map/dataset/src/model/highlight/types.ts b/libs/map/dataset/src/model/highlight/types.ts
new file mode 100644
index 0000000..1de4b2c
--- /dev/null
+++ b/libs/map/dataset/src/model/highlight/types.ts
@@ -0,0 +1,11 @@
+import type { GeoJSONFeature } from 'maplibre-gl';
+import type { IDataset } from '../../interfaces';
+
+export type IHighlightConfig = {
+  source?: string;
+  'source-layer'?: string;
+  filter?: any;
+};
+export type IHighlightView = IDataset & {
+  highlight: (feature?: GeoJSONFeature) => Partial<IHighlightConfig>;
+};
diff --git a/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts b/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts
index 24a16e9..ac7592c 100644
--- a/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts
+++ b/libs/map/dataset/src/model/identify/identifyMapboxMerged.ts
@@ -178,8 +178,11 @@ export const splitResponse = (
         features: [],
       });
     }
-
-    resultsMap.get(identifyId)?.features.push(feature);
+    const result = resultsMap.get(identifyId);
+    if (result)
+      if ('features' in result) {
+        result.features.push(feature);
+      }
   });
 
   return Array.from(resultsMap.values());
diff --git a/libs/map/dataset/src/model/index.ts b/libs/map/dataset/src/model/index.ts
index 45205aa..da91c5e 100644
--- a/libs/map/dataset/src/model/index.ts
+++ b/libs/map/dataset/src/model/index.ts
@@ -2,6 +2,7 @@ export * from './data-management';
 export * from './dataset.base';
 export * from './dataset.handler';
 export * from './dataset.visitors';
+export * from './highlight';
 export * from './identify';
 export * from './layer';
 export * from './part-list-view-ui.model';
diff --git a/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue b/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue
index b90f969..0c68599 100644
--- a/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue
+++ b/libs/map/dataset/src/modules/LayerHighlight/LayerHighlight.vue
@@ -2,16 +2,18 @@
   <div></div>
 </template>
 <script setup lang="ts">
-import type { MapSimple } from '@hungpvq/shared-map';
+import { mergeFilters, type MapSimple } from '@hungpvq/shared-map';
 import { useMap, withMapProps } from '@hungpvq/vue-map-core';
 import type {
   CircleLayerSpecification,
   FillLayerSpecification,
+  GeoJSONFeature,
   GeoJSONSource,
   LayerSpecification,
   LineLayerSpecification,
 } from 'maplibre-gl';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, toRaw, watch } from 'vue';
+import { findSiblingOrNearestLeaf, IHighlightView } from '../../model';
 import { useMapDatasetHighlight } from '../../store/highlight';
 const props = defineProps({
   ...withMapProps,
@@ -63,9 +65,8 @@ const layers = ref<
   },
 });
 const { mapId, callMap } = useMap(props, onInitMap, onRemoveMap);
-const { getFeatureHighlight, setFeatureHighlight } = useMapDatasetHighlight(
-  mapId.value,
-);
+const { getFeatureHighlight, setFeatureHighlight, getDatesetHighlight } =
+  useMapDatasetHighlight(mapId.value);
 function onInitMap(map: MapSimple) {
   map.addSource(sourceId, {
     type: 'geojson',
@@ -99,11 +100,28 @@ function onRemoveMap(map: MapSimple) {
 const storeFeature = computed(() => {
   return getFeatureHighlight();
 });
-
-const updateSource = (
+const updateLayer = (
   map: MapSimple,
-  geojsonData?: GeoJSON.Feature<GeoJSON.Geometry>,
+  highlightView?: IHighlightView,
+  geojsonData?: GeoJSONFeature,
 ) => {
+  (Object.keys(layerIds.value) as LayerKey[]).forEach((key) => {
+    const layerId = layerIds.value[key];
+    if (map.getLayer(layerId)) {
+      map.removeLayer(layerId);
+    }
+    const oldLayer = toRaw((layers.value as any)[key]) as any;
+    const newLayer = highlightView?.highlight(geojsonData) || {};
+    map.addLayer({
+      ...oldLayer,
+      id: layerId,
+      source: sourceId,
+      ...newLayer,
+      filter: mergeFilters(oldLayer.filter, newLayer.filter),
+    } as any);
+  });
+};
+const updateSource = (map: MapSimple, geojsonData?: GeoJSONFeature) => {
   const source = map.getSource(sourceId) as GeoJSONSource;
   if (source) {
     source.setData(
@@ -129,11 +147,22 @@ const highlight = (map: MapSimple, durationMs = 5000) => {
     }, durationMs);
   }
 };
-let animationFrameId: number | null = null;
-function updateHighlight(geojsonData?: GeoJSON.Feature<GeoJSON.Geometry>) {
+const animationFrameId = ref<Record<string, number | null>>({});
+function updateHighlight(geojsonData?: GeoJSONFeature) {
+  const dataset = getDatesetHighlight();
+  let highlightView: IHighlightView | undefined = undefined;
+  if (dataset) {
+    highlightView = findSiblingOrNearestLeaf(
+      dataset,
+      (dataset) => dataset.type == 'highlight',
+    ) as unknown as IHighlightView;
+  }
   callMap((map: MapSimple) => {
-    updateSource(map, geojsonData);
-    highlight(map);
+    updateLayer(map, highlightView, geojsonData);
+    if (!highlightView) {
+      updateSource(map, geojsonData);
+    }
+    if (geojsonData) highlight(map);
   });
 }
 
@@ -157,11 +186,13 @@ function animate(map: MapSimple) {
   if (radius <= 6) grow = true;
   map.setPaintProperty(layerIds.value.point, 'circle-radius', radius);
 
-  dashOffset = (dashOffset + 1) % 1000;
-  map.setPaintProperty(layerIds.value.line, 'line-dasharray', [
-    2,
-    4 + (dashOffset % 10) * 0.1,
-  ]);
+  dashOffset += 0.1;
+  dashOffset = +dashOffset.toFixed(1);
+  if (dashOffset >= 6) dashOffset = 0; // vòng lại (2 + 4 = 6)
+
+  const dashArray = [2, 4]; // đơn vị pixel hoặc tỉ lệ
+  const animatedDash = dashArray.map((val) => val + dashOffset);
+  map.setPaintProperty(layerIds.value.line, 'line-dasharray', animatedDash);
 
   blinkAlpha += blinkDir * 0.05;
   if (blinkAlpha > 0.8) blinkDir = -1;
@@ -169,17 +200,19 @@ function animate(map: MapSimple) {
 
   map.setPaintProperty(layerIds.value.polygon, 'fill-opacity', blinkAlpha);
 
-  animationFrameId = requestAnimationFrame(() => animate(map));
+  animationFrameId.value[map.id] = requestAnimationFrame(() => animate(map));
 }
 function startAnimation(map: MapSimple) {
-  if (animationFrameId == null) {
+  const id = animationFrameId.value[map.id];
+  if (id == null) {
     animate(map);
   }
 }
-function stopAnimation() {
-  if (animationFrameId != null) {
-    cancelAnimationFrame(animationFrameId);
-    animationFrameId = null;
+function stopAnimation(map: MapSimple) {
+  const id = animationFrameId.value[map.id];
+  if (id != null) {
+    cancelAnimationFrame(id);
+    animationFrameId.value[map.id] = null;
   }
 }
 function clear(map: MapSimple) {
@@ -189,6 +222,6 @@ function clear(map: MapSimple) {
     features: [],
   });
   setFeatureHighlight(undefined, '', undefined);
-  stopAnimation();
+  stopAnimation(map);
 }
 </script>
diff --git a/libs/map/dataset/src/store/highlight.ts b/libs/map/dataset/src/store/highlight.ts
index 00330a0..2768e44 100644
--- a/libs/map/dataset/src/store/highlight.ts
+++ b/libs/map/dataset/src/store/highlight.ts
@@ -1,16 +1,15 @@
-import { logHelper, type MapSimple } from '@hungpvq/shared-map';
+import { logHelper } from '@hungpvq/shared-map';
 import { defineStore } from '@hungpvq/shared-store';
-import { useMapStore } from '@hungpvq/vue-map-core';
+import type { GeoJSONFeature } from 'maplibre-gl';
 import type { Ref } from 'vue';
 import { ref } from 'vue';
-import type { IDataset, IMapboxLayerView } from '../interfaces';
+import type { IDataset } from '../interfaces';
 import { logger } from '../logger';
-import { findSiblingOrNearestLeaf } from '../model';
 
 export const KEY = 'dataset-highlight';
 
 export type MapDatasetHighlightStore = {
-  feature: Ref<GeoJSON.Feature<GeoJSON.Geometry> | undefined>;
+  feature: Ref<GeoJSONFeature | undefined>;
   source: Ref<string | undefined>;
   dataset?: IDataset;
 };
@@ -29,12 +28,11 @@ export const useMapDatasetHighlightStore = (mapId: string) =>
   )();
 export const useMapDatasetHighlight = (mapId: string) => {
   const store = useMapDatasetHighlightStore(mapId);
-  const { getMap } = useMapStore(mapId);
   function getStore() {
     return store;
   }
   function setFeatureHighlight(
-    feature: GeoJSON.Feature<GeoJSON.Geometry> | undefined,
+    feature: GeoJSONFeature | undefined,
     source: string,
     dataset?: IDataset,
   ) {
diff --git a/libs/map/shared/src/utils/filter.ts b/libs/map/shared/src/utils/filter.ts
index 1465eca..a355b9d 100644
--- a/libs/map/shared/src/utils/filter.ts
+++ b/libs/map/shared/src/utils/filter.ts
@@ -1,20 +1,22 @@
 /**
- * Kết hợp filter cũ với điều kiện ['==', '$type', 'LineString']
- * @param oldFilter Filter cũ (có thể null)
- * @returns Filter mới đã kết hợp
+ * Gộp 2 filter Maplibre bằng toán tử "all" hoặc "any"
+ * @param filter1 - Filter thứ nhất
+ * @param filter2 - Filter thứ hai
+ * @param operator - 'all' | 'any' (mặc định: 'all')
+ * @returns Filter mới đã gộp
  */
-export function combineWithLineStringType(oldFilter: any[] | null): any[] {
-  const newCondition = ['==', '$type', 'LineString'];
+export function mergeFilters(
+  filter1: any | null | undefined,
+  filter2: any | null | undefined,
+  operator: 'all' | 'any' = 'all',
+): any | null {
+  const filters: any[] = [];
 
-  if (!oldFilter) {
-    return newCondition;
-  }
+  if (filter1 && Array.isArray(filter1)) filters.push(filter1);
+  if (filter2 && Array.isArray(filter2)) filters.push(filter2);
 
-  if (Array.isArray(oldFilter) && oldFilter[0] === 'all') {
-    // Đã là 'all', chỉ cần thêm điều kiện mới
-    return [...oldFilter, newCondition];
-  }
+  if (filters.length === 0) return null;
+  if (filters.length === 1) return filters[0];
 
-  // Chưa phải 'all', kết hợp lại
-  return ['all', oldFilter, newCondition];
+  return [operator, ...filters];
 }