Svelte-Leaflet Components

WARNING

This is a demo of work in progress...

Introduction

svelte-leaflet is a set of the lightweight (~30 KB minzipped) LeafletJS components for Svelte, inspired by Leaflet - open-source JavaScript library for mobile-friendly interactive maps

Quick start with new project

Note that you will need to have Node.js installed

Create a new project based on sveltejs/template

npx degit sveltejs/template svelte-app
cd svelte-app
npm install

Add components

npm install --save-dev svelte-leaflet

Modify file src/App.svelte in the following way

<Map>
    <TileLayer
        urlTemplate=""
        options={{
            minZoom: 2,
            errorTileUrl: ''
        }}
    />
</Map>

...then start Rollup

npm run dev

Navigate to localhost:5000

NOTE: In real applications, you have to add global styles to disabled states

    .disabled,
    [disabled] {
        opacity: 0.5;
        pointer-events: none;
    }

    .disabled .disabled,
    .disabled [disabled],
    [disabled] .disabled,
    [disabled] [disabled] {
        opacity: 1;
    }

Get started with an example

Clone repo OriginalSin/svelte-leaflet

git clone https://github.com/OriginalSin/svelte-leaflet.git

Then explore the example

cd svelte-leaflet/example
npm install
npm run dev

Navigate to localhost:5000