Merge branch 'release/1.1.2'

studiometa · Jan 23, 2020 · b750cb4 · b750cb4
2 parents 14524f4 + 75a8fdf
commit b750cb4
Show file tree

Hide file tree

Showing 8 changed files with 1,082 additions and 135 deletions.
diff --git a/README.md b/README.md
@@ -23,8 +23,8 @@ The following components are available:
 | [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.                                                                                                 | ❌    |
-| [MapboxNavigationControl](https://vue-mapbox-gl.meta.fr/components/MapboxNavigationControl) | Display the map's navigation controls                                                                                       | ❌    |
-| [MapboxPopup](https://vue-mapbox-gl.meta.fr/components/MapboxPopup)                         | Display a popup on the map                                                                                                  | ❌    |
+| [MapboxNavigationControl](https://vue-mapbox-gl.meta.fr/components/MapboxNavigationControl) | Display the map's navigation controls                                                                                       | ✅    |
+| [MapboxPopup](https://vue-mapbox-gl.meta.fr/components/MapboxPopup)                         | Display a popup on the map                                                                                                  | ✅    |
 | [MapboxSource](https://vue-mapbox-gl.meta.fr/components/MapboxSource)                       | Load a source of data to be used on the map                                                                                 | ❌    |
 
 ## To do
@@ -42,20 +42,20 @@ git clone [email protected]:studiometa/vue-mapbox-gl.git
 # Cd in the repository
 cd vue-mapbox-gl
 # Install dependencies
-yarn
+npm i
 ```
 
 ### Useful commands
 
 ```bash
 # Build for deployment
-yarn run build
+npm run build
 # Test before deployment
-yarn run test
+npm run test
 # Lint files
-yarn run lint
+npm run lint
 # Fix linting errors
-yarn run fix
+npm run fix
 ```
 
 ## Note

diff --git a/docs/.vuepress/components/MapboxNavigationControlDemo.vue b/docs/.vuepress/components/MapboxNavigationControlDemo.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <mapbox-map
+      style="margin-top: 1em; height: 400px;"
+      :access-token="MAPBOX_API_KEY"
+      map-style="mapbox://styles/mapbox/streets-v11">
+      <mapbox-navigation-control position="bottom-right" />
+    </mapbox-map>
+  </div>
+</template>
+
+<style lang="scss">
+  // Import mapbox stylesheet to get + - and compass buttons styles
+  @import '~mapbox-gl/dist/mapbox-gl';
+</style>
diff --git a/docs/.vuepress/components/MapboxPopupDemo.vue b/docs/.vuepress/components/MapboxPopupDemo.vue
@@ -0,0 +1,10 @@
+<template>
+  <mapbox-map
+    style="margin-top: 1em; height: 400px;"
+    :access-token="MAPBOX_API_KEY"
+    map-style="mapbox://styles/mapbox/streets-v11">
+    <mapbox-popup :lng-lat="[10, 10]">
+      <p>Hello world !</p>
+    </mapbox-popup>
+  </mapbox-map>
+</template>
diff --git a/docs/components/MapboxNavigationControl.md b/docs/components/MapboxNavigationControl.md
@@ -6,4 +6,48 @@ next: ./MapboxPopup.md
 
 # MapboxNavigationControl
 
-...
+Display navigation controls on the map, including two zoom buttons + - and a compass button to rotate the map.
+
+- [Mapbox navigation controls documentation](https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol)
+- [Mapbox navigation controls example](https://docs.mapbox.com/mapbox-gl-js/example/navigation/)
+
+
+<h2>Table of contents</h2>
+
+[[toc]]
+
+## Examples
+
+### Basic usage
+
+<client-only>
+  <mapbox-navigation-control-demo api-key="MAPBOX_API_KEY" />
+</client-only>
+
+<<< @/docs/.vuepress/components/MapboxNavigationControlDemo.vue
+
+## Props
+
+### `position`
+
+- Type `[ String ]`
+- Required `false`
+- default `top-right`
+
+The position for the navigation control.
+
+### `showCompass`
+
+- Type `[ Boolean ]`
+- Required `false`
+- default `true`
+
+Show the compass button with the navigation control.
+
+### `showZoom`
+
+- Type `[ Boolean ]`
+- Required `false`
+- default `true`
+
+Show the zoom button with the navigation control.
diff --git a/docs/components/MapboxPopup.md b/docs/components/MapboxPopup.md
@@ -6,4 +6,104 @@ next: ./MapboxSource.md
 
 # MapboxPopup
 
-...
+Display a popup on the map.
+
+- [Mapbox popup documentation](https://docs.mapbox.com/mapbox-gl-js/api/#popup)
+- [Mapbox popup example](https://docs.mapbox.com/mapbox-gl-js/example/popup/)
+
+
+<h2>Table of contents</h2>
+
+[[toc]]
+
+## Examples
+
+### Basic usage
+
+<client-only>
+  <mapbox-popup-demo api-key="MAPBOX_API_KEY" />
+</client-only>
+
+<<< @/docs/.vuepress/components/MapboxPopupDemo.vue
+
+
+## Props
+
+### `lngLat`
+
+- Type `[ LngLat, Array, Object ]`
+- Required `true`
+
+Center position for the popup.
+
+### `closeButton`
+
+- Type `[ Boolean ]`
+- Required `false`
+- default `true`
+
+Display a close button on the popup.
+
+### `closeOnClick`
+
+- Type `[ Boolean ]`
+- Required `false`
+- default `true`
+
+Close the popup on close button click.
+
+### `anchor`
+
+- Type `[ String ]`
+- Required `false`
+
+A string indicating the part of the Popup that should be positioned closest to its coordinate. [See the mapbox-gl documentation for more details.](https://docs.mapbox.com/mapbox-gl-js/api/#popup).
+
+### `offset`
+
+- Type `[ Number, Point, Array, Object ]`
+- Required `false`
+- default `null`
+
+Offset the popup from it's original lngLat position.
+
+### `className`
+
+- Type `[ String ]`
+- Required `false`
+- default `null`
+
+Add a className to the popup.
+
+### `maxWidth`
+
+- Type `[ String ]`
+- Required `false`
+- default `240px`
+
+Set a max-width to the popup.
+
+## Events
+
+### `mb-open`
+
+Emitted when the popup is opened manually or programatically.
+
+**Params**
+- `popup`: the object that was opened
+- `event`: the Mapbox event object sent by the layer
+
+### `mb-close`
+
+Emitted when the popup is closed manually or programatically.
+
+**Params**
+- `popup`: the object that was closed
+- `event`: the Mapbox event object sent by the layer
+
+## Slots
+
+### `default`
+
+The default slot will be rendered inside the popup.
+
diff --git a/docs/guide/README.md b/docs/guide/README.md
@@ -6,27 +6,18 @@ sidebar: auto
 
 ## Installation
 
-Install it with Yarn:
+Install it with npm:
 
 ```bash
-yarn add @studiometa/vue-mapbox-gl
+npm add @studiometa/vue-mapbox-gl
 ```
 Or with NPM:
 
 ```bash
 npm install @studiometa/vue-mapbox-gl
 ```
 
-You will have to install the package peer dependencies in order for the components to work correctly, with Yarn:
-
-```bash
-# Install mapbox-gl
-yarn add mapbox-gl
-# The geocoder package is only required if you use the `MapboxGeocoder` component
-yarn add @mapbox/mapbox-gl-geocoder
-```
-
-Or with NPM:
+You will have to install the package peer dependencies in order for the components to work correctly, with npm:
 
 ```bash
 # Install mapbox-gl