<template>
    <div ref="map" class="map"></div>
  </template>
  
  <script>
  import 'ol/ol.css';
  import { Map, View } from 'ol';
  import { fromLonLat } from 'ol/proj';
  import OSM from 'ol/source/OSM';
  import TileLayer from 'ol/layer/Tile';

  export default {
    data :() =>{
        return {
            name: 'Map',
            map: null,
        }
    },
  components: {},
  methods: {},
  watch: {},
  computed: {},
  mounted() {
    console.log("started map!!")
      this.map = new Map({
        target: this.$refs.map,
        view: new View({
            center: fromLonLat([126.9784, 37.5665]), // Centered around Seoul, Korea
          zoom: 8,
        }),
        layers: [ new TileLayer({
      source: new OSM(),
    }),],
      });
    },
    beforeUnmount() {
      this.map.setTarget(null);
    },
  };
    
    
    
  </script>
  
  <style>
  .map {
    width: 100%;
    height: 861px;
  }
  </style>