Svelte 3 components for Mapbox GL.
This work is built on top of Jailbreak's Gitlab Repo. This fork will add bug fixes and further add functionality useful for working with maps. It is notable that deck.gl Mapbox Layer integration is fully possible.
Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.
Svelte is a JavaScript compiler used to build user interfaces similar to React or Vue, but lighter because components are compiled.
The provided components follow Svelte idioms as much as possible (declarative props, etc.), while keeping the same namings used by Mapbox GL JS (for objects, options and events).
See Storybook: https://jailbreak.gitlab.io/svelte-mapbox-gl
Basic usage:
<script>
import {
Map,
Marker,
NavigationControl,
Popup
} from "svelte-mapbox-gl";
const coordinates = { lat: 48, lng: 3 };
</script>
<Map
accessToken="xxx"
style="mapbox://styles/mapbox/streets-v11"
center={coordinates}
zoom={10}>
<NavigationControl />
<Marker {coordinates}>
<Popup>I'm a popup attached to a marker!</Popup>
</Marker>
</Map>This package defines mapbox-gl as a peer dependency.
It needs it, but it's the responsibility of the application using it to provide the mapbox-gl module.
About JavaScript two scenarios are possible:
- source Mapbox GL script in the DOM via a
<script src="">tag targeting the CDN URL, and configure your module bundler (e.g. Rollup, Webpack, etc.) to consider themapbox-glmodule as external (see below). - install the
mapbox-glfrom npm in your application
About CSS two scenarios are possible:
- source Mapbox GL stylesheet in the DOM via a
<link>tag targeting the CDN URL - import
mapbox-gl/dist/mapbox-gl.cssfrom your JavaScript code and setup your module bundler to manage CSS
See also: https://docs.mapbox.com/mapbox-gl-js/overview/
If you choose to include the script via a <script> DOM element, you must configure your module bundler to let it "redirect" the mapbox-gl module to the global variable window.mapboxgl which is provided by the sourced <script>. For example, see Webpack externals or Rollup globals + externals.
To avoid hard-coding your accessToken, you may load it from your environment (e.g. with dotenv). The Storybook uses the access token of all Mapbox GL JS demos (e.g. Display a map).
TODO
Meanwhile, read the source code and look at the Storybook to know about components, their properies and events.