Leafletjs-svelte

Svelte component for LeafletJS.

  • Written in TypeScript.
  • Supports skipping initializing Leaflet in SSR environments but instead only hydrate maps on the client-side.
  • Vector drawing support (coming soon…)

Installation

Node 16 or higher is required.

$ npm install leaflet leafletjs-svelte

Import stylesheet for Leaflet in your app entry point:

import 'leaflet/dist/leaflet.css';

Component Import:

<script>
  import { Leaflet } from 'leafletjs-svelte';
</script>

Components:

UI layers:

  • Marker
  • Popup
  • Tooltip

Raster layers:

  • TileLayer
  • TileLayer.WMS
  • ImageOverlay
  • VideoOverlay

Vector layers:

  • Polyline
  • Polygon
  • Circle
  • CircleMarker
  • Rectangle

Other layers:

  • LayerGroup
  • FeatureGroup
  • GeoJSON

Supported Plugins:

Vector Drawing:

  • Circle
  • CircleMarker
  • Marker
  • Polyline
  • Polygon
  • Rectangle
  • Multi-Rectangle