dynamically add/remove map

fdq09eca · Nov 16, 2023 · 84e2cbb · 84e2cbb
1 parent be54f01
commit 84e2cbb
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 9 deletions.
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -1,21 +1,36 @@
+<template>
+  <div id="app-div">
+    <div id="overlay-btns-div">
+      <button id="add-map-btn" @click="this.addMap">Add Map</button>
+      <button id="remove-map-btn" @click="this.removeMap">Remove Map</button>
+    </div>
+    <Map></Map>
+  </div>
+</template>
+
 <script>
 import Map from "./components/Map.vue";
-
+import { useMapStore } from "./stores/MapStore";
 export default {
   components: {
     Map,
   },
+  data() {
+    return {};
+  },
+
+  methods: {
+    addMap() {
+      useMapStore().createMapComponent(this.$el);
+    },
+
+    removeMap() {
+      useMapStore().removeMap();
+    },
+  },
 };
 </script>
 
-<template>
-  <div id="app-div">
-    <Map></Map>
-    <Map></Map>
-    <Map></Map>
-  </div>
-</template>
-
 <style>
 @import "https://js.arcgis.com/4.28/@arcgis/core/assets/esri/themes/light/main.css";
 html,
@@ -29,5 +44,45 @@ body {
   flex-direction: row;
   height: 100vh;
   width: 100vw;
+  position: relative;
+}
+
+#overlay-btns-div {
+  position: absolute;
+  top: 90vh;
+  left: 40vw;
+  z-index: 1000;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  width: 250px;
+}
+
+#remove-map-btn {
+  background-color: red;
+  color: white;
+  width: 100px;
+  height: 50px;
+  font-weight: bold;
+}
+
+#remove-map-btn:hover {
+  background-color: lightpink;
+  color: darkred;
+  font-weight: bolder;
+}
+
+#add-map-btn {
+  background-color: blue;
+  color: white;
+  width: 100px;
+  height: 50px;
+  font-weight: bold;
+}
+
+#add-map-btn:hover {
+  background-color: cornflowerblue;
+  color: darkblue;
+  font-weight: bolder;
 }
 </style>
diff --git a/demo/src/stores/MapStore.js b/demo/src/stores/MapStore.js
@@ -3,6 +3,8 @@ import Map from "@arcgis/core/Map.js";
 import MapView from "@arcgis/core/views/MapView.js";
 import { v4 as uuid } from "uuid";
 import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
+import Vue from "vue";
+import MapComponent from "../components/Map.vue";
 
 export const useMapStore = defineStore("mapStore", {
   state() {
@@ -62,6 +64,27 @@ export const useMapStore = defineStore("mapStore", {
       return mapObj;
     },
 
+    createMapComponent(container = null) {
+      const MapComponentClass = Vue.extend(MapComponent);
+      const new_map = new MapComponentClass();
+      new_map.$mount();
+      container.appendChild(new_map.$el);
+    },
+
+    removeMap(id = null) {
+      let mapObj = null;
+      if (id == null) {
+        mapObj = this.mapObjects.at(-1);
+      } else {
+        mapObj = this.get_mapObject(id);
+      }
+
+      this.mapObjects = this.mapObjects.filter((mo) => mo !== mapObj);
+      mapObj?.view.container.remove();
+      mapObj?.view.destroy();
+      mapObj?.map.destroy();
+    },
+
     syncMaps(targetMapObj) {
       this.mapObjects
         .filter((mo) => mo !== targetMapObj)