package.json

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

src/App.vue

@@ -4,10 +4,9 @@ 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({lat:0,lon:0});
+const decryptedLoc = ref("");
 const decryptedLocWords = ref("");
 
 function createWords() {
@@ -60,7 +59,6 @@ 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>
@@ -73,11 +71,6 @@ function decodeWords() {
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
 }
-
-.map{
-  width: 400px;
-  height: 400px;
-}
 .words {
   color: #12c05d;
 }

src/components/map/Map.vue

@@ -1,78 +0,0 @@
-<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,10 +1,8 @@
 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).use(OpenLayersMap).mount('#app')
+createApp(App).use(PrimeVue).mount('#app')

src/style.css

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