From 10e765109872a609f6edfc91b32cde434531982c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Clara=28=E1=84=89=E1=85=B5=E1=86=AB=E1=84=89=E1=85=A1?=
 =?UTF-8?q?=E1=86=BC=E1=84=85=E1=85=B5=E1=86=B7=29?=
 <sangrim.shin@dabeeo.com>
Date: Tue, 22 Oct 2024 15:46:12 +0900
Subject: [PATCH] =?UTF-8?q?findClosestPois=20=EC=98=88=EC=A0=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../findClosestPois/img_marker_blue-3x.png    | Bin 0 -> 6931 bytes
 Examples/findClosestPois/index.html           | 143 ++++++++++++++++++
 src/components/Example/Example.jsx            |   1 +
 3 files changed, 144 insertions(+)
 create mode 100644 Examples/findClosestPois/img_marker_blue-3x.png
 create mode 100644 Examples/findClosestPois/index.html

diff --git a/Examples/findClosestPois/img_marker_blue-3x.png b/Examples/findClosestPois/img_marker_blue-3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..88637ff9d7b70ad3bf60d0719960910f84e2e618
GIT binary patch
literal 6931
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
Z{{wy%6ZO&~h6?}y002ovPDHLkV1khQ2Aco?

literal 0
HcmV?d00001

diff --git a/Examples/findClosestPois/index.html b/Examples/findClosestPois/index.html
new file mode 100644
index 0000000..99bc082
--- /dev/null
+++ b/Examples/findClosestPois/index.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <link rel="icon" href="../dabeeo_ci_symbol.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>findClosestPois example</title>
+        <link rel="stylesheet" href="../styles/styles.css" />
+    </head>
+    <body>
+        <div class="container">
+            <button type="button" class="button-menu" name="getDistance">getDistance</button>
+            <button type="button" class="button-menu" name="findClosestPois">findClosestPois</button>
+            <button type="button" class="button-menu" name="clearMarker">clearMarker</button>
+        </div>
+        <div class="container2">
+            <button type="button" class="button-menu">floor</button>
+            <select type="text" class="inline-input" name="floor"></select>
+        </div>
+
+        <div id="map" class="map"></div>
+    </body>
+    <script type="text/javascript" src="https://api-assets.dabeeomaps.com/upload/library/dabeeomaps-4.0-latest.js"></script>
+
+    <script>
+        /*
+        getDistance()는 비용이 많이 드는 함수이므로(백엔드서버에 각 모든 poi에 대한 경로찾기 요청해야 함) 동일한 효과를 갖는 findClosestPois() 사용을 권장합니다. 
+        getDistance(): 특정 좌표에서 해당 카테고리 중 가장 가까운 poi 순서대로 정렬하기 
+        findClosestPois(): 특정층에서 해당 카테고리가 있는 가장 가까운 층의 poi 찾기 
+         */
+        const dabeeoMaps = new dabeeo.Maps();
+        let mapData;
+        let map;
+        async function init() {
+            //// fetch a map
+            mapData = await dabeeoMaps.getMapData({
+                //  'studio4_DID_올리브영_명동타운점_test': {
+                // mapId: 'b13a685d-029d-4a85-869e-fe2d8dadaf21',
+                clientId: 'ejb5P7EIQp2af4SnzvrNEU',
+                clientSecret: 'ad7883ef8c108b24fd66f0532771cdfa',
+                serverType: 'SERVER_STUDIO4',
+            });
+
+            //// render a map
+            const mapOption = {};
+            const mapContainer = document.getElementById('map');
+            map = await dabeeoMaps.showMap(mapContainer, mapOption, mapData);
+
+            const categories = mapData.dataMapInfo.getPoiCategories();
+            console.log('categories', categories);
+            const floors = mapData.dataFloor.getFloors();
+            console.log('floors', floors);
+
+            const floorId = 'f52efdc4-5e27-4883-a9ee-79ab40af3a64'; // 1층
+            const origin = { position: { x: 400, y: 1500 }, floorId }; // 1층 현재위치
+            const categoryCode = 'ee64ee3f-12a3-4220-b82f-883c10c56714'; // 화장실
+            const pois = mapData.dataPoi.find({ categoryCode }); // categoryCode에 해당하는 poi 찾기 (검증하기 위해 찾아봄)
+            console.log('화장실 카테고리에 해당하는 pois', pois);
+
+            ////event listener initialization
+            initCameraMenu(map);
+            // default value is defined in DabeeoMap Editor
+            initFloorMenu();
+
+            function initCameraMenu(map) {
+                document.querySelector("[name='getDistance']").addEventListener('click', async function (e) {
+                    // 현재 위치 마커로 표출
+                    map.markers.set({ marker: [{ x: 400, y: 1500, floorId, iconOption: { iconUrl: './img_marker_blue-3x.png' } }] });
+
+                    // 현재위치에서 카테고리 코드에 해당하는 모든 poi와의 거리를 각각 계산, 가까운 순서대로 sorting
+                    const distanceList = await mapData.getCategoryDistance(origin, categoryCode);
+                    console.log('distanceList', distanceList);
+
+                    // 가까운 순서대로 인덱스를 데이터로 넣어서 마커 표출, 마커클릭시 데이터 확인 가능
+                    const markerList = distanceList.map((item, index) => ({
+                        x: item.poi.position.x,
+                        y: item.poi.position.y,
+                        floorId: item.poi?.floorId,
+                        data: { index },
+                    }));
+                    map.markers.set({ marker: markerList });
+                });
+
+                document.querySelector("[name='findClosestPois']").addEventListener('click', function () {
+                    // 현재층에서 가장 가까운 층의 Poi들을 반환
+                    const poisList = mapData.dataPoi.findClosestPois({ categoryCode, floorId });
+                    console.log('poisList', poisList);
+                    if (!poisList) return;
+                    if (Array.isArray(poisList)) {
+                        const markerList = poisList.map((item) => ({
+                            x: item.position.x,
+                            y: item.position.y,
+                            floorId: item.floorId,
+                        }));
+                        map.markers.set({ marker: markerList });
+                    } else {
+                        const markerList = [
+                            {
+                                x: poisList.position.x,
+                                y: poisList.position.y,
+                                floorId: poisList.floorId,
+                            },
+                        ];
+                        map.markers.set({ marker: markerList });
+                    }
+                });
+
+                document.querySelector("[name='clearMarker']").addEventListener('click', function () {
+                    map.markers.clearAll();
+                });
+            }
+
+            function initFloorMenu() {
+                //floor data
+                const dataFloor = mapData.dataFloor;
+                const floorInfo = dataFloor.getFloors();
+                const mapDefaultFloor = dataFloor.getDefaultFloor();
+                let element = document.querySelector("[name='floor']");
+
+                for (const floor of floorInfo) {
+                    let newOption = document.createElement('option');
+                    newOption.value = floor.id;
+                    newOption.appendChild(document.createTextNode(floor.name[0].text));
+                    element.appendChild(newOption);
+                }
+                element.value = mapDefaultFloor.id;
+            }
+
+            function initFloorEvent() {
+                const optionDefaultFloor = map.context.getMapOptions().floor;
+                let element = document.querySelector("[name='floor']");
+                element.value = optionDefaultFloor;
+                element.addEventListener('change', async function (e) {
+                    const floor = e.target.value;
+                    await map.context.changeFloor(floor);
+                });
+            }
+        }
+
+        init();
+    </script>
+</html>
diff --git a/src/components/Example/Example.jsx b/src/components/Example/Example.jsx
index b492a4f..39df15a 100644
--- a/src/components/Example/Example.jsx
+++ b/src/components/Example/Example.jsx
@@ -14,6 +14,7 @@ const Example = () => {
         'objects',
         'pois',
         'pois_click',
+        'findClosestPois',
         'controls',
         'focus',
         'mapContext',