Skip to content

dimfeld/svelte-maplibre

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Mar 20, 2025
58e3728 · Mar 20, 2025
Mar 20, 2025
Sep 29, 2023
Oct 2, 2023
Mar 20, 2025
Feb 28, 2023
Mar 11, 2024
Feb 27, 2023
Feb 18, 2023
Mar 11, 2024
Oct 12, 2023
Feb 18, 2023
Aug 29, 2023
Oct 12, 2023
Mar 20, 2025
Feb 23, 2023
Sep 14, 2023
Nov 30, 2024
Mar 20, 2025
Mar 11, 2024
Jan 23, 2025
Nov 30, 2024
Dec 18, 2023
Nov 30, 2024
Feb 18, 2023
Feb 20, 2023

Repository files navigation

svelte-maplibre logo

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