If you work with Svelte and Leaflet, or you are interesting in a new cool map library, I think Sveaflet is a good choice for you.

What is Sveaflet

I spent few weeks to develop a Leaflet UI library for Svelte, I call it Sveaflet. Yes, Svelte + Leaflet == Sveaflet. Sveaflet is an open-source Map component library built with Svelte components and Leaflet that can help you build your map page faster.

Quick Start

Installation

Firstly, open your Svelte project, and then install it.

npm install sveaflet --save

That's all! Yes, the installation is so easy.

Usage

Here's the basic example:

<script>
  import { Map, TileLayer, Marker, Popup } from 'sveaflet';
</script>

<div style="width:100%;height:500px;">
  <Map
    options={{
      center: [51.505, -0.09],
      zoom: 13
    }}
  >
    <TileLayer
      urlTemplate={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'}
    />
    <Marker latlng={[51.505, -0.09]} />
  </Map>
</div>

Import component from Sveaflet, and then uses it. Make sure your components are all wraped by <Map>.
More details here.

Advantages

Multiple components

Sveaflet provides 20+ components for you to build your own map project. Here's the components list:

Circle
CircleMarker
Control
ControlAttribution
ControlLayers
ControlScale
ControlZoom
DivIcon
GeoJSON
Icon
ImageOverlay
LayerGroup
Map
Marker
Polygon
Polyline
Popup
Rectangle
SVGOverlay
TileLayer
TileLayerWMS
Tooltip
VideoOverlay

Learning curve

And it's very easy to use, componet's props are same as the params that you need when newing a leaflet object.

Documents

All component has detail documents, and I provide many example to show how to use Sveaflet to complete your works.

Future Plan

Here's my next steps abount building Sveaflet:

Web Testing
More examples for document
A beautiful logo. Yes, I'm looking for a new design to currently logo. Because I'm not a professional designer, so it may take some time
Waiting for Svelte5
Rebuilding Sveaflet Website. Now the website is inspired by flowbite-svelte website.

If you're interesting in Sveaflet, please read the doc for more details. It's my honer to have your github star!

Thanks for reading!

Sveaflet - A newly Leaflet Library for Svelte