Skip to content

Commit dd96c2f

Browse files
siimaoosiimaoo
committed
docs: add docs
1 parent a36e12e commit dd96c2f

File tree

14 files changed

+344
-1
lines changed

14 files changed

+344
-1
lines changed

‎.github/workflows/deploy.yml

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
name: Deploy
2+
on:
3+
release:
4+
types: [created]
5+
6+
jobs:
7+
deploy:
8+
runs-on: ubuntu-latest
9+
permissions:
10+
pages: write
11+
id-token: write
12+
environment:
13+
name: github-pages
14+
url: ${{ steps.deployment.outputs.url }}
15+
steps:
16+
- uses: actions/checkout@v3
17+
with:
18+
fetch-depth: 0
19+
- uses: actions/setup-node@v3
20+
with:
21+
node-version: 18
22+
23+
- name: Configure corepack
24+
run: corepack enable
25+
26+
- name: Instal deps
27+
run: pnpm i
28+
29+
- name: Build
30+
run: pnpm docs:build
31+
32+
- uses: actions/configure-pages@v2
33+
- uses: actions/upload-pages-artifact@v1
34+
with:
35+
path: docs/.vitepress/dist
36+
37+
- name: Deploy
38+
id: deployment
39+
uses: actions/deploy-pages@v1

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,7 @@ dist-ssr
2424
*.sw?
2525

2626
.eslintcache
27+
28+
docs/.vitepress/build
29+
docs/.vitepress/dist
30+
docs/.vitepress/cache

‎docs/.vitepress/config.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { defineConfig } from 'vitepress';
2+
3+
// https://vitepress.dev/reference/site-config
4+
export default defineConfig({
5+
base: '/leaflet-markercluster-utils/',
6+
title: 'Leaflet Marker Cluster Utils',
7+
description: 'Docs of leaflet-markercluster-utils',
8+
themeConfig: {
9+
// https://vitepress.dev/reference/default-theme-config
10+
nav: [
11+
{ text: 'Home', link: '/' },
12+
{ text: 'Introduction', link: '/introduction' },
13+
{ text: 'Getting Started', link: '/getting-started' },
14+
{ text: 'API', link: '/api/open-cluster' },
15+
],
16+
17+
sidebar: [
18+
{
19+
text: 'About',
20+
items: [
21+
{ text: 'Introduction', link: '/introduction' },
22+
{ text: 'Getting Started', link: '/getting-started' },
23+
],
24+
},
25+
{
26+
text: 'API',
27+
items: [
28+
{ text: 'openCluster', link: '/api/open-cluster' },
29+
{ text: 'closeCluster', link: '/api/close-cluster' },
30+
{ text: 'getClusterAtCurrentZoom', link: '/api/get-cluster-at-current-zoom' },
31+
{ text: 'getSpiderfiedCluster', link: '/api/get-spiderfied-cluster' },
32+
{ text: 'isCluster', link: '/api/is-cluster' },
33+
{ text: 'isMarker', link: '/api/is-marker' },
34+
{ text: 'findMarker', link: '/api/find-marker' },
35+
],
36+
},
37+
],
38+
39+
socialLinks: [
40+
{ icon: 'github', link: 'https://github.com/siimaoo/leaflet-markercluster-utils' },
41+
],
42+
},
43+
});

‎docs/.vitepress/theme/custom.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:root {
2+
--vp-c-brand: #175ef6;
3+
--vp-c-brand-light: #175ef6;
4+
--vp-c-brand-lighter: #175ef6;
5+
--vp-c-brand-dark: #175ef6;
6+
--vp-c-brand-darker: #175ef6;
7+
}

‎docs/.vitepress/theme/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import DefaultTheme from 'vitepress/theme';
2+
import './custom.css';
3+
4+
export default DefaultTheme;

‎docs/api/close-cluster.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Close Cluster
2+
3+
The `closeCluster` function is used to close a cluster. It takes a `MarkerCluster` as the first argument.
4+
5+
### Why do I need this function?
6+
7+
Leaflet.markercluster can close a cluster by clicking on it. But if you want to close a cluster programmatically, you need to use this function.
8+
9+
**_"But I can use the `.unspiderfy()` function of the `MarkerCluster` class!"_**
10+
11+
Yes, you can. This time I don't have any good reason to convince you to use this function instead of the `.unspiderfy()` function. I just wanted to have a function to close a cluster. If you want to use the `.unspiderfy()` function, go ahead.
12+
13+
### Important Notes
14+
15+
- Check the [getCurrentZoomCluster](/api/get-cluster-at-current-zoom.md) function to understand how this function works.
16+
17+
```typescript
18+
import { closeCluster, getClusterAtCurrentZoom } from 'leaflet-markercluster-utils';
19+
20+
const cluster = L.markerClusterGroup();
21+
22+
const marker1 = L.marker([0, 0]);
23+
const marker2 = L.marker([0, 0]);
24+
25+
cluster.addLayer(marker1);
26+
cluster.addLayer(marker2);
27+
28+
map.addLayer(cluster);
29+
30+
document.querySelector('#open-cluster').addEventListener('click', () => {
31+
closeCluster(getClusterAtCurrentZoom(map.getZoom(), marker1));
32+
});
33+
```

‎docs/api/get-cluster-at-current-zoom.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Get Cluster At Current Zoom
2+
3+
The `getClusterAtCurrentZoom` function is used to get the cluster at the current zoom. It takes a `number` as the first argument and a `Marker` as the second argument. It returns a `MarkerCluster` or `undefined`.
4+
5+
### Why do I need this function?
6+
7+
Think about a scenario where you have a Marker and this marker is inside a cluster and you want to open this cluster. You can use the `openCluster` function to open this cluster. But you need to pass the cluster as the second argument. So, you need to get this cluster. This is where the `getClusterAtCurrentZoom` function comes in.
8+
9+
**_"But I can get the parent of this marker and it will be the cluster!"_**
10+
11+
Hmm... No. The parent of a marker can be the cluster that contains this marker or the cluster that contains the cluster that contains this marker (recursively). So, you need to validate if the cluster is the correct cluster for the current map zoom.
12+
13+
### Example
14+
15+
You can check the [openCluster](/api/open-cluster.md#important-notes) function to see an example of how to use this function.

‎docs/api/is-cluster.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Is Cluster
2+
3+
The `isCluster` function is used to check if the provided value is a cluster layer. It takes `any` as the first argument and returns a `boolean`.
4+
5+
### Why do I need this function?
6+
7+
If you want to check if a layer is a cluster layer, you can use this function.
8+
9+
### Example
10+
11+
```typescript
12+
import { isCluster } from 'leaflet-markercluster-utils';
13+
14+
const cluster = L.markerClusterGroup();
15+
16+
const marker1 = L.marker([0, 0]);
17+
const marker2 = L.marker([0, 0]);
18+
19+
cluster.addLayer(marker1);
20+
cluster.addLayer(marker2);
21+
22+
map.addLayer(cluster);
23+
24+
document.querySelector('#is-cluster').addEventListener('click', () => {
25+
console.log(isCluster(marker1)); // false
26+
console.log(isCluster(cluster)); // true
27+
});
28+
```

‎docs/api/is-marker.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Is Marker
2+
3+
The `isMarker` function is used to check if the provided value is a Marker. It takes `any` as the first argument and returns a `boolean`.
4+
5+
### Why do I need this function?
6+
7+
If you want to check if something is a Marker, you can use this function.
8+
9+
### Example
10+
11+
```typescript
12+
import { isMarker } from 'leaflet-markercluster-utils';
13+
14+
const cluster = L.markerClusterGroup();
15+
16+
const marker1 = L.marker([0, 0]);
17+
const marker2 = L.marker([0, 0]);
18+
19+
cluster.addLayer(marker1);
20+
cluster.addLayer(marker2);
21+
22+
map.addLayer(cluster);
23+
24+
document.querySelector('#is-cluster').addEventListener('click', () => {
25+
console.log(isMarker(marker1)); // true
26+
console.log(isMarker(cluster)); // false
27+
});
28+
```

‎docs/api/open-cluster.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Open Cluster
2+
3+
the `openCluster` function is used to open a cluster. It takes a `MarkerClusterGroup` layer as the first argument and a `MarkerCluster` as the second argument. You can also provide a callback function as the third argument. This callback function will be called when the cluster is opened.
4+
5+
### Why do I need this function?
6+
7+
Leaflet.markercluster can open a cluster by clicking on it. But if you want to open a cluster programmatically, you need to use this function.
8+
9+
**_"But I can use the `.spiderfy()` function of the `MarkerCluster` class!"_**
10+
11+
Yes, you can. But if you don't validate if has a cluster already opened, you can have a weird behavior since leaflet.markercluster doesn't allow to open more than one cluster at the same time.
12+
13+
### Important Notes
14+
15+
- Check the [getCurrentZoomCluster](/api/get-cluster-at-current-zoom.md) function to understand how this function works.
16+
17+
```typescript
18+
import { openCluster, getClusterAtCurrentZoom } from 'leaflet-markercluster-utils';
19+
20+
const cluster = L.markerClusterGroup();
21+
22+
const marker1 = L.marker([0, 0]);
23+
const marker2 = L.marker([0, 0]);
24+
25+
cluster.addLayer(marker1);
26+
cluster.addLayer(marker2);
27+
28+
map.addLayer(cluster);
29+
30+
document.querySelector('#open-cluster').addEventListener('click', () => {
31+
openCluster(cluster, getClusterAtCurrentZoom(map.getZoom(), marker1));
32+
});
33+
```

0 commit comments

Comments
 (0)