svelte-mapbox-gl

Svelte 3 components for Mapbox GL.

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

Usage

See Storybook: https://jailbreak.gitlab.io/svelte-mapbox-gl

Basic usage:

<script>
  import {
    Map,
    Marker,
    NavigationControl,
    Popup
  } from "@jailbreak-paris/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>

Mapbox GL Javascript and CSS

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 the mapbox-gl module as external (see below).
• install the mapbox-gl from 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.css from 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.

Access token

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

Documentation

TODO

Meanwhile, read the source code and look at the Storybook to know about components, their properies and events.

Similar projects

• https://github.com/beyonk-adventures/svelte-mapbox
• https://soal.github.io/vue-mapbox/
• http://alex3165.github.io/react-mapbox-gl/
• https://uber.github.io/react-map-gl/