Skip to content

Commit 90c8926

Browse files
kikuomaxkikuomax
committed
feat(example): add example app
- Adds an example app in the `example` folder. To demonstrate `mapbox-collision-boxes`, this app shows a Mapbox map around Tokyo Station, and randomly spreads cat and dog symbols. You can click a cat or dog symbol and see which symbols are hidden by it. - The project was created with `npm init vue@latest`.
1 parent 478b1a9 commit 90c8926

22 files changed

+4048
-0
lines changed

‎example/.gitignore‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.DS_Store
12+
dist
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
/cypress/videos/
18+
/cypress/screenshots/
19+
20+
# sensitive config
21+
/src/mapbox-config.ts
22+
23+
# Editor directories and files
24+
.vscode/*
25+
!.vscode/extensions.json
26+
.idea
27+
*.suo
28+
*.ntvs*
29+
*.njsproj
30+
*.sln
31+
*.sw?

‎example/.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3+
}

‎example/README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Example for Mapbox Collision Boxes
2+
3+
A simple [Vue 3](https://vuejs.org) app to demonstrate `mapbox-collision-boxes`.
4+
This project was generated with `npm init vue@latest`.
5+
6+
This app shows a [Mapbox](https://www.mapbox.com) map around Tokyo Station, and randomly spreads cat and dog symbols.
7+
You can click a cat or dog symbol and see which symbols are hidden by it.
8+
![screenshots](./screenshots.png)
9+
10+
## Getting started
11+
12+
### Prerequisites
13+
14+
You need [Node.js](https://nodejs.org/en/) installed.
15+
I have developed this library with the version 16, but the version 12 or higher should be fine.
16+
17+
[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/) requires an [access token](https://docs.mapbox.com/help/getting-started/access-tokens/) to download map data.
18+
No access token is included in this repository, so you have to create it yourself.
19+
Please also refer to ["Configuring Mapbox access token"](#configuring-mapbox-access-token).
20+
21+
### Configuring Mapbox access token
22+
23+
Please create a file `mapbox-config.ts` in the `src` folder, and write the following contents in it.
24+
```ts
25+
export const MAPBOX_ACCESS_TOKEN = '<Your Mapbox Access Token Here>';
26+
```
27+
28+
Please replace `<Your Mapbox Access Token Here>` with your Mapbox access token.
29+
`src/mapbox-config.ts` is never pushed to this repository.
30+
31+
### Resolving dependencies
32+
33+
```sh
34+
npm install
35+
```
36+
37+
### Running the example on a dev server
38+
39+
```sh
40+
npm run dev
41+
```
42+
43+
A dev server will be hosted on http://localhost:5173.

‎example/env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎example/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)