svelte-maplibre

Svelte wrapper for the maplibre mapping library.

---

This library is functional, but I'm still experimenting with extra features to make advanced functionality easier to use. It also needs proper documentation. In the meantime, the demo site includes code for all the examples, and is a good place to start.

Changelog

Installation

npm install svelte-maplibre

Usage

<script>
  import { MapLibre } from 'svelte-maplibre';
</script>

<MapLibre 
  center={[50,20]}
  zoom={7}
  class="map"
  standardControls
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" />

<style>
  :global(.map) {
    height: 500px;
  }
</style>

Developing

You should create a .env file to configure the environment. See the .env.example file for the necessary settings.

Currently the only environment variable is a MapTiler API key, required for the 3D Buildings example. If you don't have one, you can set this to a blank value to use the other examples.

Credits

Logo created by Bruce Wayyn

Changelog

0.6.0

Major Changes

• #94 90cde79 Thanks @dimfeld!

Allow setting layers to be non-interactive. Layers with interactive={false} will not emit mouse events, and will not participate in hit testing when comparing to other layers with eventsIfTopMost.

This is useful, for example, when placing a SymbolLayer on top of a CircleLayer. See the updated "Clusters and Popups" example; previous the popup would disappear when the mouse was over the labels, but not it does not.

This is a breaking change:

• The interactive prop for Marker and MarkerLayer has been renamed to asButton, to make room for the new interactive prop.
• DeckGlLayer still continues to allow the pickable prop, but interactive should be used instead for consistency. The behavior here is unchanged though.

Minor Changes

• #91 52a7f4b Thanks @dimfeld! - Export source helpers for use by other Source components

Patch Changes

• #93 4357161 Thanks @dimfeld! - Fix exception when clicking a deck.gl layer with a Popup