From bae4e701a94bee8e798e3d9e7b5a1ad4ae37d867 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: Thu, 12 Dec 2024 15:44:25 +0900
Subject: [PATCH] =?UTF-8?q?multimap=202=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Examples/multiMap_GeoOn2/index.html | 242 ++++++++++++++++++++++++++++
 src/components/Example/Example.jsx  |   1 +
 2 files changed, 243 insertions(+)
 create mode 100644 Examples/multiMap_GeoOn2/index.html
diff --git a/Examples/multiMap_GeoOn2/index.html b/Examples/multiMap_GeoOn2/index.html
new file mode 100644
index 0000000..ba2d11a
--- /dev/null
+++ b/Examples/multiMap_GeoOn2/index.html
@@ -0,0 +1,242 @@
+<html>
+    <head></head>
+    <link rel="stylesheet" href="../styles/styles.css" />
+    <body>
+        <div class="inputContainer">
+            <div class="container">
+                <button type="button" class="button-menu" name="getRouteOn">getRouteOn</button>
+                <button type="button" class="button-menu" name="start">start</button>
+                <button type="button" class="button-menu" name="stop">stop</button>
+                <button type="button" class="button-menu" name="clear">clear</button>
+            </div>
+            <div class="container2">
+                <label class="menu">change floor</label>
+                <select type="text" class="inline-input" name="floorList"></select>
+            </div>
+            <div class="container3">
+                <label class="menu">remove building</label>
+                <select type="text" class="inline-input" name="removeBuildingList"></select>
+            </div>
+            <div class="container4">
+                <label class="menu">add building</label>
+                <select type="text" class="inline-input" name="addBuildingList"></select>
+            </div>
+        </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>
+        let mapData = null;
+        let map = null;
+
+        async function init() {
+            const dabeeoMaps = new dabeeo.Maps();
+
+            // mapDataOption 정의 (통합지도)
+            const mapDataOption = {
+                // mapId: '9400907b-08ac-4fc4-a74e-f5c701c5b7fe',
+                clientId: '1H_Fpq9zkOY9o7NXGwAPqc',
+                clientSecret: '1c177e120c495659293824fdcf9c994d',
+            };
+
+            // mapData 가져오기
+            mapData = await dabeeoMaps.getMapData(mapDataOption);
+
+            // mapContainer
+            const mapContainer = document.getElementById('map');
+
+            // mapOption 정의
+            const mapOption = {
+                camera: '2d',
+                enableGeoreferencing: true,
+                framerate: 60,
+            };
+
+            // mapOption으로 mapContainer에 map 그리기
+            map = await dabeeoMaps.showMap(mapContainer, mapOption, mapData);
+
+            //////////////////////////////// API 샘플 및 사용 예제 요약
+            addBuildingEventTest(); // addBuilding 테스트 코드
+            removeBuildingEventTest(); // removeBuilding 테스트 코드
+            changeFloorEventTest(); // changeFloor 테스트 코드
+            routeSimulationTest(); // routeSimualtion 테스트 코드
+            /////////////////////////////////////////////////////
+        }
+
+        init();
+
+        // addBuilding 테스트 코드
+        function addBuildingEventTest() {
+            // mapData.dataBuilding 중 indoor 만 filter 하여 list 를 만듦
+            const buildings = mapData.dataBuilding.getBuildings().filter((building) => building.buildingType === 'indoor');
+
+            // selectBox element 를 찾아 저장
+            const addBuildingSelectBoxElement = document.querySelector("[name='addBuildingList']");
+
+            // 초기 빈 option 생성
+            const addBuildingInitOption = document.createElement('option');
+            addBuildingInitOption.value = '';
+            addBuildingInitOption.appendChild(document.createTextNode(''));
+            addBuildingSelectBoxElement.appendChild(addBuildingInitOption);
+
+            // filter 한 building 을 조회하며 selectBox 의 option 생성 및 추가
+            for (const building of buildings) {
+                // addBuilding SelectBox option 생성 및 추가
+                const addBuildingOption = document.createElement('option');
+                addBuildingOption.value = building.id;
+                addBuildingOption.appendChild(document.createTextNode(building.name[0].text));
+                addBuildingSelectBoxElement.appendChild(addBuildingOption);
+            }
+
+            // add building selectBox 에 change 이벤트를 추가, change 가 발생했을 때 선택된 빌딩의 기본 층을 그림
+            addBuildingSelectBoxElement.addEventListener('change', async (e) => {
+                await map.context.addBuilding(e.target.value);
+            });
+        }
+
+        // removeBuilding 테스트 코드
+        function removeBuildingEventTest() {
+            // mapData.dataBuilding 중 indoor 만 filter 하여 list 를 만듦
+            const buildings = mapData.dataBuilding.getBuildings().filter((building) => building.buildingType === 'indoor');
+
+            // selectBox element 를 찾아 저장
+            const removeBuildingSelectBoxElement = document.querySelector("[name='removeBuildingList']");
+
+            // 초기값으로 빈 option 을 추가
+            const removeBuildingInitOption = document.createElement('option');
+            removeBuildingInitOption.value = '';
+            removeBuildingInitOption.appendChild(document.createTextNode(''));
+            removeBuildingSelectBoxElement.appendChild(removeBuildingInitOption);
+
+            // filter 한 building 을 조회하며 selectBox 의 option 생성 및 추가
+            for (const building of buildings) {
+                // removeBuilding SelectBox option 생성 및 추가
+                const removeBuildingOption = document.createElement('option');
+                removeBuildingOption.value = building.id;
+                removeBuildingOption.appendChild(document.createTextNode(building.name[0].text));
+                removeBuildingSelectBoxElement.appendChild(removeBuildingOption);
+            }
+
+            // remove building selectBox 에 change 이벤트를 추가, change 가 발생했을 때 선택된 빌딩을 removeBuilding을 통해 제거
+            removeBuildingSelectBoxElement.addEventListener('change', function (e) {
+                map.context.removeBuilding(e.target.value);
+            });
+        }
+
+        // changeFloor 테스트 코드
+        function changeFloorEventTest() {
+            // mapData.dataBuilding 중 indoor 만 filter 하여 list 를 만듦
+            const buildings = mapData.dataBuilding.getBuildings().filter((building) => building.buildingType === 'indoor');
+
+            const floorSelectBoxElement = document.querySelector("[name='floorList']");
+
+            const changeFloorInitOption = document.createElement('option');
+            changeFloorInitOption.value = '';
+            changeFloorInitOption.appendChild(document.createTextNode(''));
+            floorSelectBoxElement.appendChild(changeFloorInitOption);
+
+            // filter 한 building 을 조회하며 selectBox 의 option 생성 및 추가
+            for (const building of buildings) {
+                // building 안의 floor 를 조회하며 floorSelectBox option 생성 및 추가
+                const floors = building.floors;
+                for (const floor of floors) {
+                    const floorOption = document.createElement('option');
+                    floorOption.value = floor.id;
+                    floorOption.appendChild(document.createTextNode(`${building.name[0].text} ${floor.name[0].text}`));
+                    floorSelectBoxElement.appendChild(floorOption);
+                }
+            }
+
+            // floor selectBox 에 change 이벤트를 추가, change 가 발생했을 때 선택된 floor 로 층변경 이벤트 발생
+            // addBuilding() 함수 호출 시 await 를 붙여야 함, 선택된 빌딩 추가
+            floorSelectBoxElement.addEventListener('change', async (e) => {
+                await map.context.changeFloor(e.target.value);
+            });
+        }
+
+        function routeSimulationTest() {
+            // button click event 추가, 버튼 클릭 시 마포티타운 건물에서 실외지도를 거쳐 프론트원 건물로 가는 길찾기 경로 표출
+            document.querySelector("[name='getRouteOn']").addEventListener('click', async function () {
+                // option 에 따른 경로 검색
+                const naivResponse = await mapData.getRoute({
+                    // 마포티타운 건물 8층의 poi
+                    origin: {
+                        poiId: 'dd94549b-82f8-467c-a80b-cb87d441aeb7',
+                        floorId: 'f2299bb5-58c7-4425-8210-dbeece84f4c4',
+                    },
+
+                    // 프론트원 건물 1층의 poi
+                    destination: {
+                        poiId: 'a53eb76b-2826-4f26-b408-44adf7e8f6ce',
+                        floorId: 'e1992398-f25f-49fa-9daa-fc6adf340029',
+                    },
+                    type: ['recommendation'],
+                });
+                const naviOption = {
+                    origin: {
+                        markerOptions: {
+                            width: 30,
+                            height: 30,
+                            visibleIcon: true,
+                        },
+                    }, // 출발지 아이콘 및 주행선
+                    destination: {
+                        markerOptions: {
+                            width: 50,
+                            height: 50,
+                            visibleIcon: true,
+                        },
+                        lineOptions: {
+                            lineColor: '#ffbb00',
+                            solidLineEnabled: true,
+                            solidLineWidth: 20,
+                        },
+                    }, // 도착지 아이콘 및 주행선
+
+                    defaultLineOption: {
+                        lineColor: '#ffbb00',
+                        solidLineEnabled: true,
+                        solidLineWidth: 5,
+                        solidLineCap: 'round',
+                        solidLineJoin: 'round',
+                    }, // 기본 주행선 옵션
+                    lineDivide: false, // 네비게이션 선 분할여부 결정 (false 인 경우, defaultLineOption 만 사용)
+                };
+                // 구한 경로를 지도에 표출
+                await map.routeSimulation.set(naivResponse.recommendation, naviOption);
+            });
+
+            // button click event 추가, 버튼 클릭 시 길찾기 시뮬레이션을 start
+            document.querySelector("[name='start']").addEventListener('click', async function () {
+                const animOption = {
+                    twoFloorsNavigationDuration: 1000,
+                    speedRate: 13,
+                    zoom: 19,
+                    removeIcon: false,
+                    markerOptions: {
+                        iconUrl: 'https://assets.dabeeomaps.com/image/ico/img_person-3x.png',
+                        width: 30,
+                        height: 30,
+                        anchor: {
+                            x: 0.5,
+                            y: 0.5,
+                        },
+                    },
+                    enableFloorMotionCSS: true,
+                    changeFloorDelay: 500,
+                };
+                await map.routeSimulation.start(animOption);
+            });
+
+            // button click event 추가, 버튼 클릭 시 길찾기 시뮬레이션을 stop
+            document.querySelector("[name='stop']").addEventListener('click', function () {
+                map.routeSimulation.stop();
+            });
+
+            // button click event 추가, 버튼 클릭 시 길찾기 경로 제거
+            document.querySelector("[name='clear']").addEventListener('click', function () {
+                map.routeSimulation.clear();
+            });
+        }
+    </script>
+</html>
diff --git a/src/components/Example/Example.jsx b/src/components/Example/Example.jsx
index 39df15a..c719540 100644
--- a/src/components/Example/Example.jsx
+++ b/src/components/Example/Example.jsx
@@ -26,6 +26,7 @@ const Example = () => {
         'navigation_Delay',
         'tag',
         'multiMap_GeoOn',
+        'multiMap_GeoOn2',
         'multiMap_GeoOff',
         'multiMap_BuildingMask',
         'heatmap',
