hung4564 · hung4564 · Apr 28, 2025 · Apr 24, 2025 · Apr 25, 2025 · Apr 26, 2025
diff --git a/apps/demo-draggable/.eslintrc.json b/apps/demo-draggable/.eslintrc.json
@@ -14,6 +14,10 @@
       "rules": {
         "vue/multi-word-component-names": "off"
       }
+    },
+    {
+      "files": ["*.html"],
+      "processor": "vue/.vue"
     }
   ]
 }
diff --git a/apps/demo-draggable/index.html b/apps/demo-draggable/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/static/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>demo draggable</title>
   </head>

diff --git a/apps/demo-manga/index.html b/apps/demo-manga/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/static/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>demo-manga</title>
   </head>

diff --git a/apps/demo-map/.eslintrc.json b/apps/demo-map/.eslintrc.json
@@ -14,6 +14,10 @@
       "rules": {
         "vue/multi-word-component-names": "off"
       }
+    },
+    {
+      "files": ["*.html"],
+      "processor": "vue/.vue"
     }
   ]
 }
diff --git a/apps/demo-map/index.html b/apps/demo-map/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/static/favicon.svg" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"

diff --git a/apps/demo-map/src/router/index.ts b/apps/demo-map/src/router/index.ts
@@ -13,6 +13,10 @@ const router = createRouter({
       path: '/draw/',
       component: () => import('../views/Draw/example.vue'),
     },
+    {
+      path: '/inspect/',
+      component: () => import('../views/Draw/inspect.vue'),
+    },
     {
       path: '/compare/',
       component: () => import('../views/AllMapCompareView.vue'),

diff --git a/apps/demo-map/src/views/AllMapView.vue b/apps/demo-map/src/views/AllMapView.vue
@@ -11,6 +11,7 @@ import {
   FullScreenControl,
   GeoLocateControl,
   getMap,
+  GlobeControl,
   GotoControl,
   HomeControl,
   Map,
@@ -36,24 +37,31 @@ import {
   createMenuItemStyleEdit,
   createMenuItemToBoundActionForItem,
   createMenuItemToBoundActionForList,
+  createMenuItemToggleShow,
   createMultiLegend,
   createMultiMapboxLayerComponent,
   DatasetComposite,
   findSiblingOrNearestLeaf,
   IdentifyControl,
+  IdentifyShowFirstControl,
   IListViewUI,
   isDataManagementView,
   isDatasetMap,
   LayerControl,
   LayerHighlight,
-  LayerInfoControl,
   LayerSimpleMapboxBuild,
 } from '@hungpvq/vue-map-dataset';
-import { callDraw, DrawControl, DrawingType } from '@hungpvq/vue-map-draw';
+import {
+  callDraw,
+  DrawControl,
+  DrawingType,
+  InspectControl,
+} from '@hungpvq/vue-map-draw';
 import { MeasurementControl } from '@hungpvq/vue-map-measurement';
+import { PrintAdvancedControl, PrintControl } from '@hungpvq/vue-map-print';
 import { mdiDownload, mdiPencil } from '@mdi/js';
 import { ref } from 'vue';
-const { status, error, downloadFile } = useDownloadFile();
+const { downloadFile } = useDownloadFile();
 const mapRef = ref();
 
 const { convertList } = useConvertToGeoJSON();
@@ -65,7 +73,6 @@ function onMapLoaded(map: MapSimple) {
     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',
@@ -152,11 +159,13 @@ function onMapLoaded(map: MapSimple) {
       .build(),
   ]);
   list1.addMenus([
+    createMenuItemToggleShow({ location: 'extra' }),
     createMenuItemToBoundActionForList(),
     createMenuItemShowDetailInfoSource(),
     createMenuItemStyleEdit(),
   ]);
   list2.addMenus([
+    createMenuItemToggleShow({ location: 'extra' }),
     createMenuItemToBoundActionForList(),
     createMenuDrawLayer(),
     createMenuDownload(),
@@ -252,8 +261,56 @@ function onMapLoaded(map: MapSimple) {
   dataset.add(identify);
   dataset.add(metadata);
   addDataset(map.id, dataset);
+  addDataset(map.id, createDatasetPoint());
   // addDataset(map.id, dataset_raster);
 }
+function createDatasetPoint() {
+  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 point');
+  const layer1 = createMultiMapboxLayerComponent('layer area', [
+    new LayerSimpleMapboxBuild()
+      .setStyleType('point')
+      .setColor(list1.color)
+      .build(),
+  ]);
+  groupLayer1.add(layer1);
+  groupLayer1.add(list1);
+  list1.addMenus([
+    createMenuItemToggleShow({ location: 'extra' }),
+    createMenuItemToBoundActionForList(),
+    createMenuItemShowDetailInfoSource(),
+    createMenuItemStyleEdit(),
+  ]);
+  const dataManagement = createDataManagementMapboxComponent(
+    'data management',
+    {
+      fields: [{ text: 'Name', value: 'name' }],
+    }
+  );
+  dataManagement.setItems([
+    {
+      id: '2',
+      name: 'feature 2',
+      geometry: {
+        coordinates: [106.26447460804093, 20.9143362367018],
+        type: 'Point',
+      },
+    },
+  ]);
+  dataset.add(source);
+  dataset.add(dataManagement);
+  dataset.add(groupLayer1);
+  return dataset;
+}
 function createMenuDownload() {
   return createMenuItem({
     type: 'item',
@@ -329,13 +386,17 @@ function createMenuDrawLayer() {
     </LayerInfoControl> -->
     <MeasurementControl position="top-right" />
     <DrawControl position="top-right" />
+    <InspectControl position="top-right" />
     <LayerControl position="top-left" show>
       <template #endList="{ mapId }">
         <BaseMapCard :mapId="mapId" />
       </template>
     </LayerControl>
     <IdentifyControl position="top-right" />
+    <PrintAdvancedControl />
+    <PrintControl />
     <GotoControl position="top-right" />
+    <GlobeControl />
     <CrsControl />
     <SettingControl />
     <GeoLocateControl />
@@ -344,6 +405,7 @@ function createMenuDrawLayer() {
     <HomeControl />
     <MouseCoordinatesControl />
     <BaseMapControl position="bottom-left" />
+    <IdentifyShowFirstControl />
     <LayerHighlight />
   </Map>
 </template>

diff --git a/apps/demo-map/src/views/Draw/inspect.vue b/apps/demo-map/src/views/Draw/inspect.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { BaseMapControl } from '@hungpvq/vue-map-basemap';
+import { Map } from '@hungpvq/vue-map-core';
+import { InspectControl } from '@hungpvq/vue-map-draw';
+import AsideControl from '../../layout/aside-control.vue';
+</script>
+<template>
+  <Map>
+    <AsideControl position="top-left" />
+    <InspectControl position="top-right" />
+    <BaseMapControl position="bottom-left" />
+  </Map>
+</template>
+
+<style></style>
+
+<style>
+* {
+  padding: 0;
+  margin: 0;
+}
+
+body,
+html,
+#root {
+  height: 100%;
+}
+</style>
diff --git a/apps/demo-map/src/views/StoryTelling/example-gps.vue b/apps/demo-map/src/views/StoryTelling/example-gps.vue
@@ -16,7 +16,7 @@ import {
 } from '@hungpvq/vue-map-core';
 import { MeasurementControl } from '@hungpvq/vue-map-measurement';
 import * as turf from '@turf/turf';
-import { GeoJSONSource, Marker } from 'mapbox-gl';
+import { GeoJSONSource, Marker } from 'maplibre-gl';
 import { ref } from 'vue';
 import { createZoomAction } from './helper-action';
 import { withMapReady } from './helper-global';

diff --git a/apps/demo-map/src/views/StoryTelling/helper-global.ts b/apps/demo-map/src/views/StoryTelling/helper-global.ts
@@ -1,5 +1,5 @@
 import { getMap } from '@hungpvq/vue-map-core';
-import { GeoJSONSource } from 'mapbox-gl';
+import { GeoJSONSource, Map } from 'maplibre-gl';
 import { Ref } from 'vue';
 
 export function createOrbitGlobalActions(mapId: Ref<string>) {
@@ -104,10 +104,7 @@ export function createSimpleMapAction(mapId: Ref<string>) {
   };
 }
 
-export function withMapReady(
-  mapId: string,
-  action: (map: mapboxgl.Map) => void
-) {
+export function withMapReady(mapId: string, action: (map: Map) => void) {
   getMap(mapId, (map) => {
     if (map.isStyleLoaded()) {
       action(map);

diff --git a/apps/demo-map/src/views/StoryTelling/useStorytelling.ts b/apps/demo-map/src/views/StoryTelling/useStorytelling.ts
@@ -91,49 +91,33 @@ export function useStorytelling(options: UseStorytellingOptions) {
 
   const runCurrentChapter = () => {
     const chapter = chapters[currentIndex.value];
-    console.log('test', currentIndex.value, 'start');
-    console.log('test', currentIndex.value, 'start', 'chapter', chapter);
     chapter.onEnter?.();
 
     for (const action of chapter.actions ?? []) {
-      console.log('test', currentIndex.value, 'start', 'action', action);
       const resolved = resolveAction(action);
       resolved?.add?.();
     }
 
     if (autoNext && chapter.duration) {
       clearTimer();
       timer = window.setTimeout(() => {
-        console.log('test', currentIndex.value, 'start', 'exit');
         chapter.onExit?.();
         next();
       }, chapter.duration / currentSpeed.value);
     }
   };
 
   const exitCurrentChapter = (nextIndex: number) => {
-    console.log('test', currentIndex.value, 'end', 'exit');
     const current = chapters[currentIndex.value];
-    console.log('test', currentIndex.value, 'end', 'chapter', current);
     const next = chapters[nextIndex];
     const nextTypes = new Set(next?.actions?.map((a) => a.type) ?? []);
 
     current?.onExit?.();
 
     for (const action of current?.actions ?? []) {
-      console.log(
-        'test',
-        currentIndex.value,
-        'end',
-        'action',
-        action,
-        nextTypes,
-        nextTypes.has(action.type)
-      );
       if (!nextTypes.has(action.type)) {
         const resolved = resolveAction(action);
         resolved?.remove?.();
-        console.log('test', currentIndex.value, 'end', 'remove action', action);
       }
     }
 

diff --git a/apps/demo-shared/.eslintrc.json b/apps/demo-shared/.eslintrc.json
@@ -4,6 +4,7 @@
     "eslint:recommended",
     "@vue/eslint-config-typescript",
     "@vue/eslint-config-prettier/skip-formatting",
+    "../../.eslintrc.json",
     "../../.eslintrc.base.json"
   ],
   "ignorePatterns": ["!**/*"],
@@ -13,6 +14,10 @@
       "rules": {
         "vue/multi-word-component-names": "off"
       }
+    },
+    {
+      "files": ["*.html"],
+      "processor": "vue/.vue"
     }
   ]
 }
diff --git a/apps/demo-shared/index.html b/apps/demo-shared/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/static/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>demo-shared</title>
   </head>

diff --git a/deploy/demo-map b/deploy/demo-map
diff --git a/libs/map/core/package.json b/libs/map/core/package.json
@@ -36,7 +36,7 @@
     "@turf/turf": "^6.5.0",
     "proj4": "^2.11.0",
     "lodash": "^4.17.21",
-    "mapbox-gl": ">=1.13.0",
+    "maplibre-gl": "^5.4.0",
     "@mapbox/mapbox-gl-sync-move": "^0.3.1"
   }
 }
+1 −0		assets/AllMapCompareView-B0w3yqx8.js
+1 −0		assets/AllMapCompareView-CLFXNgjn.js
+1 −0		assets/AllMapCompareView-D2D6OvEU.js
+1 −0		assets/AllMapCompareView-Drd8k6ks.js
+2 −0		assets/aside-control-BpksgB7d.js
+2 −0		assets/aside-control-CfCfVMZ-.js
+2 −0		assets/aside-control-CiHJ4E92.js
+2 −0		assets/aside-control-Cv3EvTCs.js
+1 −0		assets/example-1gWQdROH.js
+1 −0		assets/example-BFqliOb2.js
+1 −0		assets/example-BVclK-S_.js
+1 −0		assets/example-BYteHsml.js
+1 −0		assets/example-BdzmSlyV.js
+1 −0		assets/example-BrcIRWaN.js
+1 −0		assets/example-CCaCgJnL.js
+1 −0		assets/example-CIKwJ15C.js
+1 −0		assets/example-CQ04NSQG.js
+1 −0		assets/example-CgZHm8Fx.js
+1 −0		assets/example-CmGo2IC9.js
+1 −0		assets/example-D0lx7LyE.js
+1 −0		assets/example-D30XGEvZ.js
+1 −0		assets/example-DrqbU9iI.js
+1 −0		assets/example-TzO56Lhm.js
+1 −0		assets/example-XP4SZVoE.js
+1 −0		assets/example-gps-B9cvQ2OV.js
+1 −0		assets/example-gps-BTq1uhkn.js
+1 −0		assets/example-gps-CoHWcKdV.js
+1 −0		assets/example-gps-Cursstdv.js
+598 −0		assets/index-B_n5O5IR.js
+829 −0		assets/index-C8O7XfGe.js
+1 −0		assets/index-CAewgunV.css
+1 −0		assets/index-CJiV2XOe.css
+1 −0		assets/index-CyrjCORb.css
+598 −0		assets/index-D9z0B4lh.js
+829 −0		assets/index-DwGWRouJ.js
+1 −0		assets/index-QgNXuO2V.css
+1 −0		assets/inspect-CmNS4pfo.js
+1 −0		assets/useStorytelling-BDBBeQN3.js
+1 −0		assets/useStorytelling-BUPD1K1z.js
+1 −0		assets/useStorytelling-D3UZTRIl.js
+1 −0		assets/useStorytelling-DpFvOdx2.js
+19 −19		index.html