Sveaflet - A newly Leaflet Library for Svelte

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!

Comments

[Spencer Dahl]

What are your plans for Svelte5?