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