Location Services
Location-focused mapping components for geolocation and route planning. Built with Leaflet.js, browser Geolocation API, and OSRM routing.
MapLocateMe
Find your current location using browser geolocation with accuracy display
MapRouting
A→B routing with turn-by-turn directions using OSRM
MapLocateMe - Find My Location
Click the locate button to find your current position. Requires location permission. Shows accuracy radius.
Usage Examples
<script>
import MapLocateMe from '$lib/components/MapLocateMe.svelte';
import type { GeolocationResult } from '$lib/types';
function handleLocate(result: GeolocationResult) {
console.log('Found:', result.position);
console.log('Accuracy:', result.accuracy, 'metres');
}
</script>
<MapLocateMe
center={{ lat: 51.5074, lng: -0.1278 }}
zoom={13}
height={400}
locateZoom={16}
showAccuracyCircle={true}
enableHighAccuracy={true}
onLocate={handleLocate}
/>Component Comparison
| Feature | MapLocateMe | MapRouting |
|---|---|---|
| Pan & Zoom | ✅ | ✅ |
| Find User Location | ✅ Geolocation API | - |
| Accuracy Circle | ✅ | - |
| Real-time Tracking | Optional | - |
| Multiple Markers | Single | 2 (A/B) |
| Route Display | - | ✅ Full path |
| Turn-by-Turn | - | ✅ OSRM |
| ETA/Duration Display | - | ✅ Duration |
| External API | None (browser) | OSRM (free) |
| Best For | User location | Navigation |
Use Cases
Fitness Apps
Use MapLocateMe with watchPosition for real-time tracking during runs or bike rides.
Navigation
Plan routes with MapRouting, switch between driving, cycling, or walking profiles.
Store Locator
Show user's current location with MapLocateMe and calculate routes to nearby stores with MapRouting.
Travel Planning
Plot multi-stop routes with MapRouting, display distances and estimated travel times.