A comprehensive Svelte component library for creating interactive maps with Leaflet. Build beautiful, responsive maps in your SvelteKit applications with ease.
- Easy Integration - Drop-in Svelte components that wrap Leaflet functionality
- Type Safe - Built with TypeScript for better development experience
- SvelteKit Ready - Designed to work seamlessly with SvelteKit
- Rich Component Set - Comprehensive collection of map components
- Reactive - Leverages Svelte's reactivity for dynamic map updates
- Lightweight - Minimal bundle overhead on top of Leaflet
npm install @mythrantic/svelte-leaflet leafletor with yarn:
yarn add @mythrantic/svelte-leaflet leaflet<script>
import { LeafletMap, TileLayer, Marker, Popup } from '@mythrantic/svelte-leaflet';
const mapOptions = {
center: [51.505, -0.09],
zoom: 13
};
const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const tileLayerOptions = {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
};
</script>
<div class="map-container">
<LeafletMap options={mapOptions}>
<TileLayer url={tileUrl} options={tileLayerOptions} />
<Marker latLng={[51.505, -0.09]}>
<Popup>
<p>Hello from London!</p>
</Popup>
</Marker>
</LeafletMap>
</div>
<style>
.map-container {
height: 400px;
width: 100%;
}
</style>Don't forget to include Leaflet CSS in your app:
<!-- In your app.html or layout -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />- LeafletMap - Main map container component
- Marker - Place markers on the map
- Popup - Information popups attached to map elements
- Tooltip - Hover tooltips for map elements
- TileLayer - Tile layer for map backgrounds
- ImageOverlay - Display images over specific map bounds
- Circle - Draw circles on the map
- CircleMarker - Circle markers with fixed pixel radius
- Polygon - Draw polygons
- Polyline - Draw polylines/paths
- Rectangle - Draw rectangles
- GeoJSON - Display GeoJSON data
- Icon - Standard Leaflet icon
- DivIcon - Custom HTML-based icon
- ScaleControl - Display map scale
- Fullscreen - Fullscreen map control
- Route - Display routes using leaflet-routing-machine
<script>
import { LeafletMap, TileLayer, Marker, Popup } from '@mythrantic/svelte-leaflet';
const locations = [
{ lat: 51.505, lng: -0.09, name: 'Location 1' },
{ lat: 51.515, lng: -0.1, name: 'Location 2' },
{ lat: 51.525, lng: -0.11, name: 'Location 3' }
];
</script>
<LeafletMap options={{ center: [51.515, -0.1], zoom: 13 }}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
{#each locations as location}
<Marker latLng={[location.lat, location.lng]}>
<Popup>{location.name}</Popup>
</Marker>
{/each}
</LeafletMap><script>
import { LeafletMap, TileLayer, Circle, Polygon } from '@mythrantic/svelte-leaflet';
const circleOptions = {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
};
const polygonPoints = [
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
];
</script>
<LeafletMap options={{ center: [51.505, -0.09], zoom: 13 }}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Circle latLng={[51.508, -0.11]} options={circleOptions} />
<Polygon latLngs={polygonPoints} options={{ color: 'blue' }} />
</LeafletMap><script>
import { LeafletMap, TileLayer, GeoJSON } from '@mythrantic/svelte-leaflet';
const geojsonData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-0.09, 51.505]
},
properties: {
name: 'My Location'
}
}
]
};
</script>
<LeafletMap options={{ center: [51.505, -0.09], zoom: 13 }}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<GeoJSON data={geojsonData} />
</LeafletMap>For comprehensive documentation, examples, and demos, visit:
- Documentation & Interactive Examples: https://svelte-leaflet.valiantlynx.com
- Component Demos: Explore the
/componentsroute on the documentation site for detailed examples of each component
Each component accepts standard Leaflet options through the options prop. Refer to the Leaflet documentation for detailed configuration options.
- Node.js >= 16.14
- pnpm or npm
# Clone the repository
git clone https://github.com/mythrantic/svelte-leaflet.git
cd svelte-leaflet
# Install dependencies
pnpm install
# Start development server
pnpm run dev
# Build the library
pnpm run package
# Run tests
pnpm run test
# Lint code
pnpm run lintsrc/
lib/
components/ # Svelte components
extensions/ # Leaflet extensions
routes/ # Demo pages and examples
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Add a changelog when you do something significant (using changesets):
npx changeset- Follow the prompts to describe your changes
- This will create a new file in the
.changesetdirectory - You can add multiple changesets before committing
- Include the
.changeset/files in your commit
- Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
- Wait for review and address any feedback
- Once approved, your changes will be merged and included in the next release!
MIT License - see LICENSE file for details.
This project is licensed under the MIT License - see the LICENSE file for details.
- Issues: GitHub Issues
- Discussions: Use GitHub Discussions for questions and community support
Built with:
- Leaflet - The leading open-source JavaScript library for mobile-friendly interactive maps
- Svelte - Cybernetically enhanced web apps
- SvelteKit - The fastest way to build Svelte apps
Made with ❤️ by mythrantic
