v-mapbox-geocoder 🌎

vue-mapbox plugin for mapbox-gl-geocoder support.

Usage

First of all you need to install Mapbox GL and vue-mapbox. See vue-mapbox doc

# Install mabbox-gl-geocoder and vue-mapbox-geocoder:
$ npm i @mapbox/mapbox-gl-geocoder vue-mapbox @geospoc/v-mapbox-geocoder

Now you can add geocoder control like other controls:

<template>
  <MglMap
    :accessToken="accessToken"
    :mapStyle="mapStyle"
  >
    <MglGeocoderControl
      :accessToken="accessToken"
      :input.sync="defaultInput"
      container="geocoder_container_id"
      position="top-left"
      @results="handleSearch"
    />
  </MglMap>
</template>

<script>
  import { MglMap } from 'vue-mapbox';
  import MglGeocoderControl from '@geospoc/v-mapbox-geocoder';
  // you can also import this in your main.js or nuxt.config.js
  // or even main/global (s)css file
  import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'

  export default {
    name: 'App',
    components: {
      MglMap,
      MglGeocoderControl
    },
    data() {
      return {
        accessToken: 'YOUR_ACCESS_TOKEN',
        mapStyle: 'YOUR_MAP_STYLE',
        defaultInput: 'Bodhgaya'
      }
    },
    methods: {
      handleSearch(event) {
        console.log(event)
      }
    },
  };
</script>

Options for mapbox-gl-geocoder described here can be passed via props.

Additionaly you can pass syncronized prop input as in example below. It will be passed to mapbox-gl-geocoder as default input value. Each time you change value of this prop, mapbox-gl-geocoder .setInput method is called.

Same for proximity prop that internally invokes mapbox-gl-geocoder setProximity method.

Also you can call query method to query search and get results programmatically.

Credits

• Thanks to soal & his original vue-mapbox-geocoder
• All contributors (list).
• All GeoSpoc (team).

License

MIT © GeoSpoc