├── .env
├── .github
└── workflows
│ └── publish.yml
├── .gitignore
├── .npmrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── eslint.config.mjs.disabled
├── jsconfig.json
├── package.json
├── pnpm-lock.yaml
├── src
├── app.html
├── global.d.ts
├── lib
│ ├── asset-loader.js
│ ├── components.js
│ ├── event-bindings.js
│ ├── geocoder
│ │ ├── Geocoder.svelte
│ │ └── geocoder-action.js
│ ├── map
│ │ ├── Map.svelte
│ │ ├── Marker.svelte
│ │ ├── controls
│ │ │ ├── GeolocateControl.svelte
│ │ │ ├── NavigationControl.svelte
│ │ │ └── ScaleControl.svelte
│ │ └── map-action.js
│ ├── mapbox.js
│ └── queue.js
└── routes
│ ├── +page.svelte
│ ├── _Earthquakes.svelte
│ └── _MiniScroller.svelte
├── static
├── favicon.png
├── normalize.css
├── prettify.css
└── style.css
├── svelte.config.js
└── vite.config.js
/.env:
--------------------------------------------------------------------------------
1 | PUBLIC_MAPBOX_TOKEN=your_mapbox_token
2 |
--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
1 | name: publish
2 |
3 | on:
4 | push:
5 | branches:
6 | - '*'
7 | tags:
8 | - 'v*'
9 | pull_request:
10 | branches:
11 | - '*'
12 |
13 | env:
14 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
15 |
16 | jobs:
17 | publish-npm:
18 | if: startsWith(github.ref, 'refs/tags/v')
19 | runs-on: ubuntu-latest
20 | steps:
21 | - name: checkout
22 | uses: actions/checkout@v4
23 |
24 | - name: set up node and pnpm
25 | run: |
26 | corepack enable
27 | pnpm config set '//registry.npmjs.org/:_authToken' "${NODE_AUTH_TOKEN}"
28 | pnpm i
29 |
30 | - name: publish
31 | run: pnpm publish --no-git-checks --access public
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /.svelte-kit
4 | /package
5 | .env.local
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | use-node-version=22.11.0
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Svelte-Mapbox Changelog
2 |
3 | # Change Log
4 | All notable changes to this project will be documented in this file.
5 |
6 | The format is based on [Keep a Changelog](http://keepachangelog.com/)
7 | and this project adheres to [Semantic Versioning](http://semver.org/).
8 |
9 | ## [8.0.0]
10 |
11 | ### Recentre event
12 |
13 | Events made more predictable - the recentre event from a map used to actually be `dragend`. It is now triggered by `moveend` - which means it will be fired for anything which moves the map. `dragend` now fires the `dragend` event.
14 |
15 | To retain prior behaviour - change uses of `recentre` on `Map` to be `dragend`.
16 |
17 | ### SvelteKit Support
18 |
19 | All external dependencies have been removed (except Mapbox of course!)
20 | `fastq` is removed in favour of svelte stores, and because it didn't support ESM.
21 | `@beyonk/svelte-loader` is removed in favour of using actions to load dependencies.
22 | This module should work fine with `SvelteKit` now.
23 |
24 | ### IE11 Support
25 |
26 | This module no longer attempts to support IE11, and neither should you.
27 |
28 | ### Actions driven
29 |
30 | Both components now use Svelte `actions` instead of `onMount`, resulting in faster loading.
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2021 [these people](https://github.com/beyonk-adventures/svelte-mapbox/graphs/contributors)
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | ## Svelte MapBox
10 |
11 | [](http://standardjs.com) [](https://svelte.dev) 
12 |
13 | Maps and Geocoding (Autocomplete) [MapBox](https://www.mapbox.com/) components in Vanilla JS (or Svelte)
14 |
15 | * SvelteKit Ready
16 | * SSR Ready
17 | * Lightweight
18 | * No clientside dependencies (Map)
19 | * Allow creation of custom Svelte components on the map
20 |
21 | * Note that the GeoCoder has a clientside dependency, since it adds about 0.5mb to the bundle size, and significant time to the build time if bundled.
22 |
23 | ## Installing
24 |
25 | ```
26 | npm install --save-dev @beyonk/svelte-mapbox
27 | ```
28 |
29 | ### Basic Usage (Map)
30 |
31 | The container component is the map, and there are a variety of components which go on the map.
32 |
33 | ```jsx
34 |
46 |
47 |
63 |
64 |
70 | ```
71 |
72 | ### Markers
73 |
74 | By default, markers are typical map pins to which you can pass a color property.
75 |
76 | ```jsx
77 |
78 | ```
79 |
80 | You may also create a custom pin with the default slot.
81 |
82 | ```jsx
83 |
87 |
88 |
94 |
95 |
96 | ```
97 |
98 | ### Marker Popups
99 | By default a popup is revealed when you click a pin. It is populated with text provided in the label property.
100 |
101 | ```jsx
102 |
103 | ```
104 |
105 | To indicate interactivity, you may target the marker with some custom CSS:
106 |
107 | ```jsx
108 |
113 | ```
114 |
115 | Optionally, disable the popup with the `popup={false}` property:
116 |
117 | ```jsx
118 |
119 | ```
120 |
121 | You may alternatively pass a custom DOM element to the marker to use as a popup.
122 |
123 | ```jsx
124 |
125 |
5 | 
130 |
131 |