multiple maps!

demo/src/App.vue

@@ -11,11 +11,12 @@ export default {
 <template>
   <div id="app-div">
     <Map></Map>
+    <Map></Map>
+    <Map></Map>
   </div>
 </template>
 
 <style>
-
 html,
 body {
   margin: 0;

demo/src/components/Logo.vue

@@ -9,12 +9,13 @@
 </template>
 
 <script>
-import { useMapStore } from "../stores/MapStore";
-
 export default {
+  props: { mapObject: Object },
+
   mounted() {
-    const view = useMapStore().view;
-    view.ui.add(this.$el, "bottom-right");
+    console.info("Logo.vue::mounted()");
+    console.info("this.mapObject: ", this.mapObject);
+    this.mapObject?.view.ui.add(this.$el, "bottom-right");
   },
 };
 </script>

demo/src/components/LonLatBox.vue

@@ -1,24 +1,24 @@
 <template>
-  <div id="lat-lon-box" style="background-color: ivory; padding: 2px">
-    <p style="margin: 0; padding: 0;">
+  <div id="lat-lon-box">
+    <p class="lat-lon-val">
       lat: <b>{{ this.lat }}</b>
     </p>
-    <p style="margin: 0; padding: 0">
+    <p class="lat-lon-val">
       lon: <b>{{ this.lon }}</b>
     </p>
   </div>
 </template>
 
 <script>
-import { useMapStore } from "../stores/MapStore";
 export default {
+  props: {
+    mapObject: Object,
+  },
   data() {
-    const _mapStore = useMapStore();
     const _lat = "n/a";
     const _lon = "n/a";
 
     return {
-      mapStore: _mapStore,
       lat: _lat,
       lon: _lon,
     };
@@ -33,7 +33,7 @@ export default {
 
   mounted() {
     console.log("LonLatBox.vue::mounted()");
-    const view = this.mapStore.view;
+    const view = this.mapObject.view;
     view.ui.add(this.$el, "top-right");
 
     // setup event callback
@@ -44,3 +44,16 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+#lat-lon-box {
+  background-color: ivory;
+  padding: 2px;
+}
+
+.lat-lon-val {
+  margin: 0;
+  padding: 0;
+}
+</style>
+```

demo/src/components/Map.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="viewDiv">
-    <Logo />
-    <LonLatBox />
-    <ScaleBox />
+    <Logo :mapObject="this.mapObject" />
+    <LonLatBox :mapObject="this.mapObject" />
+    <ScaleBox :mapObject="this.mapObject" />
   </div>
 </template>
 
@@ -23,24 +23,29 @@ export default {
     const _mapStore = useMapStore();
 
     return {
-      name: "map",
+      mapObject: null,
       mapStore: _mapStore,
     };
   },
 
-  methods: {
-    doIt() {
-      console.info("Map.vue::doIt()");
-      console.info("this.mapStore.view.zoom: ", this.mapStore.view.zoom);
+  computed: {
+    map() {
+      return this.mapObject?.map;
+    },
+    view() {
+      return this.mapObject?.view;
+    },
+    mapObj_id() {
+      return this.mapObject?.id;
     },
   },
 
-  mounted() {
-    this.mapStore.onMount(this.$el);
+  beforeMount() {
+    this.mapObject = this.mapStore.init_mapObject();
+  },
 
-    this.mapStore.view.when(() => {
-      this.doIt();
-    });
+  mounted() {
+    this.mapStore.onMount(this.$el, this.mapObj_id);
   },
 };
 </script>
@@ -50,5 +55,6 @@ export default {
 
 #viewDiv {
   flex: 1;
+  border: rgb(38, 38, 37) solid 2px;
 }
 </style>

demo/src/components/ScaleBox.vue

@@ -8,11 +8,13 @@
 </template>
 
 <script>
-import { useMapStore } from "../stores/MapStore";
 import ScaleBar from "@arcgis/core/widgets/ScaleBar";
 import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
 
 export default {
+  props: {
+    mapObject: Object,
+  },
   data() {
     return { ratio: "n/a" };
   },
@@ -25,7 +27,7 @@ export default {
   },
 
   mounted() {
-    const view = useMapStore().view;
+    const view = this.mapObject.view;
 
     reactiveUtils
       .whenOnce(() => view.ready)

demo/src/stores/MapStore.js

@@ -1,36 +1,57 @@
 import { defineStore } from "pinia";
 import Map from "@arcgis/core/Map.js";
 import MapView from "@arcgis/core/views/MapView.js";
+import { v4 as uuid } from "uuid";
 
 export const useMapStore = defineStore("mapStore", {
   state() {
-    const map = new Map({
-      basemap: "topo-vector",
-    });
-
-    const view = new MapView({
-      map: map,
-      zoom: 6,
-      center: [-2.244, 53.483], // lon, lat
-    });
-
-    return { map: map, view: view };
+    const mapObjects = [];
+    return { mapObjects: mapObjects };
   },
 
-  getters: {
-    // map() {
-    //   console.log("mapStore::getters::map");
-    //   return this._map;
-    // },
-  },
+  getters: {},
 
   actions: {
-    init_mapView(container) {
-      this.view.container = container;
+    get_mapObject(id) {
+      if (id == null) {
+        throw new Error("mapStore::get_mapObject(id) id is null");
+      }
+      const mo = this.mapObjects.find((obj) => obj.id === id);
+
+      if (mo == null) {
+        throw new Error(`mapStore::get_mapObject(id) id ${id} not found`);
+      }
+
+      return mo;
+    },
+
+    init_mapObject(id = uuid()) {
+      const map = new Map({
+        basemap: "topo-vector",
+      });
+
+      const view = new MapView({
+        container: null,
+        map: map,
+        center: [-2.28, 53.474], // longitude, latitude
+        zoom: 6,
+      });
+
+      const mapObj = { id: id, map: map, view: view };
+
+      this.mapObjects.push(mapObj);
+      console.log("mapObjects lenght: ", this.mapObjects.length);
+      return mapObj;
     },
 
-    onMount(container) {
-      this.init_mapView(container);
+    onMount(container_, id) {
+      const v = this.get_mapObject(id)?.view;
+
+      if (v == null) {
+        throw new Error(`view is null`);
+      }
+
+      v.container = container_;
       this.doSomething();
     },