Merge branch 'release/2.2.0'

.eslintrc.js

@@ -9,13 +9,15 @@ module.exports = {
         defineExpose: false,
       },
       rules: {
+        'no-unused-vars': 'off',
         'vue/no-boolean-default': 'off',
         'import/first': 'off',
         'vue/valid-define-emits': 'off',
         'vue/html-self-closing': 'off',
         'vue/max-attributes-per-line': 'off',
         'vue/singleline-html-element-content-newline': 'off',
         'import/extensions': ['error', 'ignorePackages'],
+        'vue/component-name-in-template-casing': ['error', 'PascalCase'],
       },
     },
   ],

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [v2.2.0](https://github.com/studiometa/vue-mapbox-gl/compare/2.1.1...2.2.0) (2023-09-15)
+
+### Added
+
+- Add support for the `clusterProperties` option ([4a55844](https://github.com/studiometa/vue-mapbox-gl/commit/4a55844), [#119](https://github.com/studiometa/vue-mapbox-gl/pull/119), fix [#117](https://github.com/studiometa/vue-mapbox-gl/issues/117))
+- Add support for the `clusterMinPoints` option ([4e403c7](https://github.com/studiometa/vue-mapbox-gl/commit/4e403c7), [#119](https://github.com/studiometa/vue-mapbox-gl/pull/119))
+- Add props to the `MapboxMap` component ([79d2929](https://github.com/studiometa/vue-mapbox-gl/commit/79d2929), [#121](https://github.com/studiometa/vue-mapbox-gl/pull/121), fix [#108](https://github.com/studiometa/vue-mapbox-gl/issues/108))
+
+### Fixed
+
+- Fix a bug where the geolocate control could be accessed before being added to the map ([3f8eaef](https://github.com/studiometa/vue-mapbox-gl/commit/3f8eaef), [#106](https://github.com/studiometa/vue-mapbox-gl/pull/106), fix [#77](https://github.com/studiometa/vue-mapbox-gl/issues/77))
+
 ## [v2.1.1](https://github.com/studiometa/vue-mapbox-gl/compare/2.1.0...2.1.1) (2023-04-17)
 
 ### Changed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@studiometa/vue-mapbox-gl-workspace",
   "private": true,
-  "version": "2.1.1",
+  "version": "2.2.0",
   "workspaces": [
     "packages/*"
   ],
@@ -16,18 +16,16 @@
     "build:esbuild": "node scripts/build.mjs",
     "build:cp": "cp packages/vue-mapbox-gl/package.json dist/ && cp README.md dist/",
     "prepublishOnly": "npm run build",
-    "test": "echo '@todo add tests.'",
-    "postinstall": "patch-package"
+    "test": "echo '@todo add tests.'"
   },
   "devDependencies": {
-    "@studiometa/eslint-config": "^3.1.1",
+    "@studiometa/eslint-config": "^3.1.2",
     "@studiometa/prettier-config": "^2.1.1",
-    "eslint": "^8.31.0",
-    "prettier": "^2.8.2"
+    "eslint": "^8.41.0",
+    "prettier": "^2.8.8"
   },
   "dependencies": {
     "esbuild": "^0.16.17",
-    "patch-package": "^6.5.1",
-    "unplugin-vue": "^4.0.1"
+    "unplugin-vue": "^4.1.0"
   }
 }

packages/demo/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@studiometa/vue-mapbox-gl-demo",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "scripts": {
     "dev": "nuxt dev",
     "build": "nuxt build"
   },
   "dependencies": {
-    "nuxt": "^3.0.0"
+    "@studiometa/vue-mapbox-gl": "file:../vue-mapbox-gl",
+    "mapbox-gl": "^2.14.1",
+    "nuxt": "^3.5.1",
+    "vue": "^3.3.4"
   }
 }

packages/demo/pages/issue-77.vue

@@ -0,0 +1,36 @@
+<script setup>
+  import { ref, computed, watch } from 'vue';
+  import { MapboxMap, MapboxGeolocateControl } from '@studiometa/vue-mapbox-gl';
+  import 'mapbox-gl/dist/mapbox-gl.css';
+
+  const accessToken =
+    'pk.eyJ1IjoiYWdlbmNlc3R1ZGlvbWV0YSIsImEiOiJjanh5ZW81aHEwOHV3M2lwZzhhNW1vdXl5In0.3hbV2QKVzZWf511JK9xCug';
+
+  const geolocate = ref();
+  const control = computed(() => geolocate.value?.control);
+
+  // The private `_setup` property can also be watched,
+  // as it is the property tested in the `trigger()` method.
+  watch(
+    // eslint-disable-next-line no-underscore-dangle
+    () => control.value?._setup,
+    () => console.log('Can use the `trigger()` method.')
+  );
+
+  watch(control, (geolocateControl) => {
+    if (geolocateControl) {
+      geolocateControl.trigger();
+    }
+  });
+</script>
+
+<template>
+  <div>
+    <MapboxMap
+      style="height: 60vh"
+      :access-token="accessToken"
+      map-style="mapbox://styles/mapbox/streets-v11">
+      <MapboxGeolocateControl ref="geolocate" />
+    </MapboxMap>
+  </div>
+</template>

packages/docs/components/MapboxCluster/index.md

@@ -86,7 +86,21 @@ The max zoom to cluster points on.
 - Type `Number`
 - Default `50`
 
-Radius of each cluster when clustering point
+Radius of each cluster when clustering point.
+
+### `clusterMinPoints`
+
+- Type `Number`
+- Default `2`
+
+Minimum number of points necessary to form a cluster.
+
+### `clusterProperties`
+
+- Type `Object`
+- Default `{}}`
+
+An object defining custom properties on the generated clusters.
 
 ### `clustersLayout`
 

packages/docs/components/MapboxMap/index.md

@@ -30,7 +30,7 @@ It is recommended to have a look at their [API reference](https://docs.mapbox.co
 
 ```vue
 <script setup>
-  import { ref } from "vue";
+  import { ref } from 'vue';
   import { MapboxMap } from '@studiometa/vue-mapbox-gl';
 
   const mapCenter = ref([0, 0]);
@@ -286,6 +286,70 @@ A map style definition, can be a JSON object following the [Mapbox Style specifi
 - Type `Boolean`
 - Default `true`
 
+### `cooperativeGestures`
+
+- Type: `Boolean`
+- Default: `false`
+
+### `language`
+
+- Type: `["auto", String, Array]`
+- Default: `null`
+
+### `locale`
+
+- Type: `Object`
+- Default: `null`
+
+### `localFontFamily`
+
+- Type: `String`
+- Default: `false`
+
+### `minTileCacheSize`
+
+- Type: `Number`
+- Default: `null`
+
+### `optimizeForTerrain`
+
+- Type: `Boolean`
+- Default: `true`
+
+### `performanceMetricsCollection`
+
+- Type: `Boolean`
+- Default: `true`
+
+### `projection`
+
+- Type: `ProjectionSpecification`
+- Default: `'mercator'`
+
+### `style`
+
+- Type: `[Object, String]`
+
+### `testMode`
+
+- Type: `Boolean`
+- Default: `false`
+
+### `touchPitch`
+
+- Type: `[Boolean, Object]`
+- Default: `true`
+
+### `useWebGL2`
+
+- Type: `Boolean`
+- Default: `false`
+
+### `worldview`
+
+- Type: `String`
+- Default: `null`
+
 ## Events
 
 ### `mb-created`

packages/docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@studiometa/vue-mapbox-gl-docs",
   "private": true,
-  "version": "2.1.1",
+  "version": "2.2.0",
   "scripts": {
     "dev": "vitepress",
     "build": "vitepress build"

packages/vue-mapbox-gl/components/MapboxCluster.vue

@@ -44,10 +44,28 @@
       type: Number,
       default: 50,
     },
+    /**
+     * Minimum number of points necessary to form a cluster.
+     * @type {number}
+     */
+    clusterMinPoints: {
+      type: Number,
+      default: 2,
+    },
+    /**
+     * An object defining custom properties on the generated clusters.
+     * @see  https://docs.mapbox.com/style-spec/reference/sources/#geojson-clusterProperties
+     * @see  https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/
+     * @type {object}
+     */
+    clusterProperties: {
+      type: Object,
+      default: () => ({}),
+    },
     /**
      * The layout configuration for the clusters circles
      * @see  https://docs.mapbox.com/mapbox-gl-js/example/cluster/
-     * @type {Object}
+     * @type {object}
      */
     clustersLayout: {
       type: Object,
@@ -56,7 +74,7 @@
     /**
      * The paint configuration for the clusters circles
      * @see  https://docs.mapbox.com/mapbox-gl-js/example/cluster/
-     * @type {Object}
+     * @type {object}
      */
     clustersPaint: {
       type: Object,
@@ -68,7 +86,7 @@
     /**
      * The layout configuration for the clusters count
      * @see  https://docs.mapbox.com/mapbox-gl-js/example/cluster/
-     * @type {Object}
+     * @type {object}
      */
     clusterCountLayout: {
       type: Object,
@@ -79,7 +97,7 @@
     /**
      * The paint configuration for the clusters count
      * @see  https://docs.mapbox.com/mapbox-gl-js/example/cluster/
-     * @type {Object}
+     * @type {object}
      */
     clusterCountPaint: {
       type: Object,
@@ -99,7 +117,7 @@
     /**
      * The layout configuration for the unclustered points
      * @see  https://docs.mapbox.com/mapbox-gl-js/example/cluster/
-     * @type {Object}
+     * @type {object}
      */
     unclusteredPointLayout: {
       type: Object,
@@ -108,7 +126,7 @@
     /**
      * The paint configuration for the unclustered points
      * @see  https://docs.mapbox.com/mapbox-gl-js/example/cluster/
-     * @type {Object}
+     * @type {object}
      */
     unclusteredPointPaint: {
       type: Object,
@@ -140,13 +158,15 @@
 
   const sourceId = computed(() => getId('source'));
   const source = computed(() => {
-    const { data, clusterMaxZoom, clusterRadius } = props;
+    const { data, clusterMaxZoom, clusterRadius, clusterMinPoints, clusterProperties } = props;
     return {
       type: 'geojson',
       cluster: true,
       data,
       clusterMaxZoom,
       clusterRadius,
+      clusterMinPoints,
+      clusterProperties,
     };
   });
 
@@ -170,7 +190,7 @@
 
   /**
    * The unclustered points layer
-   * @type {Object}
+   * @type {object}
    */
   const unclusteredPointLayer = computed(() => ({
     id: getId('unclustered-point'),
@@ -183,8 +203,7 @@
 
   /**
    * Click handler for the clusters layer to zoom on the clicked cluster
-   *
-   * @param  {Object} event The Mapbox click event's object
+   * @param  {object} event The Mapbox click event's object
    * @returns {void}
    */
   function clustersClickHandler(event) {
@@ -216,15 +235,13 @@
   }
   /**
    * Mouseenter handler for the clusters layer to set a pointer cursor
-   *
    * @returns {void}
    */
   function clustersMouseenterHandler() {
     unref(map).getCanvas().style.cursor = 'pointer';
   }
   /**
    * Mouseleave handler for the clusters layer to unset the pointer cursor
-   *
    * @returns {void}
    */
   function clustersMouseleaveHandler() {
@@ -234,8 +251,7 @@
   /**
    * Handler for the click event on a single feature, emits an event with
    * the feature object and the original event object
-   *
-   * @param  {Object} event The Mapbox click event's object
+   * @param  {object} event The Mapbox click event's object
    * @returns {void}
    */
   function unclusteredPointClickHandler(event) {
@@ -247,8 +263,7 @@
    * Handler for the mouseenter event on a single feature.
    * Emits an event with the feature object and the original event as
    * parameters, and sets the cursor style to pointer.
-   *
-   * @param  {Object} event The Mapbox mouseenter event's object
+   * @param  {object} event The Mapbox mouseenter event's object
    * @returns {void}
    */
   function unclusteredPointMouseenterHandler(event) {
@@ -261,8 +276,7 @@
    * Handler for the mouseleave event on a single feature.
    * Emits an event with the original event object as parameter, and resets
    * the cursor style to its default value.
-   *
-   * @param  {Object} event The Mapbox mouselvea event‘s object
+   * @param  {object} event The Mapbox mouselvea event‘s object
    * @returns {void}
    */
   function unclusteredPointMouseleaveHandler(event) {

packages/vue-mapbox-gl/components/MapboxGeolocateControl.vue

@@ -15,7 +15,7 @@
    * Component's props definition, we need to declare it outside the component
    * to be able to test the default values and the types.
    * @see https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol
-   * @type {Object}
+   * @type {object}
    */
   const propsConfig = {
     positionOptions: {