Tutorial VueJs — Menampilkan Peta Dengan VueJs dan LeafletJs

Pada tutorial 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.

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.

Peta Dengan VueJs dan LeafletJs

#Instalasi

Pada bagian ini kita akan memulai instalasi library yang dibutuhkan, pertama kita harus menginstall terlebih dahulu Vue CLI. Kamu bisa ikuti instruksi tentang instalasi Vue CLI dihalaman dokumentasi resminya. Setelah selesai instalasi Vue CLI, sekarang kita akan mulai membuat project dengan mengetikkan perintah vue create <nama-project>.

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

Ok, instalasi sudah selesai sekarang kita jalankan project dengan mengetikkan perintah npm run serve, setelah itu akses alamat http://localhost:8080 di browser kamu.

#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.

#BaseMap

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

#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 :

Bagaimana ? mudah kan ? Silahkan dicoba dan semoga bermanfaat.

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

Originally published at https://elcicko.com on October 9, 2019.