[Vue.js] Implementing Kakao Maps 01 - Changing the settings and Level and Center

In your Vue.js project, implement the code to set up a Kakao map and change the center coordinates and zoom level.

[Vue.js] Implementing Kakao Map 01 - Setting up and changing Level, Center

we will mainly use the following Vue.js features.

  • Create KakaoMap.vue file - Create an independent component to render the map.
  • @click - zoomIn, zoomOut function, click on a port to move the map center coordinates
  • props - passes map options to the KakaoMap.vue file

Source Code

total 4 files

  • App.vue - Application root component
  • KakaoMap.vue - Kakao Map Component
  • api.js - Module to get data from the backend server. since we don't have a real server, we use some sample data after specifying it inside the module.
  • index.html - loads kakao map related libraries, loads google font icon stylesheet

project structure

Project Structure
[ROOT]
  +- public
  | +- index.html (+)
  +- src
       +- components/map
       | +- KakaoMap.vue (+)
       |Β
       +- service
       | +- api.js (+)
       |Β
       +- App.vue (+)
       +- main.js

src/App.vue

  • application Root Component
  • map control functionality + KakaoMap.vue
src/App.vue
<template> <div
  <div>
    <h3>kakao map demo(center, level)</h3>
    <div class="controll">
      <button @click="zoom(-1)">
        <span class="material-icons"> zoom_in </span>
      </button>
      <button @click="zoom(1)"> <span class="material-icons"> zoom_in</span> </button>
        <span class="material-icons"> zoom_out </span>
      </button>
    </div>
    <div class="map-area"> <div class="harbors">
      <div class="harbors">
        <div
          class="harbor"
          v-for="hbr in harbors"
          :key="hbr.seq"
          @click="showOnMap(hbr)"
        >
          <h4>{{ hbr.place }}</h4>
        </div>
      </div>
      <KakaoMap class="kmap" :options="mapOption" />
    </div>
    <!-- <div class="kmap" ref="map"></div> -->
  </div>
</template>

<script>
import KakaoMap from "./components/map/KakaoMap.vue";
import api from "./service/api";

export default {
  components: {
    KakaoMap,
  },
  data() {
    return {
      mapOption: {
        center: {
          lat: 33.450701,
          lng: 126.570667,
        },
        level: 8,
      },
      harbors: [], // empty
    };
  },
  mounted() {
    api.harbor.all((res) => {
      console.log("[List of harbors]", res.harbors);
      this.harbors = res.harbors;
    });
  },
  methods: {
    zoom(delta) {
      // delta : 1 or -1
      // console.log("[delta]", delta);
      const level = Math.max(3, this.mapOption.level + delta); // min level 3
      this.mapOption.level = level;
      // console.log(this.mapOption.level);
    },
    showOnMap(harbor) {
      // console.log("[center]", harbor);
      this.mapOption.center = {
        lat: harbor.lat,
        lng: harbor.lng,
      };
    },
  },
};
</script>

<style lang="scss">
button {
  border: 1px solid transparent;
  padding: 6px;
  background-color: #efefefdd;
  border-radius: 6px;
  &:hover {
    background-color: #ddd;
    border-color: #ddd;
    cursor: pointer;
  }
  &:active {
    background-color: #aaa;
    border-color: #aaa;
  }
}
.map-area {
  display: flex;
  .harbors {
    .harbor {
      padding: 10px;
      border: 1px solid transparent;
      &:hover {
        background-color: aliceblue;
        border-color: #6a9dff;
        cursor: pointer;
      }
      &:active {
        background-color: rgb(166, 197, 224);
        border-color: #4471c5;
      }
      h4 {
        margin: 0;
      }
    }
  }
  .kmap {
    flex: 1 1 auto;
  }
}
</style>

src/components/map/KakaoMap.vue

  • component for rendering kakao maps
  • separated into separate components for reuse
src/components/map/KakaoMap.vue
<template> <div ref="map"></div
  <div ref="map"></div>
</template>

<script>
let kakao = window.kakao;
export default {
  props: ["options"],
  data() {
    return {
      mapInstance: null,
    };
  },
  mounted() {
    kakao = kakao || window.kakao;
    console.log(this.$refs.map); // should be not null

    var container = this.$refs.map;

    const { center, level } = this.options;
    this.mapInstance = new kakao.maps.Map(container, {
      center: new kakao.maps.LatLng(center.lat, center.lng),
      level,
    });
    // console.log(this.mapInstance);
  },
  watch: {
    "options.level"(cur, prev) {
      console.log(`[LEVEL CHANGED] ${prev} => ${cur}`); // for testing
      this.mapInstance.setLevel(cur);
    },
    "options.center"(cur) {
      // console.log("[NEW CENTER]", cur.lat, cur.lng); // for test
      this.mapInstance.setCenter(new kakao.maps.LatLng(cur.lat, cur.lng));
    },
  },
};
</script>

<style>
.kmap {
  height: 600px;
}
</style>

src/service/api.js

  • responsible for communicating with the backend server
  • since we don't have a server, we'll use some port data as a sample.
src/service/api.js
const api = {
  harbor: {
    all(callback) {
      // We don't have a server, so we use fake data
      const harbors = [
        {
          seq: 398,
          place: "Jeju Port International Passenger Terminal",
          lat: 33.52456237850086,
          lng: 126.54371888191963,
        },
        {
          seq: 399,
          place: "Tongyeong Port",
          lat: 34.83952733985843,
          lng: 128.42015935198992,
        },
        {
          seq: 400,
          place: "Busan International Cruise Terminal",
          lat: 35.07980714092641,
          lng: 129.0798233676466,
        },
        {
          seq: 401,
          place: "Yeosu Coastal Passenger Terminal",
          lat: 34.73912218990838,
          lng: 127.7326117746759,
        },
        {
          seq: 402,
          place: "Mokpo Coastal Passenger Terminal",
          lat: 34.78242103832617,
          lng: 126.38379614665682,
        },
        {
          seq: 403,
          place: "Gunsan Port Coastal Passenger Terminal",
          lat: 35.97769454696543,
          lng: 126.63282769595156,
        },
        {
          seq: 404,
          place: "Incheon Port Coastal Passenger Terminal",
          lat: 37.45340487975725,
          lng: 126.59951650605112,
        },
      ];
      callback({ success: true, harbors });
    },
  },
};

export default api;

public/index.html

  • include kakao map library
  • include google font icon style
public/index.html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=e157567be3a5d1b3d0d3f47e1f7a5e6a"
    ></script>
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  </head>
  <body> <noscript
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

the detailed implementation is covered in the documentation below.

0. List

  1. setting up and testing the map - Setting up to use the map, writing test code to make sure it works correctly
  2. Create KakaoMap.vue component - Prepare a separate component for rendering maps
  3. Preparing the zoom change button - designing the zoom change button
  4. Change Zoom Level - Implementing the map zoom function
  5. change Map Center - Move the map center to the clicked port

1. Setting up and testing the map

2. Create the KakaoMap.vue component

3. Prepare the Zoom change button

4. Change Zoom Level - Zoom in and out of the map

5. Change map center - move the map center to the clicked port