Updated version and docs to prepare for 0.1.5. Also fixed the README and the issue template to be more organic.

2022-11-17 19:12:31 -03:00
parent 08b742c7c6
commit 04c3555bab
11 changed files with 139 additions and 41 deletions
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "vue-google-maps-community-fork-docs",
-  "version": "0.0.1",
+  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "vue-google-maps-community-fork-docs",
-      "version": "0.0.1",
+      "version": "0.1.0",
      "license": "MIT",
      "devDependencies": {
        "vuepress": "^1.9.7"
@@ -8742,9 +8742,9 @@
      }
    },
    "node_modules/loader-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
      "dev": true,
      "dependencies": {
        "big.js": "^5.2.2",
@@ -13861,7 +13861,7 @@
    "node_modules/vuepress-html-webpack-plugin/node_modules/loader-utils": {
      "version": "0.2.17",
      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-      "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+      "integrity": "sha512-tiv66G0SmiOx+pLWMtGEkfSEejxvb6N6uRrQjfWJIT79W9GMpgKeCAmm9aVBKtd4WEgntciI8CsGqjpDoCWJug==",
      "dev": true,
      "dependencies": {
        "big.js": "^3.1.3",
@@ -21527,9 +21527,9 @@
      "dev": true
    },
    "loader-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
      "dev": true,
      "requires": {
        "big.js": "^5.2.2",
@@ -25767,7 +25767,7 @@
        "loader-utils": {
          "version": "0.2.17",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "integrity": "sha512-tiv66G0SmiOx+pLWMtGEkfSEejxvb6N6uRrQjfWJIT79W9GMpgKeCAmm9aVBKtd4WEgntciI8CsGqjpDoCWJug==",
          "dev": true,
          "requires": {
            "big.js": "^3.1.3",
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-google-maps-community-fork-docs",
-  "version": "0.0.1",
+  "version": "0.1.0",
  "description": "Documentation for Vue Google Maps Community Fork",
  "main": "index.js",
  "authors": {
@@ -9,7 +9,7 @@
  },
  "repository": "NathanAP/vue-google-maps-community-fork",
  "scripts": {
-    "dev": "vuepress dev src",
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider vuepress dev src",
    "build": "vuepress build src"
  },
  "license": "MIT",
--- a/docs/src/.vuepress/config.js
+++ b/docs/src/.vuepress/config.js
@@ -85,6 +85,7 @@ module.exports = {
          '/examples/how-to-access-google-maps-object',
          '/examples/how-to-add-custom-controls',
          '/examples/how-to-open-or-close-info-window-on-event',
+          '/examples/using-custom-renderer-function-and-clustering-algorithm',
        ],
      },
    ],
--- a/docs/src/components/cluster.md
+++ b/docs/src/components/cluster.md
@@ -1,9 +1,13 @@
 # Cluster

-Here you will find some uses for Google Maps Cluster component:
+Here you will find some uses for Google Maps Clusterers.

 [[toc]]

+## Before everything
+
+Clustering your markers are only possible because of `@googlemaps/markerclusterer`! The community is thankful for your effort!
+
 ## Cluster your markers

 You can add clusters to your `GMapMarker` using `GMapCluster` component inside of `GMapMap` component:
@@ -36,7 +40,7 @@ You can add clusters to your `GMapMarker` using `GMapCluster` component inside o
              lat: 51.093048,
              lng: 6.84212,
            },
-          }, // Along list of clusters
+          }, // A long list of clusters
        ],
      }
    },
--- a/docs/src/examples/README.md
+++ b/docs/src/examples/README.md
@@ -11,3 +11,5 @@ Here you will find some basic examples that might be useful for you.
 - [How to add custom controls](./how-to-add-custom-controls.md)

 - [How to open or close an Info window on event](./how-to-open-or-close-info-window-on-event.md)
+
+- [Using custom renderer function and clustering algorithm](./using-custom-renderer-function-and-clustering-algorithm.md)
--- a/docs/src/examples/using-custom-renderer-function-and-clustering-algorithm.md
+++ b/docs/src/examples/using-custom-renderer-function-and-clustering-algorithm.md
@@ -0,0 +1,71 @@
+# Using custom renderer function and clustering algorithm
+
+In order to use custom renderer function and clustering algorithm, you will need to do the following step before:
+
+## Install `@googlemaps/makerclusterer` package into your own project
+
+Use `npm install @googlemaps/markerclusterer` to install the library into your project.
+
+Note: this is required because it was the best option for us to make Clustering viable. The original version of this library wasn't supporting the new MarkerClustering package version, so we had to make adjustments. You can read more about it in [this PR](https://github.com/NathanAP/vue-google-maps-community-fork/pull/19).
+
+## Example
+
+Following this example will help you create your own render function and clustering algorithm.
+
+```html
+<template>
+  <GMapMap
+    ref="google"
+    :center="center"
+    :zoom="7"
+    map-type-id="terrain"
+    style="width: 500px; height: 300px"
+  >
+    <GMapCluster :algorithm="algorithm" :renderer="{ renderer: renderer }">
+      <GMapMarker
+        v-for="(m, index) in markers"
+        :key="index"
+        :clickable="true"
+        :draggable="true"
+        :position="m.position"
+        @click="center = m.position"
+      />
+    </GMapCluster>
+  </GMapMap>
+</template>
+<script>
+  import { GridAlgorithm } from '@googlemaps/markerclusterer'
+
+  export default {
+    name: 'App',
+    data() {
+      return {
+        algorithm: new GridAlgorithm({}),
+        center: { lat: 51.093048, lng: 6.84212 },
+        google: null,
+        markers: [
+          {
+            position: {
+              lat: 51.093048,
+              lng: 6.84212,
+            },
+          }, // A long list of clusters
+        ],
+      }
+    },
+    methods: {
+      renderer: ({ count, position }) =>
+        new this.google.maps.Marker({
+          label: {
+            text: String(count),
+            color: 'white',
+            fontSize: '10px',
+          },
+          position,
+          // adjust zIndex to be above other markers
+          zIndex: Number(this.google.maps.Marker.MAX_ZINDEX) + count,
+        }),
+    },
+  }
+</script>
+```
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -100,7 +100,7 @@ export default {
            lat: 51.093048,
            lng: 6.84212,
          },
-        }, // Along list of clusters
+        }, // A long list of clusters
      ],
    }
  },