Merge branch 'release/1.3.0' into master

.eslintrc.js

@@ -1,13 +1,9 @@
 module.exports = {
-  extends: [
-    '@studiometa/eslint-config/vue',
-  ],
+  extends: ['@studiometa/eslint-config'],
   settings: {
     'import/resolver': {
       alias: {
-        map: [
-          [ '@', './src/' ],
-        ],
+        map: [['@', './src/']],
       },
     },
   },

.github/workflows/npm-publish.yml

@@ -0,0 +1,24 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: NPM Publish
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm run build
+      - run: npm test
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.github/workflows/tests.yml

@@ -0,0 +1,31 @@
+name: Code Quality & Tests
+on: [push, pull_request]
+
+jobs:
+  code-quality:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+    - name: npm install, and lint
+      run: |
+        npm ci
+        npm run lint
+      env:
+        CI: true
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+    - name: npm install, build, and test
+      run: |
+        npm ci
+        npm run build 
+        npm test
+      env:
+        CI: true

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@studiometa/prettier-config');

README.md

@@ -19,7 +19,7 @@ The following components are available:
 | [MapboxMap](https://vue-mapbox-gl.meta.fr/components/MapboxMap)                             | Display a map with the given style.                                                                                         | ✅    |
 | [MapboxMarker](https://vue-mapbox-gl.meta.fr/components/MapboxMarker)                       | Display a simple or custom marker.                                                                                          | ✅    |
 | [MapboxCluster](https://vue-mapbox-gl.meta.fr/components/MapboxCluster)                     | Display a GeoJSON as clusters.                                                                                              | ✅    |
-| [MapboxGeocoder](https://vue-mapbox-gl.meta.fr/components/MapboxGeocoder)                   | Display a geocoder search input with the [@mapbox/mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder) plugin. | ❌    |
+| [MapboxGeocoder](https://vue-mapbox-gl.meta.fr/components/MapboxGeocoder)                   | Display a geocoder search input with the [@mapbox/mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder) plugin. | ✅     |
 | [MapboxImage](https://vue-mapbox-gl.meta.fr/components/MapboxImage)                         | Load an image to be used on the map.                                                                                        | ✅    |
 | [MapboxImages](https://vue-mapbox-gl.meta.fr/components/MapboxImages)                       | Load multiple images to be used on the map.                                                                                 | ✅    |
 | [MapboxLayer](https://vue-mapbox-gl.meta.fr/components/MapboxLayer)                         | Display a layer on the map.                                                                                                 | ❌    |

babel.config.js

@@ -7,5 +7,5 @@ module.exports = {
       },
     ],
   ],
-  plugins: [ '@babel/plugin-proposal-export-default-from' ],
+  plugins: ['@babel/plugin-proposal-export-default-from'],
 };

docs/.vuepress/components/MapboxGeocoderDemo.vue

@@ -0,0 +1,34 @@
+<template>
+  <mapbox-map
+    style="margin-top: 1em; height: 400px;"
+    :access-token="MAPBOX_API_KEY"
+    map-style="mapbox://styles/mapbox/streets-v11">
+    <mapbox-geocoder
+      @mb-loading="onloading"
+      @mb-results="onresults"
+      @mb-result="onresult"
+      @mb-error="onerror" />
+  </mapbox-map>
+</template>
+
+<script>
+  require('@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css')
+
+  export default {
+    name: 'MapboxGeocoderDemo',
+    methods: {
+      onloading(query) {
+        console.log('onloading', query);
+      },
+      onresults(results) {
+        console.log('onresults', results);
+      },
+      onresult(result) {
+        console.log('onresult', result);
+      },
+      onerror(error) {
+        console.log('onerror', error);
+      },
+    }
+  };
+</script>

docs/.vuepress/components/MapboxGeocoderDemoWithoutMap.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="preview">
+    <mapbox-geocoder
+      :access-token="MAPBOX_API_KEY"
+      :reverse-geocode="reverseGeocode"
+      @mb-loading="log('loading', $event)"
+      @mb-results="log('results', $event)"
+      @mb-result="log('result', $event)"
+      @mb-error="log('error', $event)" />
+  </div>
+</template>
+
+<script>
+  import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';
+
+  export default {
+    name: 'MapboxGeocoderDemoWithoutMap',
+    props: {
+      reverseGeocode: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      log: console.log,
+    },
+  };
+</script>
+
+<style>
+  .preview {
+    z-index: 999;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3em;
+    background-color: #eee;
+    border-radius: 6px;
+  }
+</style>

docs/.vuepress/components/MapboxGeolocateControlDemo.vue

@@ -0,0 +1,27 @@
+<template>
+  <mapbox-geolocate-control
+    @mb-trackuserlocationstart="ontrackuserlocationstart()"
+    @mb-trackuserlocationend="ontrackuserlocationend()"
+    @mb-geolocate="ongeolocate()"
+    @mb-error="onerror()" />
+</template>
+
+<script>
+  export default {
+    name: 'GeolocateControlDemo',
+    methods: {
+      ontrackuserlocationend() {
+        console.log('MapboxGeolocateControl - trackuserlocationend');
+      },
+      ontrackuserlocationstart() {
+        console.log('MapboxGeolocateControl - trackuserlocationstart');
+      },
+      ongeolocate() {
+        console.log('MapboxGeolocateControl - geolocate');
+      },
+      onerror() {
+        console.log('MapboxGeolocateControl - error');
+      },
+    },
+  };
+</script>

docs/.vuepress/config.js

@@ -8,21 +8,13 @@ module.exports = {
   chainWebpack: (config) => {
     // Update babel-loader config to use the same configuration
     // as the project (especially the plugins).
-    config.module
-      .rule('js')
-      .test(/\.js$/)
-      .use('babel-loader')
-      .loader('babel-loader')
-      .options({
-        configFile: true,
-      });
+    config.module.rule('js').test(/\.js$/).use('babel-loader').loader('babel-loader').options({
+      configFile: true,
+    });
 
-    config.plugin('env').use(webpack.EnvironmentPlugin, [ 'MAPBOX_API_KEY' ]);
+    config.plugin('env').use(webpack.EnvironmentPlugin, ['MAPBOX_API_KEY']);
 
-    config.resolve.alias.set(
-      '@studiometa/vue-mapbox-gl',
-      resolve(__dirname, '../../src')
-    );
+    config.resolve.alias.set('@studiometa/vue-mapbox-gl', resolve(__dirname, '../../src'));
   },
   themeConfig: {
     nav: [
@@ -36,13 +28,11 @@ module.exports = {
           { text: 'MapboxMarker', link: '/components/MapboxMarker' },
           { text: 'MapboxCluster', link: '/components/MapboxCluster' },
           { text: 'MapboxGeocoder', link: '/components/MapboxGeocoder' },
+          { text: 'MapboxGeolocateControl', link: '/components/MapboxGeolocateControl' },
           { text: 'MapboxImage', link: '/components/MapboxImage' },
           { text: 'MapboxImages', link: '/components/MapboxImages' },
           { text: 'MapboxLayer', link: '/components/MapboxLayer' },
-          {
-            text: 'MapboxNavigationControl',
-            link: '/components/MapboxNavigationControl',
-          },
+          { text: 'MapboxNavigationControl', link: '/components/MapboxNavigationControl' },
           { text: 'MapboxPopup', link: '/components/MapboxPopup' },
           { text: 'MapboxSource', link: '/components/MapboxSource' },
         ],
@@ -51,7 +41,7 @@ module.exports = {
     ],
   },
   markdown: {
-    toc: { includeLevel: [ 2 ] },
+    toc: { includeLevel: [2] },
   },
   plugins: [
     [

docs/README.md

@@ -24,6 +24,7 @@ Check the detailed documentation on each components for a more advanced usage:
 | [MapboxImages](./components/MapboxImages.md)                       | Load multiple images to be used on the map.                                                                                 |
 | [MapboxLayer](./components/MapboxLayer.md)                         | Display a layer on the map.                                                                                                 |
 | [MapboxNavigationControl](./components/MapboxNavigationControl.md) | Display the map's navigation controls                                                                                       |
+| [MapboxGeolocateControl](./components/MapboxGeolocateControl.md)   | Display the map's geolocation control                                                                                 |
 | [MapboxPopup](./components/MapboxPopup.md)                         | Display a popup on the map                                                                                                  |
 | [MapboxSource](./components/MapboxSource.md)                       | Load a source of data to be used on the map                                                                                 |