fix

package.json

@@ -14,7 +14,8 @@
     "primeicons": "^6.0.1",
     "primevue": "^3.26.0",
     "sass": "^1.60.0",
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "vue3-openlayers": "^0.1.75"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",

src/App.vue

@@ -4,9 +4,10 @@ import { ref } from "vue";
 import InputText from "primevue/inputtext";
 import Divider from "primevue/divider";
 import { encodeLocation, decodeLocation } from "geowords";
+import Map from './components/map/map.vue'
 const currentLoc = ref("");
 const currentLocWords = ref("");
-const decryptedLoc = ref("");
+const decryptedLoc = ref({lat:0,lon:0});
 const decryptedLocWords = ref("");
 
 function createWords() {
@@ -59,6 +60,7 @@ function decodeWords() {
         <InputText type="text" :onchange="changeWordsHandler" />
         <Divider />
         <Button size="large" severity="secondary" :onclick="decodeWords">Get localisation</Button>
+        <Map :center="decryptedLoc"></Map>
       </div>
     </div>
   </div>
@@ -71,6 +73,11 @@ function decodeWords() {
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.map{
+  width: 400px;
+  height: 400px;
+}
 .words {
   color: #12c05d;
 }

src/components/map/Map.vue

@@ -0,0 +1,78 @@
+<template>
+    <ol-map class="map-view">
+      <ol-view
+        ref="view"
+        :center="[center.lat, center.lon]"
+        :rotation="rotation"
+        :zoom="zoom"
+        :projection="projection"
+        
+        @zoomChanged="zoomChanged"
+        @centerChanged="centerChanged"
+        @resolutionChanged="resolutionChanged"
+        @rotationChanged="rotationChanged"
+      />
+  
+      <ol-tile-layer>
+        <ol-source-osm />
+      </ol-tile-layer>
+    </ol-map>
+  
+    <div>
+      center : {{ center }} zoom : {{ currentZoom }} resolution :
+      {{ currentResolution }} rotation : {{ currentRotation }}
+    </div>
+  </template>
+  
+  <script>
+  import { ref } from "vue";
+  export default {
+    setup(props) {
+      console.log('rerender')
+      const center = ref([props.center.lat, props.center.lon]);
+      const projection = ref("EPSG:4326");
+      const zoom = ref(8);
+      const rotation = ref(0);
+  
+      return {
+        center,
+        projection,
+        zoom,
+        rotation,
+      };
+    },
+    data() {
+      return {
+        currentCenter: this.center,
+        currentZoom: this.zoom,
+        currentResolution: this.resolution,
+        currentRotation: this.rotation,
+      };
+    },
+    props:{
+      center:{lat:Number,lon:Number}
+    },
+    methods: {
+      zoomChanged(currentZoom) {
+        this.currentZoom = currentZoom;
+      },
+      resolutionChanged(resolution) {
+        this.currentResolution = resolution;
+      },
+      centerChanged(center) {
+        this.currentCenter = center;
+      },
+      rotationChanged(rotation) {
+        this.currentRotation = rotation;
+      },
+    },
+  };
+  </script>
+
+  <style>
+.map-view{
+    width: 400px;
+    height:400px;
+}
+</style>
+  

src/main.js

@@ -1,8 +1,10 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import OpenLayersMap from "vue3-openlayers";
+import "vue3-openlayers/dist/vue3-openlayers.css";
 import PrimeVue from 'primevue/config';
 import "primevue/resources/primevue.min.css"; //core CSS
 import "./theme.css"
 import "primeicons/primeicons.css"; //icons
-createApp(App).use(PrimeVue).mount('#app')
+createApp(App).use(PrimeVue).use(OpenLayersMap).mount('#app')

src/style.css

@@ -1,3 +1,6 @@
 body{
     background:url('bg.jpg') repeat;
-}
+}
+html, body {
+    height: 100%;
+    }