https://github.com/jack-weilage/svelte-mapbox
A simple and powerful Svelte wrapper around `mapbox-gl`
https://github.com/jack-weilage/svelte-mapbox
mapbox mapbox-gl svelte sveltekit
Last synced: 10 months ago
JSON representation
A simple and powerful Svelte wrapper around `mapbox-gl`
- Host: GitHub
- URL: https://github.com/jack-weilage/svelte-mapbox
- Owner: jack-weilage
- Created: 2023-10-24T00:07:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-09T18:13:01.000Z (over 2 years ago)
- Last Synced: 2025-02-20T12:02:53.364Z (over 1 year ago)
- Topics: mapbox, mapbox-gl, svelte, sveltekit
- Language: Svelte
- Homepage: https://www.npmjs.com/package/svelte-mapbox
- Size: 418 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# svelte-mapbox
## Components
### Proxy Components
Proxy components act as convenient wrappers for necessary boilerplate.
- Image ([Mapbox reference](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addimage))
- Map ([Mapbox reference](https://docs.mapbox.com/mapbox-gl-js/api/map/))
- Source ([Mapbox reference](https://docs.mapbox.com/mapbox-gl-js/api/sources/))
- Layer ([Mapbox reference](https://docs.mapbox.com/style-spec/reference/layers/))
### DOM Components
DOM components add necessary DOM elements and bind them to `mapbox-gl`.
- Marker ([Mapbox reference](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker))
- Popup ([Mapbox reference](https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup))
- Control ([Mapbox reference](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol))
## Getting Started
Install via NPM/PNPM/Yarn/Bun:
```sh
npm install svelte-mapbox --save
```
Import and use components:
```jsx
import { Map, Source, Marker, Popup } from 'svelte-mapbox'
Blue marker popup
Black tilted marker popup
```
## API Design
`svelte-mapbox` attempts to stick as close as possible to the official Mapbox API, but there are some differences. If you know `mapbox-gl`, you should know `svelte-mapbox`.
Generally, if you can add something to a `Map` object, you can import it as a component. If you can specify options for that thing, you can pass them as `options` to the component.
If you can call a `set` method on an object, you can pass it as a prop. As an example, calling `setLngLat` can be replaced with the `lngLat` prop.
If you want to simply access the underlying object, you can use `bind:[component type]`. As an example, `bind:map` returns the `Map` object.