Narcoleptic's Patch Mangler

    svelte-mapbox-gl

    0.2.2 • Public • Published

    svelte-mapbox-gl

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

    Usage

    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>

    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

    Install

    npm i svelte-mapbox-gl

    DownloadsWeekly Downloads

    8

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    32.2 kB

    Total Files

    25

    Last publish

    Collaborators

    • saravanabalagi