init scaleBox LatLoBox

show-and-tell-demo/src/App.vue

@@ -1,20 +1,16 @@
 <script>
 import Map from "./components/Map.vue";
-import HelloWorld from "./components/HelloWorld.vue";
-import ViteLogo from "./components/ViteLogo.vue";
+
 export default {
   components: {
     Map,
-    HelloWorld,
-    ViteLogo,
   },
 };
 </script>
 
 <template>
   <div>
     <Map></Map>
-    <ViteLogo />
   </div>
 </template>
 

show-and-tell-demo/src/components/LonLatBox.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="lat-lon-box">
+    <p>
+      lat: <b>{{ this.lat }}</b>
+    </p>
+    <p>
+      lon: <b>{{ this.lon }}</b>
+    </p>
+  </div>
+</template>
+
+<script>
+import { useMapStore } from "../stores/MapStore";
+export default {
+  data() {
+    const _mapStore = useMapStore();
+    const _lat = "n/a";
+    const _lon = "n/a";
+
+    return {
+      mapStore: _mapStore,
+      lat: _lat,
+      lon: _lon,
+    };
+  },
+
+  methods: {
+    setLatLon(mapPoint_) {
+      this.lat = mapPoint_.latitude?.toFixed(3);
+      this.lon = mapPoint_.longitude?.toFixed(3);
+    },
+  },
+
+  mounted() {
+    console.log("LonLatBox.vue::mounted()");
+    const view = this.mapStore.view;
+
+    view.on("pointer-move", (event) => {
+      const mapPoint = view.toMap({ x: event.x, y: event.y });
+
+      this.setLatLon(mapPoint);
+    });
+
+    view.when(() => {
+      view.ui.add(this.$el, "top-right");
+    });
+  },
+};
+</script>

show-and-tell-demo/src/components/Map.vue

@@ -1,11 +1,24 @@
 <template>
-  <div id="viewDiv"></div>
+  <div id="viewDiv">
+    <ViteLogo />
+    <LonLatBox />
+    <ScaleBox />
+  </div>
 </template>
 
 <script>
 import { useMapStore } from "../stores/MapStore";
+import ViteLogo from "./ViteLogo.vue";
+import LonLatBox from "./LonLatBox.vue";
+import ScaleBox from "./ScaleBox.vue";
 
 export default {
+  components: {
+    ViteLogo,
+    LonLatBox,
+    ScaleBox,
+  },
+
   data() {
     const _mapStore = useMapStore();
 

show-and-tell-demo/src/components/ScaleBox.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div id="scale-ratio">
+      <p class="m-0 pl-1">{{ this.ratio }}</p>
+    </div>
+    <div id="scale-widget"></div>
+  </div>
+</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 {
+  data() {
+    return { ratio: "n/a" };
+  },
+
+  methods: {
+    updateRatio(view) {
+      const value = Math.trunc(view.scale).toLocaleString("en-UK");
+      this.ratio = `1 : ${value}`;
+    },
+  },
+
+  mounted() {
+    const view = useMapStore().view;
+
+    reactiveUtils
+      .whenOnce(() => view.ready)
+      .then(() => {
+        this.updateRatio(view);
+      });
+
+    reactiveUtils.watch(
+      () => view?.zoom,
+      (zoom) => {
+        this.updateRatio(view);
+      }
+    );
+
+    const scaleBar = new ScaleBar({
+      view: view,
+      unit: "dual",
+      container: "scale-widget",
+    });
+
+    view.ui.add(this.$el, "bottom-left");
+  },
+};
+</script>
+
+<style scoped>
+.m-0 {
+  margin: 0;
+}
+
+.pl-1 {
+  padding-left: 1px;
+}
+
+#scale-ratio {
+  font-weight: bold;
+  text-align: left;
+}
+</style>

show-and-tell-demo/src/components/ViteLogo.vue

@@ -1,23 +1,16 @@
 <template>
-  <img src="../../public/vite.svg" alt="vite_logo" />
+  <div>
+    <img src="/vite.svg" alt="vite_logo" />
+  </div>
 </template>
 
 <script>
 import { useMapStore } from "../stores/MapStore";
 
 export default {
-  data() {
-    const _mapStore = useMapStore();
-
-    return {
-      name: "map",
-      mapStore: _mapStore,
-    };
-  },
-
   mounted() {
-    const view = this.mapStore.view;
-    view.ui.add(this.$el, "top-right");
+    const view = useMapStore().view;
+    view.ui.add(this.$el, "bottom-right");
   },
 };
 </script>

show-and-tell-demo/src/stores/MapStore.js

@@ -10,8 +10,8 @@ export const useMapStore = defineStore("mapStore", {
 
     const view = new MapView({
       map: map,
-      zoom: 4,
-      center: [-98, 35],
+      zoom: 6,
+      center: [-2.244, 53.483], // lon, lat
     });
 
     return { map: map, view: view };