Tutorial VueJS – Menampilkan Peta Dengan VueJs dan LeafletJs

Dipublikasikan oleh El Cicko pada

membuat peta dengan vuejs dan leaflet

Pada tutorial VueJS kali ini saya akan menjelaskan tutorial tentang bagaimana cara menampilkan peta dengan VueJS dan LeafletJs. LeafletJS adalah sebuah library javascript yang bersifat open source yang digunakan untuk untuk membangun aplikasi peta interaktif berbasis web.

Tutorial VueJS – Peta Dengan VueJs dan LeafletJs

Kelebihan dari LeafletJS sendiri adalah kita dapat menggunakan layer dari Map Provider secara fleksibel sehingga kita dapat menggunakan layer Google Maps, Mapbox atau Esri secara dinamis.

Cara Install Vue CLI

Pada bagian ini kita akan memulai instalasi library yang dibutuhkan, pertama kita harus menginstall terlebih dahulu Vue CLI di environment kita.

Cara install Vue CLI adalah dengan menggunakan NPM. Setidaknya kita memiliki Node versi 8.9 ke atas. Untuk menginstall Vue CLI, ketik perintah berikut pada console kamu.

npm install -g @vue/cli

Selain cara install Vue CLI dengan menggunakan NPM kita juga dapat menggunakan perintah Yarn.

yarn global add @vue/cli

Kamu bisa ikuti instruksi secara rinci tentang cara install Vue CLI dihalaman dokumentasi resminya.

Membuat Project Baru

Setelah proses instalasi Vue CLI selesai, sekarang kita akan mulai membuat project baru dengan VueJS. ketik perintah vue create <nama-project> pada console kamu.

Project yang akan kita buat adalah vue-map jadi perintah yang kita ketik di console adalah vue create vue-map, setelah itu kita install library yang kita butuhkan.

Library yang kita butuhkan adalah Vue2Leaflet dari KoRiGaN. Ketik perintah berikut didalam direktori vue-map untuk mulai instalasi.

npm install vue2-leaflet leaflet --save
Tutorial VueJS - Menampilkan Peta Dengan VueJs dan LeafletJs 1

Ok, proses membuat project baru dengan VueJS sudah selesai. Sekarang kita jalankan project dengan mengetikkan perintah npm run serve, setelah itu akses alamat http://localhost:8080 di browser kamu.

Tutorial VueJS - Menampilkan Peta Dengan VueJs dan LeafletJs 2

Membuat Component

Sekarang kita akan mulai melakukan konfigurasi pada main.js dengan melakukan import component dari Vue2Leaflet yang sudah kita install agar dapat digunakan di component yang lain.

import Vue from 'vue';
import App from './App.vue';
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
import { Icon } from 'leaflet';
import 'leaflet/dist/leaflet.css';

Vue.component('l-map', LMap);
Vue.component('l-tile-layer', LTileLayer);
Vue.component('l-marker', LMarker);

delete Icon.Default.prototype._getIconUrl;

Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Baca Juga : Kumpulan Tutorial Google Maps Untuk Membuat Aplikasi GIS Lanjutan

Setelah itu kita akan mulai membuat component untuk menampilkan peta dengan VueJs dan LeafletJS.

Hapus file HelloWorld.vue yang ada didalam direktori components lalu buat file baru dengan nama Map.vue, setelah itu kita hapus isi dari file App.vue dan kita tulis code berikut :

<template>
  <div id="app">
    <Map/>
  </div>
</template>

<script>
import Map from './components/Map.vue'

export default {
  name: 'app',
  components: {
    Map
  }
}
</script>

Penjelasan dari code diatas adalah kita melakukan import component Map.vue pada component App.vue lalu menyisipkannya kedalam template sehingga component tersebut dapat dirender dan ditampilkan di Browser.

Setelah itu kita akan mulai melakukan perubahan di file Map.vue.

Memilih Base Map

Pertama kita harus mendapatkan koordinat peta yang akan kita tampilkan, pada contoh kasus ini saya menggunakan koordinat Kota Bandung yaitu -6.93,107.60.

Untuk layer map saya menggunakan Open Street Maps yang bersifat Open Source. Jadi property yang digunakan adalah sebagai berikut :

{
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 12,
      center: [-6.93,107.60],
      bounds: null
    }

Sekarang kita tulis kode lengkapnya

<template>
  <div class="map">
      <h2>Peta Dengan VueJs dan LeafletJs</h2>
      <div style="height: 600px; width: 100%">
        <l-map :zoom="zoom" :center="center">
          <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
        </l-map>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 12,
      center: [-6.93,107.60],
      bounds: null
    };
  }
}
</script>

Compile kode tersebut dengan mengetikkan perintah npm run serve maka ketika dijalankan hasilnya seperti ini

Tutorial VueJS - Menampilkan Peta Dengan VueJs dan LeafletJs 3

Menampilkan Marker

Yang terakhir, kita akan menambahkan Marker kedalam peta tersebut, koordinat dari Marker itu sendiri kita ambil dari koordinat Kota Bandung, kodenya seperti ini :

<template>
  <div class="map">
      <h2>Peta Dengan VueJs dan LeafletJs</h2>
      <div style="height: 600px; width: 100%">
        <l-map :zoom="zoom" :center="center">
          <l-marker :lat-lng="center"></l-marker>
          <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
        </l-map>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 12,
      center: [-6.93,107.60],
      bounds: null,
    };
  }
}
</script>

Dari kode diatas maka hasilnya adalah sebagai berikut :

Peta Dengan VueJs dan LeafletJs

Sekian dulu tutorial VueJS dari saya tentang cara menampilkan peta dengan VueJS dan LealfetJS. Silahkan dicoba dan semoga bermanfaat.

Download Source Code : https://github.com/rikyhsb/vue-map


El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

0 Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *