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


/.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 | 


--------------------------------------------------------------------------------
/.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_MAP }}'
19 |           channelId: live
20 |           projectId: vue-mapbox-map
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_MAP }}'
17 |           projectId: vue-mapbox-map
18 |         env:
19 |           FIREBASE_CLI_PREVIEWS: hostingchannels
20 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.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/


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


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-mapbox-map
 2 | 
 3 | [![publish package](https://github.com/benchmark-urbanism/vue-mapbox-map/actions/workflows/publish_package.yml/badge.svg)](https://github.com/benchmark-urbanism/vue-mapbox-map/actions/workflows/publish_package.yml)[![deploy docs (merge)](https://github.com/benchmark-urbanism/vue-mapbox-map/actions/workflows/firebase-hosting-merge.yml/badge.svg)](https://github.com/benchmark-urbanism/vue-mapbox-map/actions/workflows/firebase-hosting-merge.yml)
 4 | 
 5 | A minimalist [Vue](https://vuejs.org/) component wrapping [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) or [MapLibre GL](https://github.com/maplibre/maplibre-gl-js) for dynamic maps.
 6 | 
 7 | In the spirit of keeping things light and not reinventing the wheel: this component wraps only what is necessary for dynamic updates.
 8 | 
 9 | Please see the [docs](https://vue-mapbox-map.web.app/) for more information!
10 | 


--------------------------------------------------------------------------------
/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-map.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/public/favicons/192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benchmark-urbanism/vue-mapbox-map/3eca35af317a218afbd0267606bbceb221364a6b/docs/public/favicons/192.png


--------------------------------------------------------------------------------
/docs/public/favicons/512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benchmark-urbanism/vue-mapbox-map/3eca35af317a218afbd0267606bbceb221364a6b/docs/public/favicons/512.png


--------------------------------------------------------------------------------
/docs/public/favicons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benchmark-urbanism/vue-mapbox-map/3eca35af317a218afbd0267606bbceb221364a6b/docs/public/favicons/apple-touch-icon.png


--------------------------------------------------------------------------------
/docs/public/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benchmark-urbanism/vue-mapbox-map/3eca35af317a218afbd0267606bbceb221364a6b/docs/public/favicons/favicon.ico


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


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


--------------------------------------------------------------------------------
/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 |   div.flex.justify-center
 7 |     div.pair
 8 |       div.label Zoom:
 9 |       div.info {{ zoom.toLocaleString('en-GB', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}
10 |     div.pair
11 |       div.label Pitch:
12 |       div.info {{ pitch.toLocaleString('en-GB', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}
13 |     div.pair
14 |       div.label Bearing:
15 |       div.info {{ bearing.toLocaleString('en-GB', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }}
16 |   VueMapboxMap(
17 |     :bearing='bearing',
18 |     :lat='scene.lat',
19 |     :lng='scene.lng',
20 |     :map='mapInstance',
21 |     :pitch='pitch',
22 |     :zoom='zoom'
23 |   )
24 | </template>
25 | 
26 | <script setup>
27 | import { useWindowScroll, useWindowSize } from '@vueuse/core'
28 | import mapboxgl from 'mapbox-gl'
29 | import { computed, markRaw, onMounted, onUnmounted, reactive, ref } from 'vue'
30 | import VueMapboxMap from '../../../src/components/VueMapboxMap.vue'
31 | 
32 | const { x, y } = useWindowScroll()
33 | const { width, height } = useWindowSize()
34 | const offset = computed(() => {
35 |   let off = y.value / (2000 - height.value)
36 |   return off > 1 ? 1 : off
37 | })
38 | const scene = reactive({
39 |   lng: -73.982,
40 |   lat: 40.768,
41 |   baseZoom: 13,
42 |   basePitch: 20,
43 |   baseBearing: 0,
44 | })
45 | const zoom = computed(() => scene.baseZoom + offset.value * 5)
46 | const pitch = computed(() => scene.basePitch + offset.value * 30)
47 | const bearing = computed(() => scene.baseBearing + offset.value * 100)
48 | mapboxgl.accessToken =
49 |   'pk.eyJ1Ijoic2hvbmdvbG9sbyIsImEiOiJja2lubnc4ZWcxNTI2MzJxajhsa3NxcWtxIn0.gg7J040GTgBNook7aNclMQ'
50 | const mapInstance = ref(null)
51 | onMounted(() => {
52 |   mapInstance.value = markRaw(
53 |     new mapboxgl.Map({
54 |       container: 'map-container',
55 |       style: 'mapbox://styles/mapbox/light-v9',
56 |       center: [scene.lng, scene.lat],
57 |       zoom: scene.baseZoom,
58 |       pitch: scene.basePitch,
59 |       bearing: scene.baseBearing,
60 |       interactive: false,
61 |     })
62 |   )
63 | })
64 | </script>
65 | 
66 | <style lang="postcss">
67 | #map-container {
68 |   @apply my-3 h-[400px] max-h-[400px] min-h-[400px] w-full bg-theme;
69 | }
70 | .pair {
71 |   @apply flex flex-initial px-2;
72 | }
73 | .label {
74 |   @apply flex-initial self-end px-2 font-medium;
75 | }
76 | .info {
77 |   @apply flex-initial self-end px-2 text-lg;
78 | }
79 | @media only screen and (max-width: 820px) {
80 |   .label {
81 |     @apply text-sm;
82 |   }
83 |   .info {
84 |     @apply text-base;
85 |   }
86 | }
87 | </style>
88 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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-map</title>
12 |     <meta set:html name="description" content="A Vue component for dynamic Mapbox GL JS maps!" />
13 |     <meta
14 |       set:html
15 |       name="keywords"
16 |       content="vue mapbox component vue-mapbox-map interactive vue3 mapbox-gl"
17 |     />
18 |     <!-- favicons -->
19 |     <link rel="icon" href="/favicon.ico" />
20 |     <link rel="icon" href="/favicons/favicon.ico" />
21 |     <link rel="icon" href="/favicons/icon.svg" type="image/svg+xml" />
22 |     <link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
23 |     <link rel="manifest" href="/manifest.webmanifest" />
24 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
25 |     <link
26 |       rel="stylesheet"
27 |       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"
28 |     />
29 |     <link
30 |       rel="stylesheet"
31 |       href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;300;400;500;600;700&display=swap"
32 |     />
33 |     <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
34 |   </head>
35 |   <body class="h-full w-full">
36 |     <div class="app-container">
37 |       <div class="app-content">
38 |         <slot />
39 |       </div>
40 |     </div>
41 |   </body>
42 | </html>
43 | 
44 | <style>
45 |   .app-container {
46 |     @apply flex h-full min-h-screen w-full flex-col items-center;
47 |   }
48 |   .app-content {
49 |     @apply flex w-full max-w-5xl flex-col items-stretch py-10 px-3;
50 |   }
51 |   @media only screen and (max-width: 820px) {
52 |     .app-content {
53 |       @apply px-1;
54 |     }
55 |   }
56 | </style>
57 | 


--------------------------------------------------------------------------------
/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-map"
 10 |   repoText="vue-mapbox-map"
 11 | />
 12 | 
 13 | # VueMapboxMap
 14 | 
 15 | A minimalist [Vue](https://vuejs.org/) component wrapping [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) or [MapLibre GL](https://github.com/maplibre/maplibre-gl-js) for dynamic maps.
 16 | 
 17 | In the spirit of keeping things light and not reinventing the wheel: this component wraps only what is necessary for dynamic updates. Use the map instance directly otherwise.
 18 | 
 19 | > `v1.0.0^` has been refactored for Vue 3. Use the previous `v0.14.11` version for Vue 2 projects.
 20 | 
 21 | > See the complementary [vue-mapbox-feature](https://vue-mapbox-feature.web.app) repo for dynamic geoJSON features.
 22 | 
 23 | ## Demo
 24 | 
 25 | <Demo client:only />
 26 | 
 27 | ## Setup
 28 | 
 29 | > See the documentation's [demo](https://github.com/benchmark-urbanism/vue-mapbox-map/blob/master/docs/src/components/Demo.vue) component for a complete example.
 30 | 
 31 | Install via `yarn` or `npm`:
 32 | 
 33 | ```
 34 | yarn add @benchmark-urbanism/vue-mapbox-map
 35 | ```
 36 | 
 37 | ## General Usage
 38 | 
 39 | Import the `VueMapboxMap` component:
 40 | 
 41 | ```js
 42 | import VueMapboxMap from '@benchmark-urbanism/vue-mapbox-map'
 43 | ```
 44 | 
 45 | Once imported, the `VueMapboxMap` tag will be available for use:
 46 | 
 47 | ```html
 48 | <VueMapboxMap
 49 |   :map="mapInstance"
 50 |   :lng="scene.lng"
 51 |   :lat="scene.lat"
 52 |   :zoom="scene.zoom"
 53 |   :pitch="scene.pitch"
 54 |   :bearing="scene.bearing"
 55 | ></VueMapboxMap>
 56 | ```
 57 | 
 58 | A `mapbox-gl` or `maplibre-gl` instance must be provided: these should be installed and instanced in accordance with standard procedures. Reactive data can be used to update the `lng`, `lat`, `zoom`, `pitch`, and `bearing` dynamically from the data context of the component:
 59 | 
 60 | ```js
 61 | // use reactive data for updating the map
 62 | const scene = reactive({
 63 |   lng: -73.982,
 64 |   lat: 40.768,
 65 |   zoom: 13,
 66 |   pitch: 20,
 67 |   bearing: 0,
 68 | })
 69 | // setup mapbox
 70 | mapboxgl.accessToken = aToken
 71 | onMounted(() => {
 72 |   mapInstance = new mapboxgl.Map({
 73 |     container: 'map-container',
 74 |     style: 'mapbox://styles/mapbox/light-v9',
 75 |     center: [scene.lng, scene.lat],
 76 |     zoom: scene.zoom,
 77 |     pitch: scene.pitch,
 78 |     interactive: false,
 79 |   })
 80 | })
 81 | ```
 82 | 
 83 | ## API
 84 | 
 85 | The component's props / API is as follows:
 86 | 
 87 | ```js
 88 | // a mapbox or maplibre instance
 89 | map: {
 90 |   type: Object,
 91 |   default: () => {},
 92 | },
 93 | // whether to jump, ease, or fly for transitions
 94 | transitionMode: {
 95 |   type: String,
 96 |   required: false,
 97 |   default: 'jump',
 98 |   validator: function (value) {
 99 |     return ['jump', 'ease', 'fly'].indexOf(value) !== -1
100 |   },
101 | },
102 | // longitude (dynamic)
103 | lng: {
104 |   type: [Number, String],
105 |   required: true,
106 | },
107 | // latitude (dynamic)
108 | lat: {
109 |   type: [Number, String],
110 |   required: true,
111 | },
112 | // zoom (dynamic)
113 | zoom: {
114 |   type: [Number, String],
115 |   default: 13,
116 | },
117 | // pitch (dynamic)
118 | pitch: {
119 |   type: [Number, String],
120 |   default: 60,
121 | },
122 | // bearing (dynamic)
123 | bearing: {
124 |   type: [Number, String],
125 |   default: 0,
126 | },
127 | // around (dynamic)
128 | around: {
129 |   type: Array,
130 |   default: null,
131 |   validator: function (value) {
132 |     return value.length === 2
133 |   },
134 | },
135 | ```
136 | 


--------------------------------------------------------------------------------
/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 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 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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "@benchmark-urbanism/vue-mapbox-map",
  3 |   "version": "2.0.0",
  4 |   "type": "module",
  5 |   "description": "A minimalist Vue component wrapping Mapbox GL or MapLibre GL dynamic maps!",
  6 |   "homepage": "https://benchmark-urbanism.github.io/vue-mapbox-map/",
  7 |   "repository": {
  8 |     "type": "git",
  9 |     "url": "git@github.com:benchmark-urbanism/vue-mapbox-map.git"
 10 |   },
 11 |   "author": "benchmark-urbanism",
 12 |   "license": "MIT",
 13 |   "keywords": [
 14 |     "component",
 15 |     "mapbox",
 16 |     "maplibre",
 17 |     "maps",
 18 |     "maptiler",
 19 |     "pbf",
 20 |     "vue"
 21 |   ],
 22 |   "bugs": "https://github.com/benchmark-urbanism/vue-mapbox-map/issues",
 23 |   "files": [
 24 |     "dist",
 25 |     "src",
 26 |     "package.json",
 27 |     "LICENSE"
 28 |   ],
 29 |   "main": "dist/VueMapboxMap.umd.js",
 30 |   "module": "dist/VueMapboxMap.esm.js",
 31 |   "unpkg": "dist/VueMapboxMap.min.js",
 32 |   "browser": {
 33 |     "./sfc": "src/components/VueMapboxMap.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 |     "@types/node": "18.11.18",
 56 |     "@typescript-eslint/eslint-plugin": "5.47.1",
 57 |     "@typescript-eslint/parser": "5.47.1",
 58 |     "@vicons/fa": "0.12.0",
 59 |     "@volar/vue-language-plugin-pug": "1.0.18",
 60 |     "@vue/compiler-sfc": "3.2.45",
 61 |     "@vueuse/core": "9.9.0",
 62 |     "astro": "1.8.0",
 63 |     "autoprefixer": "10.4.13",
 64 |     "eslint": "8.30.0",
 65 |     "eslint-config-prettier": "8.5.0",
 66 |     "eslint-plugin-simple-import-sort": "8.0.0",
 67 |     "eslint-plugin-tailwindcss": "3.7.1",
 68 |     "eslint-plugin-vue": "9.8.0",
 69 |     "hastscript": "7.1.0",
 70 |     "mapbox-gl": "2.11.1",
 71 |     "postcss": "8.4.20",
 72 |     "postcss-html": "1.5.0",
 73 |     "postcss-import": "15.1.0",
 74 |     "postcss-markdown": "1.2.0",
 75 |     "prettier": "2.8.1",
 76 |     "prettier-plugin-astro": "0.7.0",
 77 |     "prettier-plugin-tailwindcss": "0.2.1",
 78 |     "pug": "3.0.2",
 79 |     "pug-plain-loader": "1.1.0",
 80 |     "rehype-autolink-headings": "6.1.1",
 81 |     "rehype-slug": "5.1.0",
 82 |     "remark-directive": "2.0.1",
 83 |     "remark-emoji": "3.0.2",
 84 |     "remark-smartypants": "2.0.0",
 85 |     "rollup-plugin-typescript2": "0.34.1",
 86 |     "rollup-plugin-vue": "6.0.0",
 87 |     "serialize-javascript": "6.0.0",
 88 |     "shorthash": "0.0.2",
 89 |     "stylelint": "14.16.0",
 90 |     "stylelint-config-prettier": "9.0.4",
 91 |     "stylelint-config-standard": "29.0.0",
 92 |     "tailwindcss": "3.2.4",
 93 |     "typescript": "4.9.4",
 94 |     "vite": "4.0.3",
 95 |     "vue-eslint-parser": "9.1.0"
 96 |   },
 97 |   "dependencies": {
 98 |     "vue": "3.2.45"
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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'],
25 |     output: {
26 |       format: 'esm',
27 |       file: 'dist/VueMapboxMap.esm.js',
28 |     },
29 |     plugins: [rep, ts, commonjs(), nodeResolve(), vue()],
30 |   },
31 |   // SSR build.
32 |   {
33 |     input: 'src/main.ts',
34 |     external: ['vue'],
35 |     output: {
36 |       format: 'cjs',
37 |       file: 'dist/VueMapboxMap.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/VueMapboxMap.min.js',
48 |       exports: 'default',
49 |       name: 'VueMapboxMap',
50 |     },
51 |     plugins: [rep, ts, commonjs(), nodeResolve(), vue()],
52 |   },
53 | ]
54 | 


--------------------------------------------------------------------------------
/src/components/VueMapboxMap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | import { computed, toRefs, watchEffect } from 'vue'
 9 | 
10 | // props
11 | const props = defineProps({
12 |   // a mapbox or maplibre instance
13 |   map: {
14 |     type: Object,
15 |     default: () => {},
16 |   },
17 |   // whether to jump, ease, or fly for transitions
18 |   transitionMode: {
19 |     type: String,
20 |     required: false,
21 |     default: 'jump',
22 |     validator: function (value: string) {
23 |       return ['jump', 'ease', 'fly'].indexOf(value) !== -1
24 |     },
25 |   },
26 |   // longitude (dynamic)
27 |   lng: {
28 |     type: [Number, String],
29 |     required: true,
30 |   },
31 |   // latitude (dynamic)
32 |   lat: {
33 |     type: [Number, String],
34 |     required: true,
35 |   },
36 |   // zoom (dynamic)
37 |   zoom: {
38 |     type: [Number, String],
39 |     default: 13,
40 |   },
41 |   // pitch (dynamic)
42 |   pitch: {
43 |     type: [Number, String],
44 |     default: 60,
45 |   },
46 |   // bearing (dynamic)
47 |   bearing: {
48 |     type: [Number, String],
49 |     default: 0,
50 |   },
51 |   // around (dynamic)
52 |   around: {
53 |     type: Array,
54 |     default: null,
55 |     validator: function (value: Array<Number>) {
56 |       return value.length === 2
57 |     },
58 |   },
59 | })
60 | const center = computed(() => {
61 |   return { lng: props.lng, lat: props.lat }
62 | })
63 | const zoom = computed(() => props.zoom)
64 | const bearing = computed(() => {
65 |   if (props.bearing < 0) return 0
66 |   if (props.bearing > 360) return 360
67 |   return props.bearing
68 | })
69 | const pitch = computed(() => {
70 |   if (props.pitch < 0) return 0
71 |   if (props.pitch > 85) return 85
72 |   return props.pitch
73 | })
74 | const { map } = toRefs(props)
75 | watchEffect(() => {
76 |   if (!map.value) return
77 |   const scene = {
78 |     center: center.value,
79 |     zoom: zoom.value,
80 |     bearing: bearing.value,
81 |     pitch: pitch.value,
82 |     around: props.around,
83 |   }
84 |   if (props.transitionMode === 'jump') {
85 |     map.value.jumpTo(scene)
86 |   } else if (props.transitionMode === 'ease') {
87 |     map.value.easeTo(scene)
88 |   } else if (props.transitionMode === 'fly') {
89 |     map.value.flyTo(scene)
90 |   }
91 | })
92 | </script>
93 | 


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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': '#222',
64 |         'dark-grey': '#1D1D1D',
65 |         'darker-grey': '#19181B',
66 |       },
67 |     },
68 |   },
69 | }
70 | 


--------------------------------------------------------------------------------
/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 | 


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