Map Components
Interactive mapping components using Leaflet.js and OpenStreetMap tiles. Search for locations, display database markers, and add points dynamically.
Database Connected
MapBasic
Simple interactive map with pan and zoom controls
MapSearch
Location search with Nominatim geocoding
MapMarkers
Database markers with popups and filtering
MapLive
Real-time marker additions with animations
MapBasic - Interactive Map
A foundation map component with pan, zoom, and OpenStreetMap tiles. Use keyboard arrows or drag to navigate.
Usage Examples
<script>
import MapBasic from '$lib/components/MapBasic.svelte';
</script>
<MapBasic
center={{ lat: 51.5074, lng: -0.1278 }}
zoom={13}
height={400}
enableScrollZoom={true}
showZoomControl={true}
/>Component Comparison
| Feature | MapBasic | MapSearch | MapMarkers | MapLive |
|---|---|---|---|---|
| Pan & Zoom | ✅ | ✅ | ✅ | ✅ |
| Location Search | - | ✅ | - | - |
| Display Markers | - | Single | ✅ Multiple | ✅ Multiple |
| Category Filtering | - | - | ✅ | - |
| Add Markers | - | - | - | ✅ Click |
| Edit Markers | - | - | - | ✅ Drag/Form |
| Database Integration | - | - | ✅ | Optional |
| Best For | Basic display | Location finding | Data visualisation | User input |