Membuat coordinate field di Nuxt.js dengan Vuetifyjs, Leafletjs, dan OpenStreetMap

redzjovi

17 Oct 2020 - 2 min read

Kita akan membuat komponen koordinat dengan menggunakan text-field pada Vuetify, peta Leaflet pada nuxt-leaflet, dan juga pencarian dengan provider OpenStreetMap dengan leaflet-geosearch.

Langkah-langkah:

Menginstall Nuxt
Menginstall Vuetify
Membuat komponen koordinat
Menginstall Leaflet
Memakai dialog dan peta OpenStreetMap

1. Menginstall Nuxt

Sesuai dengan panduan installasi Nuxt.js, pada kali ini saya menggunakan create-nuxt-app.

npx create-nuxt-app <project-name>

Kemudian pindah ke direktori tersebut dan jalankan pengembangan.

cd <project-name>

npm run dev

Jika sudah berhasil akan terlihat logo Nuxt.js.

2. Menginstall Vuetify

Pada kali ini saya menggunakan vuetify-module dari nuxt-community.

npm install--save @nuxtjs/vuetify

Tambahkan juga @nuxtjs/vuetify di modules pada nuxt.config.js

export default {
  modules: [
    '@nuxtjs/vuetify'
  ]
}

3. Membuat komponent koordinat

Buat file components/vuetify/CoordinateField.vue dengan text-field di dalamnya.

<template>
  <div>
    <v-text-field
      @change="textChange($event)"
      v-bind="$attrs"
      v-model="text.value"
      autocomplete="off"
      prepend-inner-icon="mdi-map-marker"
    >
    </v-text-field>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: '0,0',
      type: String
    }
  },
  data() {
    return {
      text: {
        value: this.value
      }
    }
  },
  watch: {
    value: function(value) {
      this.text.value = value
    }
  },
  methods: {
    textChange(value) {
      this.$emit('input', value)
    }
  }
}
</script>

Dan ubah pages/index.vue untuk memanggil komponen tersebut.

<template>
  <v-container>
    <CoordinateField
      v-model="coordinate"
      clearable
      dense
      label="Coordinate"
      outlined
    />
  </v-container>
</template>

<script>
import CoordinateField from '~/components/vuetify/CoordinateField'

export default {
  components: {
    CoordinateField
  },
  data() {
    return {
      coordinate: '-6.229728,106.6894312'
    }
  }
}
</script>

Sehingga tampilan menjadi

4. Menginstall Leaflet

Beberapa paket yang dipakai:

nuxt-leaflet

npm install --save nuxt-leaflet

Tambahkan nuxt-leaflet pada modules di nuxt.config.js.

{
  modules: [
    'nuxt-leaflet'
  ]
}

vue2-leaflet-fullscreen untuk melakukan full screen.

npm install --save vue2-leaflet-fullscreen

Saya juga membuat /plugins/leafleat.js untuk meregistrasi komponen LControlFullscreen

import Vue from 'vue'
import LControlFullscreen from 'vue2-leaflet-fullscreen'

Vue.component('l-control-fullscreen', LControlFullscreen)

Tambahkan leaflet.js dengan mode client pada plugins di nuxt.config.js

{
  plugins: [
    {
      mode: 'client',
      src: '~/plugins/leaflet'
    }
}

leaflet-geosearch untuk melakukan pencarian

npm install --save leaflet-geosearch

Saya juga membuat /plugins/leafletGeosearch.js dan melakukan inject leafletGeosearch untuk meinisialisasi class OpenStreetMapProvider pada objek provider

import { OpenStreetMapProvider } from 'leaflet-geosearch'

export default (context, inject) => {
  const leafletGeosearch = {}
  leafletGeosearch.provider = new OpenStreetMapProvider()

  inject('leafletGeosearch', leafletGeosearch)
}

Tambahkan leafletGeosearch.js dengan mode client pada plugins di nuxt.config.js

{
  plugins: [
    {
      mode: 'client',
      src: '~/plugins/leafletGeosearch'
    }
}

5. Memakai dialog dan peta OpenStreetMap