Merge branch 'release/1.0.4'

.gitignore

@@ -22,3 +22,4 @@ yarn-error.log*
 
 # Build files
 dist/*.html
+docs/.vuepress/dist/

README.md

@@ -1,40 +1,18 @@
-# Vue Mapbox GL 🗺
+# 🗺 Vue Mapbox GL
 
-> A small components library to use Mapbox GL in Vue.
-
-## Usage
-
-Add the package to your project and its peer dependencies:
-
-```bash
-yarn add @studiometa/vue-mapbox-gl mapbox-gl
-# The geocoder package is only required if you use the `MapboxGeocoder` component
-yarn add @mapbox/mapbox-gl-geocoder
-```
+[![NPM Version](https://img.shields.io/npm/v/@studiometa/vue-mapbox-gl.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/vue-mapbox-gl)
+[![Dependency Status](https://img.shields.io/david/studiometa/vue-mapbox-gl.svg?label=deps&style=flat-square)](https://david-dm.org/studiometa/vue-mapbox-gl)
+[![devDependency Status](https://img.shields.io/david/dev/studiometa/vue-mapbox-gl.svg?label=devDeps&style=flat-square)](https://david-dm.org/studiometa/vue-mapbox-gl?type=dev)
 
-Install all components in Vue:
+> A small components library to use Mapbox GL in Vue.
 
-```js
-import Vue from 'vue';
-import VueMapbox from '@studiometa/vue-mapbox-gl';
+## Installation & usage
 
-Vue.use(VueMapbox);
-```
+Have a look at the [small guide](https://studiometa.github.io/vue-mapbox-gl/guide/) for information on how to setup a simple map.
 
-Or import only the ones you need in your Vue components:
+## Components
 
-```js
-import { MapboxMap, MapboxMarker } from '@studiometa/vue-mapbox-gl';
-
-export default {
-  // ...
-  components: {
-    MapboxMap,
-    MapboxMarker,
-  },
-  // ...
-};
-```
+Check the [detailed documentation](https://studiometa.github.io/vue-mapbox-gl/components/) on each components for a more advanced usage.
 
 ## To do
 

docs/.vuepress/config.js

@@ -0,0 +1,60 @@
+const { resolve } = require('path');
+
+module.exports = {
+  title: '🗺 Vue Mapbox GL',
+  description: 'A small library of Vue components for mapbox-gl',
+  head: [
+    [
+      'link',
+      {
+        rel: 'stylesheet',
+        href: 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css',
+      },
+    ],
+  ],
+  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,
+      });
+  },
+  themeConfig: {
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide/' },
+      {
+        text: 'Components',
+        link: '/components/',
+        items: [
+          { text: 'MapboxMap', link: '/components/MapboxMap' },
+          { text: 'MapboxMarker', link: '/components/MapboxMarker' },
+          { text: 'MapboxCluster', link: '/components/MapboxCluster' },
+          { text: 'MapboxGeocoder', link: '/components/MapboxGeocoder' },
+          { text: 'MapboxImage', link: '/components/MapboxImage' },
+          { text: 'MapboxLayer', link: '/components/MapboxLayer' },
+          { text: 'MapboxNavigationControl', link: '/components/MapboxNavigationControl' },
+          { text: 'MapboxPopup', link: '/components/MapboxPopup' },
+          { text: 'MapboxSource', link: '/components/MapboxSource' },
+        ],
+      },
+      { text: 'Github', link: 'https://github.com/studiometa/vue-mapbox-gl' },
+    ],
+  },
+  markdown: {
+    toc: { includeLevel: [ 2 ] },
+  },
+  plugins: [
+    [
+      '@vuepress/register-components',
+      {
+        componentsDir: resolve(__dirname, '../../src/components'),
+      },
+    ],
+  ],
+};

docs/README.md

@@ -0,0 +1,32 @@
+# 🗺 Vue Mapbox GL
+
+![NPM Version](https://img.shields.io/npm/v/@studiometa/vue-mapbox-gl.svg?style=flat-square)
+![Dependency Status](https://img.shields.io/david/studiometa/vue-mapbox-gl.svg?label=deps&style=flat-square)
+![devDependency Status](https://img.shields.io/david/dev/studiometa/vue-mapbox-gl.svg?label=devDeps&style=flat-square)
+
+> A small components library to use Mapbox GL in Vue.
+
+## Installation & usage
+
+Have a look at the [small guide](/guide/) for information on how to setup a simple map.
+
+## Components
+
+Check the detailed documentation on each components for a more advanced usage:
+
+|                        Component                        |                                   Description                                    |
+|---------------------------------------------------------|----------------------------------------------------------------------------------|
+| [MapboxMap](./components/MapboxMap.md)                             | Display a map with the given style.                                              |
+| [MapboxMarker](./components/MapboxMarker.md)                       | Display a simple or custom marker.                                               |
+| [MapboxCluster](./components/MapboxCluster.md)                     | Display a GeoJSON as clusters.                                                   |
+| [MapboxGeocoder](./components/MapboxGeocoder.md)                   | Display a geocoder search input with the [@mapbox/mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder) plugin. |
+| [MapboxImage](./components/MapboxImage.md)                         | Load an image 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                                            |
+| [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                                      |
+
+
+## Note
+
+This project is a rewrite of a fork of [openearth/vue2mapbox-gl](https://github.com/openearth/vue2mapbox-gl) and is published under the [GNU GPL 3](https://www.gnu.org/licenses/gpl-3.0.en.html) license.

docs/components/MapboxCluster.md

@@ -0,0 +1,147 @@
+---
+sidebar: auto
+prev: ./MapboxMarker.md
+next: ./MapboxGeocoder.md
+---
+
+
+# MapboxCluster
+
+Display a cluster on the map with data coming from a GeoJSON source.
+
+- [Mapbox cluster example](https://docs.mapbox.com/mapbox-gl-js/example/cluster/)
+- [Layer Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers)
+
+
+<h2>Table of contents</h2>
+
+[[toc]]
+
+## Examples
+
+### Basic usage
+
+<client-only>
+<mapbox-map
+  style="margin-top: 1em; height: 400px;"
+  access-token="pk.eyJ1IjoiYWdlbmNlc3R1ZGlvbWV0YSIsImEiOiJjanV3ZG5naGQwYWRpM3pxcnBmMnF1azA1In0.e1g9a95jAbc7ZtIibBOOVg"
+  map-style="mapbox://styles/mapbox/streets-v11">
+  <mapbox-cluster data="/earthquakes.json" />
+</mapbox-map>
+</client-only>
+
+```vue{5}
+<mapbox-map
+  style="height: 400px"
+  access-token="..."
+  map-style="mapbox://styles/mapbox/streets-v11">
+  <mapbox-cluster data="/earthquakes.json" />
+</mapbox-map>
+```
+
+## Props
+
+
+### `data`
+
+- Type `[ String, Object ]`
+- Required `true`
+
+The source of the data for the clustered points, must be a String or an Object of GeoJSON format.
+
+
+### `clusterMaxZoom`
+
+- Type `Number`
+- Default `14`
+
+The max zoom to cluster points on.
+
+### `clusterRadius`
+
+- Type `Number`
+- Default `50`
+
+Radius of each cluster when clustering point
+
+### `clustersLayout`
+
+- Type `Object`
+- Default `{}`
+
+The layout configuration for the clusters circles layer.
+
+### `clustersPaint`
+
+- Type `Object`
+- Default `{ 'circle-color': '#000', 'circle-radius': 40 }`
+
+The paint configuration for the clusters circles layer.
+
+### `clusterCountLayout`
+
+- Type `Object`
+- Default `{ 'text-field': [ 'get', 'point_count_abbreviated' ] }`
+
+The layout configuration for the clusters count layer.
+
+### `clusterCountPaint`
+
+- Type `Object`
+- Default `{ 'text-color': 'white' }`
+
+The paint configuration for the clusters count layer.
+
+### `unclusteredPointLayerType`
+
+- Type `String`
+- Default `'circle'`
+
+The type of the unclustered points layer.
+
+### `unclusteredPointLayout`
+
+- Type `Object`
+- Default `{}`
+
+The layout configuration for the unclustered points layer.
+
+### `unclusteredPointPaint`
+
+- Type `Object`
+- Default `{ 'circle-color': '#000', 'circle-radius': 4 }`
+
+The paint configuration for the unclustered points layer.
+
+## Events
+
+### `mb-cluster-click`
+
+Emitted when the user clicks on a cluster.
+
+**Params**
+- `clusterId`: the ID of the cluster being clicked
+- `event`: the Mapbox event object sent by the layer
+
+### `mb-feature-click`
+
+Emitted when the user clicks on a unclustered point (a feature).
+
+**Params**
+- `feature`: the feature being clicked on
+- `event`: the Mapbox event object sent by the layer
+
+### `mb-feature-mouseenter`
+
+Emitted when the user's mouse enters an unclustered point.
+
+**Params**
+- `feature`: the feature being clicked on
+- `event`: the Mapbox event object sent by the layer
+
+### `mb-feature-mouseleave`
+
+Emitted when the user's mouse leaves an unclustered point.
+
+**Params**
+- `event`: the Mapbox event object sent by the layer

docs/components/MapboxGeocoder.md

@@ -0,0 +1,9 @@
+---
+sidebar: auto
+prev: ./MapboxCluster.md
+next: ./MapboxImage.md
+---
+
+# MapboxGeocoder
+
+...

docs/components/MapboxImage.md

@@ -0,0 +1,9 @@
+---
+sidebar: auto
+prev: ./MapboxGeocoder.md
+next: ./MapboxLayer.md
+---
+
+# MapboxImage
+
+...

docs/components/MapboxLayer.md

@@ -0,0 +1,9 @@
+---
+sidebar: auto
+prev: ./MapboxImage.md
+next: ./MapboxNavigationControl.md
+---
+
+# MapboxLayer
+
+...