├── docs
    ├── public
    │   ├── robots.txt
    │   ├── favicons
    │   │   ├── 192.png
    │   │   ├── 512.png
    │   │   ├── favicon.ico
    │   │   ├── apple-touch-icon.png
    │   │   └── icon.svg
    │   └── manifest.webmanifest
    └── src
    │   ├── components
    │       ├── RepoLink.vue
    │       └── Demo.vue
    │   ├── layouts
    │       └── BaseLayout.astro
    │   ├── styles
    │       └── tailwind.css
    │   ├── pages
    │       └── index.mdx
    │   └── assets
    │       └── bikeShelters.json
├── src
    ├── main.ts
    ├── shims
    │   └── vue.d.ts
    └── components
    │   ├── animateFuncs.ts
    │   ├── paintStyles.ts
    │   └── VueMapboxFeature.vue
├── .markdownlint.json
├── .stylelintrc.cjs
├── .gitignore
├── postcss.config.cjs
├── .github
    └── workflows
    │   ├── publish_package.yml
    │   ├── firebase-hosting-merge.yml
    │   └── firebase-hosting-pull-request.yml
├── .prettierrc.cjs
├── tsconfig.json
├── README.md
├── firebase.json
├── .eslintrc.cjs
├── LICENSE
├── rollup.config.mjs
├── tailwind.config.cjs
├── astro.config.mjs
└── package.json


/docs/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import VueMapboxFeature from './components/VueMapboxFeature.vue'
2 | 
3 | export default VueMapboxFeature
4 | 


--------------------------------------------------------------------------------
/docs/public/favicons/192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benchmark-urbanism/vue-mapbox-feature/HEAD/docs/public/favicons/192.png


--------------------------------------------------------------------------------
/docs/public/favicons/512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benchmark-urbanism/vue-mapbox-feature/HEAD/docs/public/favicons/512.png


--------------------------------------------------------------------------------
/docs/public/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benchmark-urbanism/vue-mapbox-feature/HEAD/docs/public/favicons/favicon.ico


--------------------------------------------------------------------------------
/.markdownlint.json:
--------------------------------------------------------------------------------
1 | {
2 |   "default": true,
3 |   "MD001": false,
4 |   "MD013": false,
5 |   "MD033": false,
6 |   "MD041": false
7 | }
8 | 


--------------------------------------------------------------------------------
/docs/public/favicons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benchmark-urbanism/vue-mapbox-feature/HEAD/docs/public/favicons/apple-touch-icon.png


--------------------------------------------------------------------------------
/src/shims/vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import { defineComponent } from 'vue'
3 |   const component: ReturnType<typeof defineComponent>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/docs/public/manifest.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 |   "icons": [
3 |     { "src": "/favicons/192.png", "type": "image/png", "sizes": "192x192" },
4 |     { "src": "/favicons/512.png", "type": "image/png", "sizes": "512x512" }
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.stylelintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: [
 3 |     'stylelint-config-standard',
 4 |     // last - to turn of clashes with prettier
 5 |     'stylelint-config-prettier',
 6 |   ],
 7 |   plugins: [],
 8 |   rules: {
 9 |     'selector-nested-pattern': '^&',
10 |   },
11 | }
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # mac
 2 | .DS_Store
 3 | 
 4 | # Dev
 5 | .idea/
 6 | build/
 7 | dist/
 8 | 
 9 | # node modules and gridsome
10 | logs
11 | *.log
12 | node_modules/
13 | docs/node_modules/
14 | .cache
15 | .temp
16 | 
17 | # firebase
18 | **/.firebase*
19 | 
20 | # venv for bib conversion
21 | venv/


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: [
 3 |     require('postcss-import'),
 4 |     require('postcss-html'),
 5 |     require('postcss-markdown'),
 6 |     require('tailwindcss/nesting'),
 7 |     require('tailwindcss'),
 8 |     require('autoprefixer'),
 9 |   ],
10 | }
11 | 


--------------------------------------------------------------------------------
/.github/workflows/publish_package.yml:
--------------------------------------------------------------------------------
 1 | name: publish package
 2 | on:
 3 |   release:
 4 |     types: [created]
 5 | jobs:
 6 |   build:
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |       - uses: actions/checkout@v3
10 |       - run: npm install && npm run bundle
11 |       - uses: actions/setup-node@v2
12 |         with:
13 |           registry-url: 'https://registry.npmjs.org'
14 |           scope: '@benchmark-urbanism'
15 |       - run: npm publish --access public
16 |         env:
17 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
18 | 


--------------------------------------------------------------------------------
/.prettierrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   printWidth: 100,
 3 |   semi: false,
 4 |   singleQuote: true,
 5 |   pugAttributeSeparator: 'as-needed',
 6 |   pugCommentPreserveSpaces: 'trim-all',
 7 |   pugSortAttributes: 'asc',
 8 |   pugWrapAttributesThreshold: 1,
 9 |   pugFramework: 'vue',
10 |   pugEmptyAttributes: 'all',
11 |   pugClassLocation: 'after-attributes',
12 |   pugExplicitDiv: true,
13 |   overrides: [
14 |     {
15 |       files: '*.astro',
16 |       options: {
17 |         parser: 'astro',
18 |       },
19 |     },
20 |   ],
21 | }
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "jsx": "preserve",
 5 |     "module": "esnext",
 6 |     "rootDir": "./src",
 7 |     "moduleResolution": "node",
 8 |     "baseUrl": ".",
 9 |     "declaration": true,
10 |     "declarationMap": true,
11 |     "sourceMap": true,
12 |     "outDir": "./dist",
13 |     "esModuleInterop": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "strict": true,
16 |     "skipLibCheck": true
17 |   },
18 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
19 |   "exclude": ["**/node_modules"],
20 |   "vueCompilerOptions": {
21 |     "plugins": ["@volar/vue-language-plugin-pug"]
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-mapbox-feature
2 | 
3 | [![publish package](https://github.com/benchmark-urbanism/vue-mapbox-feature/actions/workflows/publish_package.yml/badge.svg)](https://github.com/benchmark-urbanism/vue-mapbox-feature/actions/workflows/publish_package.yml)[![deploy docs (merge)](https://github.com/benchmark-urbanism/vue-mapbox-feature/actions/workflows/firebase-hosting-merge.yml/badge.svg)](https://github.com/benchmark-urbanism/vue-mapbox-feature/actions/workflows/firebase-hosting-merge.yml)
4 | 
5 | A minimalist [Vue](https://vuejs.org/) component for displaying dynamic geojson on a [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) map.
6 | 
7 | Please see the [docs](https://vue-mapbox-feature.web.app/) for more information!
8 | 


--------------------------------------------------------------------------------
/.github/workflows/firebase-hosting-merge.yml:
--------------------------------------------------------------------------------
 1 | # This file was auto-generated by the Firebase CLI
 2 | # https://github.com/firebase/firebase-tools
 3 | 
 4 | name: deploy docs (merge)
 5 | 'on':
 6 |   push:
 7 |     branches:
 8 |       - master
 9 | jobs:
10 |   build_and_deploy:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: actions/checkout@v3
14 |       - run: npm install && npm run build
15 |       - uses: FirebaseExtended/action-hosting-deploy@v0
16 |         with:
17 |           repoToken: '${{ secrets.GITHUB_TOKEN }}'
18 |           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_VUE_MAPBOX_FEATURE }}'
19 |           channelId: live
20 |           projectId: vue-mapbox-feature
21 |         env:
22 |           FIREBASE_CLI_PREVIEWS: hostingchannels
23 | 


--------------------------------------------------------------------------------
/.github/workflows/firebase-hosting-pull-request.yml:
--------------------------------------------------------------------------------
 1 | # This file was auto-generated by the Firebase CLI
 2 | # https://github.com/firebase/firebase-tools
 3 | 
 4 | name: deploy docs (pull)
 5 | 'on': pull_request
 6 | jobs:
 7 |   build_and_preview:
 8 |     if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@v3
12 |       - run: npm install && npm run build
13 |       - uses: FirebaseExtended/action-hosting-deploy@v0
14 |         with:
15 |           repoToken: '${{ secrets.GITHUB_TOKEN }}'
16 |           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_VUE_MAPBOX_FEATURE }}'
17 |           projectId: vue-mapbox-feature
18 |         env:
19 |           FIREBASE_CLI_PREVIEWS: hostingchannels
20 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "./docs/dist",
 4 |     "rewrites": [
 5 |       {
 6 |         "source": "**",
 7 |         "destination": "/index.html"
 8 |       }
 9 |     ],
10 |     "trailingSlash": false,
11 |     "cleanUrls": true,
12 |     "headers": [
13 |       {
14 |         "source": "/**",
15 |         "headers": [
16 |           {
17 |             "key": "Cache-Control",
18 |             "value": "public, max-age=0, must-revalidate"
19 |           }
20 |         ]
21 |       },
22 |       {
23 |         "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|eot|otf|ttf|ttc|woff|woff2|font.css)",
24 |         "headers": [
25 |           {
26 |             "key": "Cache-Control",
27 |             "value": "public, max-age=31536000, immutable"
28 |           }
29 |         ]
30 |       },
31 |       {
32 |         "source": "**/*.@(js|css)",
33 |         "headers": [
34 |           {
35 |             "key": "Cache-Control",
36 |             "value": "public, max-age=31536000, immutable"
37 |           }
38 |         ]
39 |       }
40 |     ]
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require('@rushstack/eslint-patch/modern-module-resolution')
 3 | 
 4 | module.exports = {
 5 |   root: true,
 6 |   env: {
 7 |     node: true,
 8 |   },
 9 |   extends: [
10 |     'eslint:recommended',
11 |     'plugin:@typescript-eslint/recommended',
12 |     'plugin:vue/vue3-recommended', // eslint-plugin-vue
13 |     'plugin:astro/recommended',
14 |     // last - to turn of clashes with prettier
15 |     'prettier', // eslint-config-prettier
16 |   ],
17 |   // for parsing vue <template>
18 |   parser: 'vue-eslint-parser',
19 |   // for parsing <script>
20 |   parserOptions: {
21 |     parser: '@typescript-eslint/parser',
22 |     sourceType: 'module',
23 |   },
24 |   // sorting imports and tailwind plugin
25 |   plugins: ['simple-import-sort', 'tailwindcss', '@typescript-eslint'],
26 |   // rules for enabling import sorting errors
27 |   rules: {
28 |     'simple-import-sort/imports': 'error',
29 |     'simple-import-sort/exports': 'error',
30 |   },
31 |   overrides: [
32 |     {
33 |       files: ['*.astro'],
34 |       parser: 'astro-eslint-parser',
35 |       rules: {},
36 |     },
37 |   ],
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Gareth Simons
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/docs/src/components/RepoLink.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | div
 3 |   div#repo-container
 4 |     a#repo-link(
 5 |       :href='repoLink',
 6 |       :title='title'
 7 |       target='_blank'
 8 |     )
 9 |       Github#repo-logo
10 |       div#repo-text {{ repoText }}
11 | </template>
12 | 
13 | <script setup>
14 | import { Github } from '@vicons/fa'
15 | import { computed } from 'vue'
16 | 
17 | const props = defineProps({
18 |   repoLink: {
19 |     required: true,
20 |     type: String,
21 |   },
22 |   repoText: {
23 |     required: false,
24 |     type: String,
25 |     default: null,
26 |   },
27 | })
28 | const title = computed(() =>
29 |   props.repoText ? props.repoText : `Link to Github repo for ${props.repoLink}`
30 | )
31 | </script>
32 | 
33 | <style lang="postcss" scoped>
34 | #repo-container {
35 |   @apply my-4 flex items-center justify-center;
36 | }
37 | #repo-link {
38 |   @apply relative flex flex-col items-center justify-center text-theme;
39 | }
40 | #repo-logo {
41 |   @apply h-20 w-20 transition-all;
42 | }
43 | #repo-link:hover > #repo-logo {
44 |   transform: scale(1.1);
45 | }
46 | #repo-text {
47 |   @apply pt-1 text-lg font-semibold;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/rollup.config.mjs:
--------------------------------------------------------------------------------
 1 | import commonjs from '@rollup/plugin-commonjs'
 2 | import typescript from 'rollup-plugin-typescript2'
 3 | import { nodeResolve } from '@rollup/plugin-node-resolve'
 4 | import replace from '@rollup/plugin-replace'
 5 | import vue from 'rollup-plugin-vue'
 6 | 
 7 | const rep = replace({
 8 |   values: {
 9 |     'process.env.NODE_ENV': JSON.stringify('production'),
10 |   },
11 |   preventAssignment: true,
12 | })
13 | const ts = typescript({
14 |   tsconfigOverride: {
15 |     compilerOptions: {
16 |       declaration: true,
17 |     },
18 |     include: null,
19 |   },
20 | })
21 | export default [
22 |   {
23 |     input: 'src/main.ts',
24 |     external: ['vue', 'animejs'],
25 |     output: {
26 |       format: 'esm',
27 |       file: 'dist/VueMapboxFeature.esm.js',
28 |     },
29 |     plugins: [rep, ts, commonjs(), nodeResolve(), vue()],
30 |   },
31 |   // SSR build.
32 |   {
33 |     input: 'src/main.ts',
34 |     external: ['vue', 'animejs'],
35 |     output: {
36 |       format: 'cjs',
37 |       file: 'dist/VueMapboxFeature.ssr.js',
38 |       exports: 'default',
39 |     },
40 |     plugins: [rep, ts, commonjs(), nodeResolve(), vue({ template: { optimizeSSR: true } })],
41 |   },
42 |   // Browser build.
43 |   {
44 |     input: 'src/main.ts',
45 |     output: {
46 |       format: 'iife',
47 |       file: 'dist/VueMapboxFeature.min.js',
48 |       exports: 'default',
49 |       name: 'VueMapboxFeature',
50 |     },
51 |     plugins: [rep, ts, commonjs(), nodeResolve(), vue()],
52 |   },
53 | ]
54 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: ['./docs/public/**/*.html', './docs/src/**/*.{astro,html,md,js,jsx,svelte,ts,tsx,vue}'],
 3 |   theme: {
 4 |     extend: {
 5 |       fontFamily: {
 6 |         defaults: ['Raleway', 'serif'],
 7 |         headings: ['Raleway', 'sans-serif'],
 8 |         mono: ['Roboto Mono', 'monospace'],
 9 |       },
10 |       fontSize: {
11 |         xxs: '0.65rem',
12 |         xs: '0.725rem',
13 |         sm: '0.9rem',
14 |         base: '1.05rem',
15 |         lg: '1.1rem',
16 |         xl: '1.2rem',
17 |         '2xl': '1.4rem',
18 |         '3xl': '1.8rem',
19 |         '4xl': '2.2rem',
20 |       },
21 |       fontWeight: {
22 |         extralight: '200',
23 |         light: '300',
24 |         normal: '400',
25 |         medium: '500',
26 |         semibold: '600',
27 |         bold: '700',
28 |       },
29 |       // tracking
30 |       letterSpacing: {
31 |         tighter: '-0.05em',
32 |         tight: '-0.025em',
33 |         normal: '0',
34 |         wide: '0.025em',
35 |         wider: '0.05em',
36 |       },
37 |       // leading
38 |       lineHeight: {
39 |         none: '1',
40 |         tight: '1.25',
41 |         snug: '1.5',
42 |         normal: '1.75',
43 |         relaxed: '2',
44 |         loose: '2.25',
45 |       },
46 |       borderWidth: {
47 |         default: '1px',
48 |         0: '0',
49 |         0.5: '0.5px',
50 |         1: '1px',
51 |         2: '2px',
52 |         3: '3px',
53 |         4: '4px',
54 |       },
55 |       borderColor: (theme) => ({
56 |         ...theme('colors'),
57 |         DEFAULT: theme('colors.darker-grey', 'currentColor'),
58 |       }),
59 |       colors: {
60 |         theme: '#D32333',
61 |         'lighter-grey': '#F1F1F1',
62 |         'light-grey': '#A8A8A8',
63 |         'mid-grey': '#404040',
64 |         'dark-grey': '#1D1D1D',
65 |         'darker-grey': '#19181B',
66 |       },
67 |     },
68 |   },
69 | }
70 | 


--------------------------------------------------------------------------------
/docs/src/layouts/BaseLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import '../styles/tailwind.css'
 3 | ---
 4 | 
 5 | <html lang="en-GB">
 6 |   <head>
 7 |     <meta charset="UTF-8" />
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 9 |     <meta name="author" content="Benchmark Urbanism (Cityseer Ltd.)" />
10 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
11 |     <title>vue-mapbox-feature</title>
12 |     <meta
13 |       set:html
14 |       name="description"
15 |       content="A Vue component for dynamic geojson on Mapbox GL JS maps!"
16 |     />
17 |     <meta
18 |       set:html
19 |       name="keywords"
20 |       content="vue mapbox component vue-mapbox-feature interactive vue3 mapbox-gl geojson"
21 |     />
22 |     <!-- favicons -->
23 |     <link rel="icon" href="/favicon.ico" />
24 |     <link rel="icon" href="/favicons/favicon.ico" />
25 |     <link rel="icon" href="/favicons/icon.svg" type="image/svg+xml" />
26 |     <link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
27 |     <link rel="manifest" href="/manifest.webmanifest" />
28 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
29 |     <link
30 |       rel="stylesheet"
31 |       href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300&display=swap"
32 |     />
33 |     <link
34 |       rel="stylesheet"
35 |       href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;300;400;500;600;700&display=swap"
36 |     />
37 |     <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
38 |   </head>
39 |   <body class="h-full w-full">
40 |     <div class="app-container">
41 |       <div class="app-content">
42 |         <slot />
43 |       </div>
44 |     </div>
45 |   </body>
46 | </html>
47 | 
48 | <style lang="postcss">
49 |   .app-container {
50 |     @apply flex h-full min-h-screen w-full flex-col items-center;
51 |   }
52 |   .app-content {
53 |     @apply flex w-full max-w-5xl flex-col items-stretch py-10 px-3;
54 |   }
55 |   @media only screen and (max-width: 820px) {
56 |     .app-content {
57 |       @apply px-1;
58 |     }
59 |   }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import mdx from '@astrojs/mdx'
 2 | import prefetch from '@astrojs/prefetch'
 3 | import sitemap from '@astrojs/sitemap'
 4 | import tailwind from '@astrojs/tailwind'
 5 | import vue from '@astrojs/vue'
 6 | import { defineConfig } from 'astro/config'
 7 | import { s } from 'hastscript'
 8 | 
 9 | export default defineConfig({
10 |   root: '.',
11 |   srcDir: './docs/src',
12 |   publicDir: './docs/public',
13 |   outDir: './docs/dist',
14 |   site: 'https://vue-mapbox-feature.web.app/',
15 |   base: '/',
16 |   trailingSlash: 'always',
17 |   build: {
18 |     format: 'directory',
19 |   },
20 |   markdown: {
21 |     drafts: false,
22 |     syntaxHighlight: 'shiki',
23 |     shikiConfig: {
24 |       theme: 'material-darker',
25 |       langs: ['astro'],
26 |       wrap: true,
27 |     },
28 |     remarkPlugins: [
29 |       'remark-emoji',
30 |       [
31 |         'remark-smartypants',
32 |         {
33 |           dashes: 'oldschool',
34 |         },
35 |       ],
36 |       'remark-directive',
37 |     ],
38 |     rehypePlugins: [
39 |       'rehype-slug',
40 |       [
41 |         'rehype-autolink-headings',
42 |         {
43 |           test: ['h1', 'h2', 'h3'],
44 |           behavior: 'prepend',
45 | 
46 |           content(node) {
47 |             return [
48 |               s(
49 |                 'svg',
50 |                 {
51 |                   xmlns: 'http://www.w3.org/2000/svg',
52 |                   viewbox: '0 0 20 20',
53 |                   ariaHidden: 'true',
54 |                   width: '15px',
55 |                   height: '15px',
56 |                   class: 'heading-icon',
57 |                 },
58 |                 [
59 |                   s('title', 'SVG `<path>` element'),
60 |                   s('path', {
61 |                     d: 'M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z',
62 |                     'fill-rule': 'evenodd',
63 |                     'clip-rule': 'evenodd',
64 |                   }),
65 |                 ]
66 |               ),
67 |             ]
68 |           },
69 |         },
70 |       ],
71 |     ],
72 |   },
73 |   integrations: [
74 |     vue(),
75 |     tailwind({
76 |       config: {
77 |         path: './tailwind.config.cjs',
78 |         applyBaseStyles: false,
79 |       },
80 |     }),
81 |     sitemap(),
82 |     prefetch(),
83 |     mdx(),
84 |   ],
85 | })
86 | 


--------------------------------------------------------------------------------
/docs/src/components/Demo.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 | div.bg-dark-grey.py-3.rounded.border-mid-grey
  3 |   div.text-center
  4 |     div Scroll to see some map action!
  5 |   div#map-container
  6 |   VueMapboxFeature(
  7 |     :feature='bikeShelters',
  8 |     :layer-type='"circle"',
  9 |     :map='mapInstance',
 10 |     :paint='circlePaint',
 11 |     :pulse='true',
 12 |     :uid='"circle-example"'
 13 |   )
 14 |   VueMapboxFeature(
 15 |     :feature='polyGeom',
 16 |     :layer-type='"fill"',
 17 |     :map='mapInstance',
 18 |     :paint='fillPaint',
 19 |     :pulse='true',
 20 |     :uid='"poly-example"'
 21 |   )
 22 |   VueMapboxFeature(
 23 |     :feature='lineGeom',
 24 |     :layer-type='"line"',
 25 |     :map='mapInstance',
 26 |     :paint='linePaint',
 27 |     :pulse='true',
 28 |     :uid='"line-example"'
 29 |   )
 30 | </template>
 31 | 
 32 | <script setup>
 33 | import * as turf from '@turf/turf'
 34 | import { useWindowScroll } from '@vueuse/core'
 35 | import mapboxgl from 'mapbox-gl'
 36 | import { computed, markRaw, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 37 | 
 38 | import bikeShelters from '../assets/bikeShelters.json'
 39 | 
 40 | import VueMapboxFeature from '../../../src/components/VueMapboxFeature.vue'
 41 | 
 42 | import 'mapbox-gl/dist/mapbox-gl.css'
 43 | 
 44 | const circlePaint = {
 45 |   'circle-radius': 5,
 46 |   'circle-color': '#29434e',
 47 |   'circle-opacity': 0.5,
 48 |   'circle-stroke-width': 2,
 49 |   'circle-stroke-color': '#29434e',
 50 |   'circle-stroke-opacity': 0.8,
 51 | }
 52 | const linePaint = {
 53 |   'line-opacity': 1,
 54 |   'line-color': '#29434e',
 55 |   'line-width': 4,
 56 |   'line-dasharray': [1, 2],
 57 |   'line-blur': 0,
 58 | }
 59 | const fillPaint = {
 60 |   'fill-opacity': 0.2,
 61 |   'fill-color': '#a00037',
 62 | }
 63 | const { x, y } = useWindowScroll()
 64 | const buffer = computed(() => Math.sin(y.value / 100) * 5)
 65 | const scene = reactive({
 66 |   lng: -73.99397182589848,
 67 |   lat: 40.687436325313655,
 68 |   zoom: 9,
 69 |   pitch: 0,
 70 | })
 71 | mapboxgl.accessToken =
 72 |   'pk.eyJ1Ijoic2hvbmdvbG9sbyIsImEiOiJja2lubnc4ZWcxNTI2MzJxajhsa3NxcWtxIn0.gg7J040GTgBNook7aNclMQ'
 73 | const mapInstance = ref(null)
 74 | onMounted(() => {
 75 |   mapInstance.value = markRaw(
 76 |     new mapboxgl.Map({
 77 |       container: 'map-container',
 78 |       style: 'mapbox://styles/mapbox/light-v9',
 79 |       center: [scene.lng, scene.lat],
 80 |       zoom: scene.zoom,
 81 |       pitch: scene.pitch,
 82 |       interactive: false,
 83 |     })
 84 |   )
 85 | })
 86 | const polyGeom = computed(() => {
 87 |   let c = turf.concave(bikeShelters)
 88 |   return turf.buffer(c, -buffer.value)
 89 | })
 90 | const lineGeom = computed(() => {
 91 |   return turf.polygonToLine(polyGeom.value)
 92 | })
 93 | </script>
 94 | 
 95 | <style lang="postcss" scoped>
 96 | #map-container {
 97 |   @apply my-3 h-[400px] max-h-[400px] min-h-[400px] w-full bg-theme;
 98 | }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/components/animateFuncs.ts:
--------------------------------------------------------------------------------
 1 | import anime from 'animejs/lib/anime.js'
 2 | 
 3 | type specObj = { [key: string]: any }
 4 | 
 5 | const animateCircle = function (paintMixed: specObj, mapRaw: any, mapUid: string) {
 6 |   const animData = Object.assign({}, paintMixed)
 7 |   return anime({
 8 |     targets: animData,
 9 |     'circle-radius': animData['circle-radius'] * 1.1,
10 |     'circle-opacity': animData['circle-opacity'] * 0.8,
11 |     'circle-stroke-opacity': animData['circle-stroke-opacity'] * 0.9,
12 |     duration: 500,
13 |     loop: true,
14 |     direction: 'alternate',
15 |     easing: 'easeOutSine',
16 |     autoplay: true,
17 |     update: function () {
18 |       if (mapRaw && mapRaw.getLayer(mapUid)) {
19 |         mapRaw.setPaintProperty(mapUid, 'circle-radius', animData['circle-radius'])
20 |         mapRaw.setPaintProperty(mapUid, 'circle-opacity', animData['circle-opacity'])
21 |         mapRaw.setPaintProperty(mapUid, 'circle-stroke-opacity', animData['circle-stroke-opacity'])
22 |       }
23 |     },
24 |     complete: function () {
25 |       mapRaw.setPaintProperty(mapUid, 'circle-radius', paintMixed['circle-radius'])
26 |       mapRaw.setPaintProperty(mapUid, 'circle-opacity', paintMixed['circle-opacity'])
27 |       mapRaw.setPaintProperty(mapUid, 'circle-stroke-opacity', paintMixed['circle-stroke-opacity'])
28 |     },
29 |   })
30 | }
31 | const animateLine = function (paintMixed: specObj, mapRaw: any, mapUid: string) {
32 |   const animData = Object.assign({}, paintMixed)
33 |   return anime({
34 |     targets: animData,
35 |     'line-width': animData['line-width'] * 1.01,
36 |     'line-opacity': animData['line-opacity'] * 0.8,
37 |     duration: 1000,
38 |     loop: true,
39 |     direction: 'alternate',
40 |     easing: 'easeOutSine',
41 |     autoplay: true,
42 |     update: function () {
43 |       if (mapRaw && mapRaw.getLayer(mapUid)) {
44 |         mapRaw.setPaintProperty(mapUid, 'line-width', animData['line-width'])
45 |         mapRaw.setPaintProperty(mapUid, 'line-opacity', animData['line-opacity'])
46 |       }
47 |     },
48 |     complete: function () {
49 |       mapRaw.setPaintProperty(mapUid, 'line-width', paintMixed['line-width'])
50 |       mapRaw.setPaintProperty(mapUid, 'line-opacity', paintMixed['line-opacity'])
51 |     },
52 |   })
53 | }
54 | const animateFill = function (paintMixed: specObj, mapRaw: any, mapUid: string) {
55 |   const animData = Object.assign({}, paintMixed)
56 |   return anime({
57 |     targets: animData,
58 |     'fill-opacity': animData['fill-opacity'] * 0.8,
59 |     duration: 1000,
60 |     loop: true,
61 |     direction: 'alternate',
62 |     easing: 'easeOutSine',
63 |     autoplay: true,
64 |     update: function () {
65 |       if (mapRaw && mapRaw.getLayer(mapUid)) {
66 |         mapRaw.setPaintProperty(mapUid, 'fill-opacity', animData['fill-opacity'])
67 |       }
68 |     },
69 |     complete: function () {
70 |       mapRaw.setPaintProperty(mapUid, 'fill-opacity', paintMixed['fill-opacity'])
71 |     },
72 |   })
73 | }
74 | 
75 | export { animateCircle, animateFill, animateLine }
76 | 


--------------------------------------------------------------------------------
/docs/src/styles/tailwind.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | 
  3 | @tailwind components;
  4 | 
  5 | @tailwind utilities;
  6 | 
  7 | @layer base {
  8 |   html {
  9 |     scroll-behavior: smooth;
 10 |   }
 11 | 
 12 |   body {
 13 |     @apply bg-darker-grey text-lighter-grey;
 14 |   }
 15 | 
 16 |   h1,
 17 |   h2,
 18 |   h3,
 19 |   h4,
 20 |   h5,
 21 |   h6 {
 22 |     /* flex is for links inserted before headings */
 23 |     @apply flex items-center py-1 font-headings text-light-grey;
 24 |   }
 25 | 
 26 |   h1 {
 27 |     @apply pt-12 pt-8 pb-4 text-4xl font-extralight;
 28 |   }
 29 | 
 30 |   h2 {
 31 |     @apply pt-6 pb-2 text-3xl font-normal;
 32 |   }
 33 | 
 34 |   h3 {
 35 |     @apply pt-4 text-2xl font-medium;
 36 |   }
 37 | 
 38 |   h4 {
 39 |     @apply text-xl;
 40 |   }
 41 | 
 42 |   h5 {
 43 |     @apply text-lg;
 44 |   }
 45 | 
 46 |   h6 {
 47 |     @apply text-base;
 48 |   }
 49 | 
 50 |   ul {
 51 |     @apply pl-2 font-light;
 52 | 
 53 |     & li {
 54 |       @apply my-2 ml-2 text-sm font-light;
 55 | 
 56 |       list-style-type: disc;
 57 |     }
 58 |   }
 59 | 
 60 |   p {
 61 |     @apply my-2 text-sm font-light;
 62 |   }
 63 | 
 64 |   img {
 65 |     @apply pt-6 pb-3;
 66 |   }
 67 | 
 68 |   :not(pre) > code {
 69 |     @apply rounded-sm bg-dark-grey px-1 font-mono text-xs font-medium text-lighter-grey;
 70 |   }
 71 | 
 72 |   pre {
 73 |     @apply my-4 overflow-x-auto whitespace-pre-wrap rounded-md border border-darker-grey p-2;
 74 | 
 75 |     & code {
 76 |       @apply text-sm font-normal tracking-tight;
 77 |     }
 78 |   }
 79 | 
 80 |   a {
 81 |     @apply text-theme;
 82 | 
 83 |     & code {
 84 |       @apply text-theme;
 85 |     }
 86 |   }
 87 | 
 88 |   p > a {
 89 |     @apply font-medium;
 90 |   }
 91 | 
 92 |   table {
 93 |     @apply m-1 table-auto justify-self-center text-sm;
 94 | 
 95 |     & th {
 96 |       @apply border-l-1 border-r-1 border-mid-grey bg-dark-grey px-3 py-2 font-semibold;
 97 |     }
 98 | 
 99 |     & td {
100 |       @apply border-t-1 border-l-1 border-r-1 border-mid-grey px-2 py-1 font-normal;
101 |     }
102 | 
103 |     & tr {
104 |       @apply p-0.5;
105 |     }
106 | 
107 |     & tr td:first-child,
108 |     & tr th:first-child {
109 |       @apply border-l-0;
110 |     }
111 | 
112 |     & tr td:last-child,
113 |     & tr th:last-child {
114 |       @apply border-r-0;
115 |     }
116 |   }
117 | 
118 |   @media only screen and (max-width: 820px) {
119 |     body {
120 |       @apply text-sm;
121 |     }
122 | 
123 |     h1 {
124 |       @apply pt-8 pb-2 text-2xl font-light;
125 |     }
126 | 
127 |     h2,
128 |     h3 {
129 |       @apply pt-6 pb-1 font-medium;
130 |     }
131 | 
132 |     h2 {
133 |       @apply text-xl;
134 |     }
135 | 
136 |     h3 {
137 |       @apply text-lg;
138 |     }
139 | 
140 |     h4 {
141 |       @apply text-base;
142 |     }
143 | 
144 |     h5 {
145 |       @apply text-sm;
146 |     }
147 | 
148 |     h6 {
149 |       @apply text-sm;
150 |     }
151 | 
152 |     ul,
153 |     li {
154 |       @apply ml-2 text-sm;
155 |     }
156 | 
157 |     p {
158 |       @apply text-sm;
159 |     }
160 | 
161 |     code {
162 |       @apply text-xxs;
163 |     }
164 | 
165 |     pre {
166 |       @apply text-xxs;
167 |     }
168 | 
169 |     th {
170 |       @apply py-1;
171 |     }
172 | 
173 |     td {
174 |     }
175 |   }
176 | }
177 | 
178 | .heading-icon {
179 |   @apply mr-2;
180 | 
181 |   & path {
182 |     fill: #d33130;
183 |   }
184 | }
185 | 
186 | blockquote {
187 |   @apply my-2 rounded border border-mid-grey bg-dark-grey p-2;
188 | 
189 |   & p {
190 |     @apply text-sm;
191 |   }
192 | }
193 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "@benchmark-urbanism/vue-mapbox-feature",
  3 |   "version": "2.0.0",
  4 |   "type": "module",
  5 |   "description": "A minimalist Vue component for displaying dynamic geojson on Mapbox GL or MapLibre GL.",
  6 |   "homepage": "https://benchmark-urbanism.github.io/vue-mapbox-feature/",
  7 |   "repository": {
  8 |     "type": "git",
  9 |     "url": "git@github.com:benchmark-urbanism/vue-mapbox-feature.git"
 10 |   },
 11 |   "author": "benchmark-urbanism",
 12 |   "license": "MIT",
 13 |   "keywords": [
 14 |     "component",
 15 |     "mapbox",
 16 |     "maplibre",
 17 |     "maps",
 18 |     "maptiler",
 19 |     "geojson",
 20 |     "vue"
 21 |   ],
 22 |   "bugs": "https://github.com/benchmark-urbanism/vue-mapbox-feature/issues",
 23 |   "files": [
 24 |     "dist",
 25 |     "src",
 26 |     "package.json",
 27 |     "LICENSE"
 28 |   ],
 29 |   "main": "dist/VueMapboxFeature.umd.js",
 30 |   "module": "dist/VueMapboxFeature.esm.js",
 31 |   "unpkg": "dist/VueMapboxFeature.min.js",
 32 |   "browser": {
 33 |     "./sfc": "src/components/VueMapboxFeature.vue"
 34 |   },
 35 |   "scripts": {
 36 |     "bundle": "rollup -c",
 37 |     "dev": "astro dev",
 38 |     "build": "astro build --verbose",
 39 |     "preview": "astro preview",
 40 |     "check": "astro check"
 41 |   },
 42 |   "devDependencies": {
 43 |     "@astrojs/markdown-remark": "1.2.0",
 44 |     "@astrojs/mdx": "0.14.0",
 45 |     "@astrojs/prefetch": "0.1.1",
 46 |     "@astrojs/sitemap": "1.0.0",
 47 |     "@astrojs/tailwind": "2.1.3",
 48 |     "@astrojs/vue": "1.2.2",
 49 |     "@fec/remark-a11y-emoji": "3.1.0",
 50 |     "@prettier/plugin-pug": "2.3.0",
 51 |     "@rollup/plugin-commonjs": "24.0.0",
 52 |     "@rollup/plugin-node-resolve": "15.0.1",
 53 |     "@rollup/plugin-replace": "5.0.2",
 54 |     "@rushstack/eslint-patch": "1.2.0",
 55 |     "@turf/turf": "6.5.0",
 56 |     "@types/animejs": "^3.1.6",
 57 |     "@types/node": "18.11.18",
 58 |     "@typescript-eslint/eslint-plugin": "5.47.1",
 59 |     "@typescript-eslint/parser": "5.47.1",
 60 |     "@vicons/fa": "0.12.0",
 61 |     "@vitejs/plugin-vue": "4.0.0",
 62 |     "@volar/vue-language-plugin-pug": "1.0.18",
 63 |     "@vue/compiler-sfc": "3.2.45",
 64 |     "@vueuse/core": "9.9.0",
 65 |     "astro": "1.8.0",
 66 |     "autoprefixer": "10.4.13",
 67 |     "eslint": "8.30.0",
 68 |     "eslint-config-prettier": "8.5.0",
 69 |     "eslint-plugin-simple-import-sort": "8.0.0",
 70 |     "eslint-plugin-tailwindcss": "3.7.1",
 71 |     "eslint-plugin-vue": "9.8.0",
 72 |     "hastscript": "7.1.0",
 73 |     "mapbox-gl": "2.11.1",
 74 |     "postcss": "8.4.20",
 75 |     "postcss-html": "1.5.0",
 76 |     "postcss-import": "15.1.0",
 77 |     "postcss-markdown": "1.2.0",
 78 |     "prettier": "2.8.1",
 79 |     "prettier-plugin-astro": "0.7.0",
 80 |     "prettier-plugin-tailwindcss": "0.2.1",
 81 |     "pug": "3.0.2",
 82 |     "pug-plain-loader": "1.1.0",
 83 |     "rehype-autolink-headings": "6.1.1",
 84 |     "rehype-slug": "5.1.0",
 85 |     "remark-directive": "2.0.1",
 86 |     "remark-emoji": "3.0.2",
 87 |     "remark-smartypants": "2.0.0",
 88 |     "rollup": "3.9.0",
 89 |     "rollup-plugin-typescript2": "0.34.1",
 90 |     "rollup-plugin-vue": "6.0.0",
 91 |     "serialize-javascript": "6.0.0",
 92 |     "shorthash": "0.0.2",
 93 |     "stylelint": "14.16.0",
 94 |     "stylelint-config-prettier": "9.0.4",
 95 |     "stylelint-config-standard": "29.0.0",
 96 |     "tailwindcss": "3.2.4",
 97 |     "typescript": "4.9.4",
 98 |     "vite": "4.0.3",
 99 |     "vue-eslint-parser": "9.1.0"
100 |   },
101 |   "dependencies": {
102 |     "animejs": "3.2.1",
103 |     "vue": "3.2.45"
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/docs/public/favicons/icon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
 4 |     <g transform="matrix(1,0,0,1,-459,-2396)">
 5 |         <g id="round">
 6 |             <g transform="matrix(1,0,0,1,458.736,2395.99)">
 7 |                 <circle cx="500.4" cy="499.8" r="499.6" style="fill:white;"/>
 8 |             </g>
 9 |             <g>
10 |                 <g transform="matrix(1,0,0,1,458.736,2395.99)">
11 |                     <circle cx="500.4" cy="499.8" r="499.6" style="fill:rgb(211,47,47);"/>
12 |                 </g>
13 |                 <g>
14 |                     <g transform="matrix(0.525744,0,0,0.525744,816.479,3242.32)">
15 |                         <path d="M642.9,-589.9L460.4,-387.9L179.3,-387.9L361.8,-589.9L642.9,-589.9Z" style="fill:white;fill-rule:nonzero;"/>
16 |                     </g>
17 |                     <g transform="matrix(0.525744,0,0,0.525744,816.479,3242.32)">
18 |                         <path d="M642.9,-589.9L460.4,-387.9L179.3,-387.9L361.8,-589.9L642.9,-589.9Z" style="fill:white;fill-rule:nonzero;"/>
19 |                     </g>
20 |                     <g transform="matrix(0.525744,0,0,0.525744,816.479,3242.32)">
21 |                         <path d="M288.5,-589.9L106,-387.9L-175.2,-387.9L7.3,-589.9L288.5,-589.9Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
22 |                     </g>
23 |                     <g transform="matrix(0.525744,0,0,0.525744,816.479,3242.32)">
24 |                         <path d="M-65.9,-589.9L-248.4,-387.9L-529.6,-387.9L-347.1,-589.9L-65.9,-589.9Z" style="fill:white;fill-opacity:0.6;fill-rule:nonzero;"/>
25 |                     </g>
26 |                     <g transform="matrix(0.525744,0,0,0.525744,816.479,3242.32)">
27 |                         <path d="M-420.3,-589.9L-602.8,-387.9L-639.7,-387.9C-639.7,-387.9 -654.7,-438.1 -663.8,-488.9C-673.3,-542.2 -676.5,-589.9 -676.5,-589.9L-420.3,-589.9Z" style="fill:white;fill-opacity:0.4;fill-rule:nonzero;"/>
28 |                     </g>
29 |                     <g transform="matrix(0.525744,0,0,0.525744,784.429,3281.41)">
30 |                         <path d="M477.1,-411.9L294.6,-209.9L13.5,-209.9L196,-411.9L477.1,-411.9Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
31 |                     </g>
32 |                     <g transform="matrix(0.525744,0,0,0.525744,784.429,3281.41)">
33 |                         <path d="M122.7,-411.9L-59.8,-209.9L-341,-209.9L-158.5,-411.9L122.7,-411.9Z" style="fill:white;fill-opacity:0.8;fill-rule:nonzero;"/>
34 |                     </g>
35 |                     <g transform="matrix(0.525744,0,0,0.525744,784.429,3281.41)">
36 |                         <path d="M-231.7,-411.9L-414.2,-209.9L-460.8,-209.9C-460.8,-209.9 -476,-229.5 -506.7,-286.5C-534,-336.9 -547.4,-373.7 -547.4,-373.7L-512.9,-411.9L-231.7,-411.9Z" style="fill:white;fill-opacity:0.6;fill-rule:nonzero;"/>
37 |                         <path d="M-460.7,-209.9" style="fill:none;fill-rule:nonzero;"/>
38 |                         <path d="M-547.4,-373.7" style="fill:none;fill-rule:nonzero;"/>
39 |                     </g>
40 |                     <g transform="matrix(0.525744,0,0,0.525744,784.429,3281.41)">
41 |                         <path d="M250.3,-159.5L67.9,42.5L-213.3,42.5L-30.8,-159.5L250.3,-159.5Z" style="fill:white;fill-opacity:0.6;fill-rule:nonzero;"/>
42 |                     </g>
43 |                     <g transform="matrix(0.525744,0,0,0.525744,784.429,3281.41)">
44 |                         <path d="M-104.1,-159.5L-258.1,11C-258.1,11 -292.7,-14.8 -337.3,-59.4C-384.1,-106.2 -406.5,-136 -406.5,-136L-385.2,-159.6L-104.1,-159.6L-104.1,-159.5Z" style="fill:white;fill-opacity:0.6;fill-rule:nonzero;"/>
45 |                     </g>
46 |                     <g transform="matrix(0.525744,0,0,0.525744,784.429,3281.41)">
47 |                         <path d="M23.6,92.8L-25.4,147C-25.4,147 -54.4,135.3 -82.9,121.4C-114.2,106.1 -137.1,92.8 -137.1,92.8L23.6,92.8Z" style="fill:white;fill-opacity:0.4;fill-rule:nonzero;"/>
48 |                     </g>
49 |                     <g transform="matrix(0.525744,0,0,0.525744,772.662,3243.43)">
50 |                         <path d="M770.6,-642.5L770.6,-642.3L489.4,-642.4L489.4,-1101L770.5,-1101L770.6,-642.5Z" style="fill:white;fill-rule:nonzero;"/>
51 |                     </g>
52 |                     <g transform="matrix(0.525744,0,0,0.525744,772.673,3241.57)">
53 |                         <path d="M885,-766.6L770.6,-639L770.5,-1097.5L883.7,-1225.2L885,-766.6Z" style="fill:white;fill-opacity:0.5;fill-rule:nonzero;"/>
54 |                     </g>
55 |                 </g>
56 |             </g>
57 |         </g>
58 |     </g>
59 | </svg>
60 | 


--------------------------------------------------------------------------------
/src/components/paintStyles.ts:
--------------------------------------------------------------------------------
  1 | type specObj = { [key: string]: any }
  2 | 
  3 | // base and prop paint properties need to be combined
  4 | const circlePaint: specObj = {
  5 |   'circle-radius': 5,
  6 |   'circle-color': '#000000',
  7 |   'circle-blur': 0,
  8 |   'circle-opacity': 1,
  9 |   'circle-translate': [0, 0],
 10 |   'circle-translate-anchor': 'map',
 11 |   'circle-pitch-scale': 'map',
 12 |   'circle-stroke-width': 0,
 13 |   'circle-stroke-color': '#000000',
 14 |   'circle-stroke-opacity': 1,
 15 |   // required for animating
 16 |   'circle-radius-transition': { duration: 0 },
 17 |   'circle-opacity-transition': { duration: 0 },
 18 |   'circle-stroke-opacity-transition': { duration: 0 },
 19 | }
 20 | const linePaint: specObj = {
 21 |   'line-opacity': 1,
 22 |   'line-color': '#000000',
 23 |   'line-translate': [0, 0],
 24 |   'line-translate-anchor': 'map',
 25 |   'line-width': 1,
 26 |   'line-gap-width': 0,
 27 |   'line-offset': 0,
 28 |   'line-blur': 0,
 29 |   // optional dasharray -> pass from calling component
 30 |   // 'line-dasharray': [],
 31 |   // optional image sprite -> pass from calling component
 32 |   // 'line-pattern': '',
 33 |   // required for animating
 34 |   'line-width-transition': { duration: 0 },
 35 |   'line-opacity-transition': { duration: 0 },
 36 | }
 37 | const fillPaint: specObj = {
 38 |   'fill-antialias': true,
 39 |   'fill-opacity': 1,
 40 |   'fill-color': '#000000',
 41 |   // disabled by fill-pattern, requires antialias
 42 |   // optional -> pass from calling component
 43 |   // 'fill-outline-color': '#000000',
 44 |   'fill-translate': [0, 0],
 45 |   'fill-translate-anchor': 'map',
 46 |   // optional image sprite -> pass from calling component
 47 |   // 'fill-pattern': '',
 48 |   // required for animating
 49 |   'fill-opacity-transition': { duration: 0 },
 50 | }
 51 | const heatmapPaint: specObj = {
 52 |   // Optional number greater than or equal to 1. Units in pixels. Defaults to 30. Transitionable.
 53 |   // Radius of influence of one heatmap point in pixels.
 54 |   // Increasing the value makes the heatmap smoother, but less detailed.
 55 |   'heatmap-radius': 30,
 56 |   // Optional number greater than or equal to 0. Defaults to 1.
 57 |   // A measure of how much an individual point contributes to the heatmap.
 58 |   // A value of 10 would be equivalent to having 10 points of weight 1 in the same spot.
 59 |   // Especially useful when combined with clustering.
 60 |   'heatmap-weight': 1,
 61 |   // Optional number greater than or equal to 0. Defaults to 1. Transitionable.
 62 |   // Similar to heatmap-weight but controls the intensity of the heatmap globally.
 63 |   // Primarily used for adjusting the heatmap based on zoom level.
 64 |   'heatmap-intensity': 1,
 65 |   // Defines the color of each pixel based on its density value in a heatmap.
 66 |   // Should be an expression that uses ["heatmap-density"] as input.
 67 |   'heatmap-color': [
 68 |     'interpolate',
 69 |     ['linear'],
 70 |     ['heatmap-density'],
 71 |     0,
 72 |     'rgba(0, 0, 255, 0)',
 73 |     0.1,
 74 |     'royalblue',
 75 |     0.3,
 76 |     'cyan',
 77 |     0.5,
 78 |     'lime',
 79 |     0.7,
 80 |     'yellow',
 81 |     1,
 82 |     'red',
 83 |   ],
 84 |   // Optional number between 0 and 1 inclusive. Defaults to 1. Transitionable.
 85 |   // The global opacity at which the heatmap layer will be drawn
 86 |   'heatmap-opacity': 1,
 87 | }
 88 | const extrusionPaint: specObj = {
 89 |   // Optional number between 0 and 1 inclusive. Defaults to 1. Transitionable.
 90 |   // The opacity of the entire fill extrusion layer.
 91 |   // This is rendered on a per-layer, not per-feature, basis, and data-driven styling is not available.
 92 |   'fill-extrusion-opacity': 1,
 93 |   // Optional color. Defaults to "#000000". Disabled by fill-extrusion-pattern. Transitionable.
 94 |   // The base color of the extruded fill.
 95 |   // The extrusion's surfaces will be shaded differently based on this color in combination with the root light settings.
 96 |   // If this color is specified as rgba with an alpha component, the alpha component will be ignored;
 97 |   // use fill-extrusion-opacity to set layer opacity.
 98 |   'fill-extrusion-color': '#000000',
 99 |   // Optional array of numbers. Units in pixels. Defaults to [0,0]. Transitionable.
100 |   // The geometry's offset. Values are [x, y] where negatives indicate left and up (on the flat plane), respectively.
101 |   'fill-extrusion-translate': [0, 0],
102 |   // Optional enum. One of "map", "viewport". Defaults to "map". Requires fill-extrusion-translate.
103 |   // Controls the frame of reference for fill-extrusion-translate.
104 |   // "map": The fill extrusion is translated relative to the map.
105 |   // "viewport": The fill extrusion is translated relative to the viewport.
106 |   'fill-extrusion-translate-anchor': 'map',
107 |   // Optional string. Transitionable.
108 |   // Name of image in sprite to use for drawing images on extruded fills.
109 |   // For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512).
110 |   // Note that zoom-dependent expressions will be evaluated only at integer zoom levels.
111 |   // 'fill-extrusion-pattern': '',
112 |   // Optional number greater than or equal to 0. Units in meters. Defaults to 0. Transitionable.
113 |   // The height with which to extrude this layer.
114 |   'fill-extrusion-height': 0,
115 |   // Optional number greater than or equal to 0. Units in meters. Defaults to 0.
116 |   // Requires fill-extrusion-height. Transitionable.
117 |   // The height with which to extrude the base of this layer. Must be less than or equal to fill-extrusion-height.
118 |   'fill-extrusion-base': 0,
119 |   // Optional boolean. Defaults to true.
120 |   // Whether to apply a vertical gradient to the sides of a fill-extrusion layer.
121 |   // If true, sides will be shaded slightly darker farther down.
122 |   'fill-extrusion-vertical-gradient': true,
123 | }
124 | 
125 | export { circlePaint, extrusionPaint, fillPaint, heatmapPaint, linePaint }
126 | 


--------------------------------------------------------------------------------
/docs/src/pages/index.mdx:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: ../layouts/BaseLayout.astro
  3 | ---
  4 | 
  5 | import RepoLink from '../components/RepoLink.vue'
  6 | import Demo from '../components/Demo.vue'
  7 | 
  8 | <RepoLink
  9 |   repoLink="https://github.com/benchmark-urbanism/vue-mapbox-feature"
 10 |   repoText="vue-mapbox-feature"
 11 | />
 12 | 
 13 | # VueMapboxFeature
 14 | 
 15 | A minimalist [Vue](https://vuejs.org/) component for displaying dynamic geojson on a [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) or [MapLibre GL](https://github.com/maplibre/maplibre-gl-js) maps.
 16 | 
 17 | > `v1.0.0^` has been refactored for Vue 3. Use the previous `v0.11.0` version for Vue 2 projects.
 18 | 
 19 | > See the complementary [vue-mapbox-map](https://vue-mapbox-map.web.app) repo for dynamic Mapbox GL JS maps.
 20 | 
 21 | ## Demo
 22 | 
 23 | <Demo client:only />
 24 | 
 25 | ## Setup
 26 | 
 27 | > See the documentation's [demo](https://github.com/benchmark-urbanism/vue-mapbox-feature/blob/master/docs/src/components/Demo.vue) component for a complete example.
 28 | 
 29 | Install via `yarn` or `npm`:
 30 | 
 31 | ```
 32 | yarn add @benchmark-urbanism/vue-mapbox-feature
 33 | ```
 34 | 
 35 | ## General Usage
 36 | 
 37 | Import the `VueMapboxFeature` component:
 38 | 
 39 | ```js
 40 | import VueMapboxFeature from '@benchmark-urbanism/vue-mapbox-feature'
 41 | ```
 42 | 
 43 | Once imported, the `VueMapboxFeature` tag will be available for use.
 44 | 
 45 | ```html
 46 | <VueMapboxFeature
 47 |   :map="mapInstance"
 48 |   :uid='"circle-example"'
 49 |   :layer-type='"circle"'
 50 |   :feature="bikeShelters"
 51 |   :paint="circlePaint"
 52 |   :pulse="true"
 53 | ></VueMapboxFeature>
 54 | ```
 55 | 
 56 | A `mapbox-gl` or `maplibre-gl` instance must be provided: these should be installed and instanced in accordance with standard procedures. For example:
 57 | 
 58 | ```js
 59 | mapboxgl.accessToken = this.accessToken
 60 | this.mapInstance = new mapboxgl.Map({
 61 |   container: 'map-container',
 62 |   style: 'mapbox://styles/mapbox/light-v9',
 63 |   center: [this.lng, this.lat],
 64 |   zoom: this.zoom,
 65 |   bearing: this.bearing,
 66 |   pitch: this.pitch,
 67 | })
 68 | ```
 69 | 
 70 | Provide a unique ID to each `VueMapboxFeature` and specify whether the `layer-type` is a `circle`, `line`, `fill`, `heatmap`, or `fill-extrusion`.
 71 | 
 72 | > Use `circle` layer types for `GeoJSON` points, `line` for linestrings, and `fill` for polygons
 73 | 
 74 | Load or generate a `geoJSON` feature for binding to the component's `v-bind:feature` directive. Custom styling can be provided to the component's `v-bind:paint` directive. These can be controlled from the component's data context, e.g.:
 75 | 
 76 | ```javascript
 77 | data: {
 78 |   map: null,
 79 |   circlePaint: {
 80 |     'circle-radius': 5,
 81 |     'circle-color': '#29434e',
 82 |     'circle-opacity': 0.5,
 83 |     'circle-stroke-width': 2,
 84 |     'circle-stroke-color': '#29434e',
 85 |     'circle-stroke-opacity': 0.8
 86 |   }
 87 | },
 88 | computed: {
 89 |   pointGeom () {
 90 |     // NOTE: you can use turf.js to dynamically generate geojson as computed properties
 91 |     return pointGeoJSON
 92 |   }
 93 | }
 94 | ```
 95 | 
 96 | ## API
 97 | 
 98 | The component's props / API is as follows:
 99 | 
100 | ```js
101 | // a mapbox GL or MapLibre GL instance
102 | map: {
103 |   type: Object,
104 |   default: () => {}
105 | },
106 | // provide a unique ID for each feature
107 | uid: {
108 |   type: String,
109 |   required: true
110 | },
111 | // set the layer type to circle, line, fill, heatmap, or fill-extrusion
112 | // access as "layer-type"
113 | layerType: {
114 |   type: String,
115 |   required: true,
116 |   validator: function(val) {
117 |     return ['circle', 'line', 'fill', 'heatmap', 'fill-extrusion'].indexOf(val) !== -1
118 |   }
119 | },
120 | // geoJson feature (dynamic)
121 | feature: {
122 |   type: Object,
123 |   default: () => {}
124 | },
125 | // object of key - value pairs for the mapbox paint style (dynamic)
126 | paint: {
127 |   type: Object,
128 |   default: () => {}
129 | },
130 | // whether the object should be visible (dynamic)
131 | visible: {
132 |   type: Boolean,
133 |   default: true
134 | },
135 | // whether to pulse the object (dynamic)
136 | // does not apply to heatmaps or fill-extrusions
137 | pulse: {
138 |   type: Boolean,
139 |   default: false
140 | },
141 | // optional: an existing layer behind which to place this layer
142 | // access as "behind-layer"
143 | behindLayer: {
144 |   type: String,
145 |   default: null
146 | },
147 | ```
148 | 
149 | ## Paint Styles
150 | 
151 | Default no-frills paint styles are provided by default, you'll probably want to override these with your own styling, which can also be updated dynamically.
152 | 
153 | The following default values can be overridden by passing an object to the `paint-style` directive:
154 | 
155 | ```javascript
156 | // circle layers:
157 | {
158 |   'circle-radius': 5,
159 |   'circle-color': '#000000',
160 |   'circle-blur': 0,
161 |   'circle-opacity': 1,
162 |   'circle-translate': [0, 0],
163 |   'circle-translate-anchor': 'map',
164 |   'circle-pitch-scale': 'map',
165 |   'circle-stroke-width': 0,
166 |   'circle-stroke-color': '#000000',
167 |   'circle-stroke-opacity': 1,
168 |   'circle-radius-transition': {duration: 0},
169 |   'circle-opacity-transition': {duration: 0},
170 |   'circle-stroke-opacity-transition': {duration: 0}
171 | }
172 | 
173 | // line layers:
174 | {
175 |   'line-opacity': 1,
176 |   'line-color': '#000000',
177 |   'line-translate': [0, 0],
178 |   'line-translate-anchor': 'map',
179 |   'line-width': 1,
180 |   'line-gap-width': 0,
181 |   'line-offset': 0,
182 |   'line-blur': 0,
183 |   'line-width-transition': {duration: 0},
184 |   'line-opacity-transition': {duration: 0}
185 | }
186 | 
187 | // fill layers:
188 | {
189 |   'fill-antialias': true,
190 |   'fill-opacity': 1,
191 |   'fill-color': '#000000',
192 |   'fill-translate': [0, 0],
193 |   'fill-translate-anchor': 'map',
194 |   'fill-opacity-transition': {duration: 0}
195 | }
196 | 
197 | // heatmap layers:
198 | {
199 |   'heatmap-radius': 30,
200 |   'heatmap-weight': 1,
201 |   'heatmap-intensity': 1,
202 |   'heatmap-color': [
203 |     'interpolate',
204 |     ['linear'],
205 |     ['heatmap-density'],
206 |     0, 'rgba(0, 0, 255, 0)',
207 |     0.1, 'royalblue',
208 |     0.3, 'cyan',
209 |     0.5, 'lime',
210 |     0.7, 'yellow',
211 |     1, 'red'
212 |   ],
213 |   'heatmap-opacity': 1
214 | }
215 | 
216 | // fill-extrusion layers:
217 | {
218 |   'fill-extrusion-opacity': 1,
219 |   'fill-extrusion-color': '#000000',
220 |   'fill-extrusion-translate': [0, 0],
221 |   'fill-extrusion-translate-anchor': 'map',
222 |   'fill-extrusion-height': 0,
223 |   'fill-extrusion-base': 0,
224 |   'fill-extrusion-vertical-gradient': true
225 | }
226 | ```
227 | 
228 | A `@layer-added` event, with layer uid as parameter, is emitted when the layer has been added to the map. This information can be used for subsequent interaction with the layer, such as adding layer specific events.
229 | 
230 | A `@layer-removed` event, again with layer uid as parameter, is emitted when the layer has been removed.
231 | 


--------------------------------------------------------------------------------
/src/components/VueMapboxFeature.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <slot></slot>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script setup lang="ts">
  8 | import { throttledWatch, promiseTimeout } from '@vueuse/core'
  9 | import { computed, onUnmounted, ref, toRefs } from 'vue'
 10 | 
 11 | import { animateCircle, animateFill, animateLine } from './animateFuncs'
 12 | import { circlePaint, extrusionPaint, fillPaint, heatmapPaint, linePaint } from './paintStyles'
 13 | 
 14 | // props
 15 | const props = defineProps({
 16 |   // a mapbox GL or MapLibre GL instance
 17 |   map: {
 18 |     type: Object,
 19 |     default: () => {},
 20 |   },
 21 |   // provide a unique ID for each feature
 22 |   uid: {
 23 |     type: String,
 24 |     required: true,
 25 |   },
 26 |   // set the layer type to circle, line, fill, heatmap, or fill-extrusion
 27 |   // access as "layer-type"
 28 |   layerType: {
 29 |     type: String,
 30 |     required: true,
 31 |     validator: function (val: string) {
 32 |       return ['circle', 'line', 'fill', 'heatmap', 'fill-extrusion'].indexOf(val) !== -1
 33 |     },
 34 |   },
 35 |   // geoJson feature (dynamic)
 36 |   feature: {
 37 |     type: Object,
 38 |     default: () => {},
 39 |   },
 40 |   // object of key - value pairs for the mapbox paint style (dynamic)
 41 |   paint: {
 42 |     type: Object,
 43 |     default: () => {},
 44 |   },
 45 |   // whether the object should be visible (dynamic)
 46 |   visible: {
 47 |     type: Boolean,
 48 |     default: true,
 49 |   },
 50 |   // whether to pulse the object (dynamic)
 51 |   // does not apply to heatmaps or fill-extrusions
 52 |   pulse: {
 53 |     type: Boolean,
 54 |     default: false,
 55 |   },
 56 |   // optional: an existing layer behind which to place this layer
 57 |   // access as "behind-layer"
 58 |   behindLayer: {
 59 |     type: String,
 60 |     default: null,
 61 |   },
 62 | })
 63 | // emits
 64 | const emit = defineEmits(['layer-added', 'layer-removed'])
 65 | const layoutBase = computed(() => {
 66 |   if (props.layerType === 'line') {
 67 |     return {
 68 |       visibility: 'visible',
 69 |       'line-cap': 'round',
 70 |       'line-join': 'round',
 71 |       'line-miter-limit': 2,
 72 |       'line-round-limit': 1.05,
 73 |     }
 74 |   } else {
 75 |     return {
 76 |       visibility: 'visible',
 77 |     }
 78 |   }
 79 | })
 80 | const paintMixed = computed(() => {
 81 |   if (props.layerType === 'circle') return Object.assign(circlePaint, props.paint)
 82 |   if (props.layerType === 'line') return Object.assign(linePaint, props.paint)
 83 |   if (props.layerType === 'fill') return Object.assign(fillPaint, props.paint)
 84 |   if (props.layerType === 'heatmap') return Object.assign(heatmapPaint, props.paint)
 85 |   return Object.assign(extrusionPaint, props.paint)
 86 | })
 87 | const updateGeom = () => {
 88 |   props.map.getSource(props.uid).setData(props.feature)
 89 | }
 90 | const removeFeature = () => {
 91 |   if (props.map && props.map.getLayer(props.uid)) {
 92 |     props.map.removeLayer(props.uid)
 93 |     emit('layer-removed', props.uid)
 94 |   }
 95 |   if (props.map && props.map.getSource(props.uid)) {
 96 |     props.map.removeSource(props.uid)
 97 |   }
 98 | }
 99 | const updatePaint = () => {
100 |   if (!props.map.getLayer(props.uid)) return
101 |   for (const [key, val] of Object.entries(paintMixed.value)) {
102 |     props.map.setPaintProperty(props.uid, key, val)
103 |   }
104 | }
105 | const updateVisible = () => {
106 |   if (!props.map.getLayer(props.uid)) return
107 |   if (props.visible) {
108 |     props.map.setLayoutProperty(props.uid, 'visibility', 'visible')
109 |   } else {
110 |     props.map.setLayoutProperty(props.uid, 'visibility', 'none')
111 |   }
112 | }
113 | // animate Func is an Anime instance
114 | const animateFunc = ref<any | null>(null)
115 | const cancelAnim = () => {
116 |   if (!!animateFunc.value) {
117 |     animateFunc.value.pause()
118 |     animateFunc.value = null
119 |   }
120 | }
121 | const updatePulse = () => {
122 |   if (!props.pulse) return cancelAnim()
123 |   if (!props.map.getLayer(props.uid)) return
124 |   if (props.layerType === 'circle') {
125 |     animateFunc.value = animateCircle(paintMixed.value, props.map, props.uid)
126 |   } else if (props.layerType === 'line') {
127 |     animateFunc.value = animateLine(paintMixed.value, props.map, props.uid)
128 |   } else if (props.layerType === 'fill') {
129 |     animateFunc.value = animateFill(paintMixed.value, props.map, props.uid)
130 |   } else {
131 |     cancelAnim()
132 |   }
133 | }
134 | // functions
135 | const loadGeom = () => {
136 |   // add source
137 |   props.map.addSource(props.uid, {
138 |     type: 'geojson',
139 |     data: props.feature,
140 |   })
141 |   // add layer
142 |   props.map.addLayer(
143 |     {
144 |       id: props.uid,
145 |       type: props.layerType,
146 |       source: props.uid,
147 |       layout: layoutBase.value,
148 |       paint: paintMixed.value,
149 |       transition: {
150 |         duration: 0,
151 |         delay: 0,
152 |       },
153 |     },
154 |     props.behindLayer
155 |   )
156 |   // return the layer for reference from parent component
157 |   emit('layer-added', props.uid)
158 |   // trigger other updates
159 |   updatePaint()
160 |   updateVisible()
161 |   updatePulse()
162 | }
163 | const loadHandler = async () => {
164 |   while (true) {
165 |     if (props.map.isStyleLoaded()) {
166 |       loadGeom()
167 |       break
168 |     } else {
169 |       await promiseTimeout(50)
170 |     }
171 |   }
172 | }
173 | const srcLoaded = ref(false)
174 | const logicHandler = () => {
175 |   if (!props.map) return
176 |   if (!srcLoaded.value && feature.value) {
177 |     // if not loaded and feature exists - then load
178 |     srcLoaded.value = true
179 |     loadHandler()
180 |   } else if (srcLoaded.value && !feature.value) {
181 |     // if already loaded but feature is removed
182 |     srcLoaded.value = false
183 |     removeFeature()
184 |   } else if (srcLoaded.value && props.map.getLayer(props.uid)) {
185 |     // if feature exists, update if layer is finished loading
186 |     updateGeom()
187 |   }
188 | }
189 | // logic
190 | const { map, feature, paint, visible, pulse } = toRefs(props)
191 | // trigger paint, visible, pulse once feature is loaded
192 | const throttleRate = 20
193 | // map or feature could be available first, so watch for both
194 | throttledWatch(
195 |   map,
196 |   () => {
197 |     logicHandler()
198 |   },
199 |   { immediate: true, throttle: throttleRate }
200 | )
201 | throttledWatch(
202 |   feature,
203 |   () => {
204 |     logicHandler()
205 |   },
206 |   { immediate: true, throttle: throttleRate }
207 | )
208 | throttledWatch(
209 |   paint,
210 |   () => {
211 |     updatePaint()
212 |   },
213 |   { throttle: throttleRate }
214 | )
215 | throttledWatch(
216 |   visible,
217 |   () => {
218 |     updateVisible()
219 |   },
220 |   { throttle: throttleRate }
221 | )
222 | throttledWatch(
223 |   pulse,
224 |   () => {
225 |     updatePulse()
226 |   },
227 |   { throttle: throttleRate }
228 | )
229 | // important for cleaning up old layers and avoiding style clashes
230 | onUnmounted(() => {
231 |   removeFeature()
232 | })
233 | </script>
234 | 


--------------------------------------------------------------------------------
/docs/src/assets/bikeShelters.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "type": "FeatureCollection",
  3 |   "features": [
  4 |     {
  5 |       "type": "Feature",
  6 |       "geometry": {
  7 |         "type": "Point",
  8 |         "coordinates": [-73.952728, 40.742458]
  9 |       },
 10 |       "properties": {
 11 |         "type": "Bike",
 12 |         "name": "Jackson Avenue and 50 Avenue, Queens",
 13 |         "styleUrl": "#style10",
 14 |         "styleHash": "-46fc6717"
 15 |       }
 16 |     },
 17 |     {
 18 |       "type": "Feature",
 19 |       "geometry": {
 20 |         "type": "Point",
 21 |         "coordinates": [-73.990341, 40.73695]
 22 |       },
 23 |       "properties": {
 24 |         "type": "Bike",
 25 |         "name": "East 17 Street and Broadway, Manhattan",
 26 |         "styleUrl": "#style10",
 27 |         "styleHash": "-46fc6717"
 28 |       }
 29 |     },
 30 |     {
 31 |       "type": "Feature",
 32 |       "geometry": {
 33 |         "type": "Point",
 34 |         "coordinates": [-73.894196, 40.86306]
 35 |       },
 36 |       "properties": {
 37 |         "type": "Bike",
 38 |         "name": "East Kingsbridge Road and Briggs Avenue, Bronx",
 39 |         "styleUrl": "#style10",
 40 |         "styleHash": "-46fc6717"
 41 |       }
 42 |     },
 43 |     {
 44 |       "type": "Feature",
 45 |       "geometry": {
 46 |         "type": "Point",
 47 |         "coordinates": [-73.9814, 40.689873]
 48 |       },
 49 |       "properties": {
 50 |         "type": "Bike",
 51 |         "name": "Dekalb Avenue and Flatbush Avenue, Brooklyn",
 52 |         "styleUrl": "#style10",
 53 |         "styleHash": "-46fc6717"
 54 |       }
 55 |     },
 56 |     {
 57 |       "type": "Feature",
 58 |       "geometry": {
 59 |         "type": "Point",
 60 |         "coordinates": [-73.992767, 40.74279]
 61 |       },
 62 |       "properties": {
 63 |         "type": "Bike",
 64 |         "name": "West 23 Street and 6 Avenue, Manhattan",
 65 |         "styleUrl": "#style10",
 66 |         "styleHash": "-46fc6717"
 67 |       }
 68 |     },
 69 |     {
 70 |       "type": "Feature",
 71 |       "geometry": {
 72 |         "type": "Point",
 73 |         "coordinates": [-73.906067, 40.849636]
 74 |       },
 75 |       "properties": {
 76 |         "type": "Bike",
 77 |         "name": "Grand Concourse and East Tremont Avenue, Bronx",
 78 |         "styleUrl": "#style10",
 79 |         "styleHash": "-46fc6717"
 80 |       }
 81 |     },
 82 |     {
 83 |       "type": "Feature",
 84 |       "geometry": {
 85 |         "type": "Point",
 86 |         "coordinates": [-73.921471, 40.766827]
 87 |       },
 88 |       "properties": {
 89 |         "type": "Bike",
 90 |         "name": "31 Street and 30 Avenue, Queens",
 91 |         "styleUrl": "#style10",
 92 |         "styleHash": "-46fc6717"
 93 |       }
 94 |     },
 95 |     {
 96 |       "type": "Feature",
 97 |       "geometry": {
 98 |         "type": "Point",
 99 |         "coordinates": [-73.94445, 40.714535]
100 |       },
101 |       "properties": {
102 |         "type": "Bike",
103 |         "name": "Graham Avenue and Metropolitan Avenue, Brooklyn",
104 |         "styleUrl": "#style10",
105 |         "styleHash": "-46fc6717"
106 |       }
107 |     },
108 |     {
109 |       "type": "Feature",
110 |       "geometry": {
111 |         "type": "Point",
112 |         "coordinates": [-73.824081, 40.686161]
113 |       },
114 |       "properties": {
115 |         "type": "Bike",
116 |         "name": "Lefferts Boulevard and Liberty Avenue, Queens",
117 |         "styleUrl": "#style10",
118 |         "styleHash": "-46fc6717"
119 |       }
120 |     },
121 |     {
122 |       "type": "Feature",
123 |       "geometry": {
124 |         "type": "Point",
125 |         "coordinates": [-74.004272, 40.654236]
126 |       },
127 |       "properties": {
128 |         "type": "Bike",
129 |         "name": "4 Avenue and 36 Street, Brooklyn",
130 |         "styleUrl": "#style10",
131 |         "styleHash": "-46fc6717"
132 |       }
133 |     },
134 |     {
135 |       "type": "Feature",
136 |       "geometry": {
137 |         "type": "Point",
138 |         "coordinates": [-73.95826, 40.608791]
139 |       },
140 |       "properties": {
141 |         "type": "Bike",
142 |         "name": "Kings Highway and East 15 Street, Brooklyn",
143 |         "styleUrl": "#style10",
144 |         "styleHash": "-46fc6717"
145 |       }
146 |     },
147 |     {
148 |       "type": "Feature",
149 |       "geometry": {
150 |         "type": "Point",
151 |         "coordinates": [-73.993942, 40.751404]
152 |       },
153 |       "properties": {
154 |         "type": "Bike",
155 |         "name": "West 33 Street and 8 Avenue, Manhattan",
156 |         "styleUrl": "#style10",
157 |         "styleHash": "-46fc6717"
158 |       }
159 |     },
160 |     {
161 |       "type": "Feature",
162 |       "geometry": {
163 |         "type": "Point",
164 |         "coordinates": [-73.998398, 40.745289]
165 |       },
166 |       "properties": {
167 |         "type": "Bike",
168 |         "name": "West 23 Street and 8 Avenue, Manhattan",
169 |         "styleUrl": "#style10",
170 |         "styleHash": "-46fc6717"
171 |       }
172 |     },
173 |     {
174 |       "type": "Feature",
175 |       "geometry": {
176 |         "type": "Point",
177 |         "coordinates": [-73.981148, 40.575638]
178 |       },
179 |       "properties": {
180 |         "type": "Bike",
181 |         "name": "Surf Avenue and Stillwell Avenue, Brooklyn",
182 |         "styleUrl": "#style10",
183 |         "styleHash": "-46fc6717"
184 |       }
185 |     },
186 |     {
187 |       "type": "Feature",
188 |       "geometry": {
189 |         "type": "Point",
190 |         "coordinates": [-73.990273, 40.713943]
191 |       },
192 |       "properties": {
193 |         "type": "Bike",
194 |         "name": "Rutgers Street and East Broadway, Manhattan",
195 |         "styleUrl": "#style10",
196 |         "styleHash": "-46fc6717"
197 |       }
198 |     },
199 |     {
200 |       "type": "Feature",
201 |       "geometry": {
202 |         "type": "Point",
203 |         "coordinates": [-73.927322, 40.865528]
204 |       },
205 |       "properties": {
206 |         "type": "Bike",
207 |         "name": "Dyckman Street and Broadway, Manhattan",
208 |         "styleUrl": "#style10",
209 |         "styleHash": "-46fc6717"
210 |       }
211 |     },
212 |     {
213 |       "type": "Feature",
214 |       "geometry": {
215 |         "type": "Point",
216 |         "coordinates": [-73.844688, 40.720097]
217 |       },
218 |       "properties": {
219 |         "type": "Bike",
220 |         "name": "71 Avenue and Austin Street, Forest Hills, Queens",
221 |         "styleUrl": "#style10",
222 |         "styleHash": "-46fc6717"
223 |       }
224 |     },
225 |     {
226 |       "type": "Feature",
227 |       "geometry": {
228 |         "type": "Point",
229 |         "coordinates": [-74.169891, 40.560261]
230 |       },
231 |       "properties": {
232 |         "type": "Bike",
233 |         "name": "Eltingville Transit Center, Staten Island",
234 |         "styleUrl": "#style10",
235 |         "styleHash": "-46fc6717"
236 |       }
237 |     },
238 |     {
239 |       "type": "Feature",
240 |       "geometry": {
241 |         "type": "Point",
242 |         "coordinates": [-74.066162, 40.59052]
243 |       },
244 |       "properties": {
245 |         "type": "Bike",
246 |         "name": "Father Capodanno Boulevard, Staten Island",
247 |         "styleUrl": "#style10",
248 |         "styleHash": "-46fc6717"
249 |       }
250 |     }
251 |   ]
252 | }
253 | 


--------------------------------------------------------------------------------